So zeigen Sie eine Autorenliste mit Avataren in der WordPress-Mitwirkerseite an

Bei der Arbeit an der Website eines Kunden stellten wir fest, dass die integrierte Funktion zum Auflisten von Autoren nicht ausreicht. Wir haben Ihnen gezeigt, wie Sie alle Autoren Ihrer Site anzeigen können. Diese Methode war jedoch nur sinnvoll, wenn Sie eine einfache Liste in Ihrer Seitenleiste anzeigen möchten. Wenn Sie eine reichhaltigere und nützlichere Mitwirkerseite erstellen möchten, ist diese Funktion nutzlos.

In diesem Artikel zeigen wir Ihnen, wie Sie eine Mitwirkerseite erstellen können, auf der eine Liste von Autoren mit Avataren oder Benutzerbildern sowie andere Informationen angezeigt werden, die Sie mögen. Dieses Tutorial ist ein Zwischenstufe Tutorial.

Als erstes müssen Sie eine benutzerdefinierte Seite mit dieser Vorlage erstellen.

Dann müssen Sie öffnen Functions.php Datei in Ihrem Themenordner und fügen Sie den folgenden Code hinzu:

 function contributors () global $ wpdb; $hors = $ wpdb-> get_results ("SELECT ID, user_nicename aus $ wpdb-> users ORDER BY anzeigername"); foreach ($ autors als $ author) echo "
"; Echo" ID; echo "\"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID; echo "\"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo" "; echo"
"; 

Durch das Hinzufügen dieser Funktion weisen Sie WordPress an, eine Funktion zu erstellen, die den Namen des Autors und den Avatar des Autors anzeigt. Sie können den Avatar in die Einstellung des Userphoto-Plugins ändern, indem Sie einfach die folgende Zeile ändern:

echo get_avatar ($ author-> ID);

und ersetze es durch:

Echo Benutzerfoto ($ author-> ID);

Sie können dieser Funktion weitere Funktionen hinzufügen, z. B. die Anzeige der Autoren-URL und anderer Informationen aus dem Profil, indem Sie der verwendeten Struktur folgen.

Sie müssen der CSS-Datei außerdem die folgenden Zeilen hinzufügen:

 #authorlist li clear: left; Schwimmer: links; Marge: 0 0 5px 0;  #authorlist img.photo width: 40px; Höhe: 40px; Schwimmer: links;  #authorlist div.authname margin: 20px 0 0 10px; Schwimmer: links;  

Wenn Sie mit dem Hinzufügen der Funktion fertig sind, müssen Sie sie jetzt in Ihrer Seitenvorlage aufrufen. Öffnen Sie die Datei contributors.php oder wie auch immer Sie die Datei benennen. Folgen Sie derselben Seitenvorlage wie Ihre page.php und fügen Sie in der Schleife diese Funktion hinzu, anstatt den Inhalt anzuzeigen:

Auf diese Weise erhalten Sie eine reichhaltigere Mitwirkerseite. Dieser Trick eignet sich hervorragend für Multi-Author-Blogs.

Hier ist ein Beispiel, wie wir es benutzt haben:

Wenn Sie eine Mitgeberseite mit Informationen wie im obigen Beispiel haben möchten, müssen Sie einige Änderungen an der ursprünglichen Funktion vornehmen. Wir haben einen Beispielcode, mit dem Sie genau alles im obigen Bild anzeigen können.

function contributors () global $ wpdb; $hors = $ wpdb-> get_results ("SELECT ID, user_nicename aus $ wpdb-> users WHERE display_name 'admin' ORDER BY display_name"); foreach ($ autors als $ author) echo "
"; Echo" -ID); echo "/ \"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID); echo "/ \"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo"
"; echo" Website: ID); echo "/ \" target = "_ blank"> "; the_author_meta ('user_url', $ author-> ID); echo" "; echo"
"; Echo" Twitter: ID); echo "\" target = "_ blank"> "; the_author_meta ('twitter', $ author-> ID); echo" "; echo"
"; Echo" -ID); echo "/ \"> Visit "; the_author_meta ('display_name', $ author-> ID); echo" s Profilseite "; echo" "; echo" "; echo"
";

Dieser Code verwendet das User Photo Plugin. Das Twitter-Feld wird mithilfe des Tricks angezeigt, den wir im Artikel So zeigen Sie Twitter und Facebook des Autors auf der Profilseite an.

Das CSS würde zum Beispiel so aussehen:

#authorlist ul list-style: none; Breite: 600px; Marge: 0; Polsterung: 0;  #authorlist li margin: 0 0 5px 0; Listenstil: keine; Höhe: 90px; Polsterung: 15px 0 15px 0; Rahmen unten: 1px fest #ececec;  #authorlist img.photo width: 80px; Höhe: 80px; Schwimmer: links; Marge: 0 15px 0 0; Polsterung: 3px; Rand: 1px fest #ececec;  #authorlist div.authname margin: 20px 0 0 10px; 

Sie können auf Wunsch weitere Informationen anzeigen, indem Sie den erweiterten Code als Leitfaden verwenden.

Quelle dieser Funktion