Bei der Arbeit an der Website eines Kunden stellten wir fest, dass die eingebaute Funktion zum Auflisten von Autoren nicht ausreichte. Wir haben Ihnen gezeigt, wie Sie alle Autoren Ihrer Website anzeigen können, aber diese Methode war nur gut, wenn Sie möchten, dass eine einfache Liste in Ihrer Seitenleiste angezeigt wird. Wenn Sie eine inhaltsreichere und nützlichere Beitragsseite erstellen möchten, ist diese Funktion nutzlos.
In diesem Artikel zeigen wir Ihnen, wie Sie eine Mitwirkenden-Seite erstellen können, die eine Liste von Autoren mit Avataren oder Benutzerfoto und anderen gewünschten Informationen anzeigt. Dieses Tutorial ist ein mittleres Niveau Lernprogramm.
Als erstes müssen Sie eine benutzerdefinierte Seite mit dieser Vorlage erstellen.
Dann müssen Sie öffnen Funktionen.php Datei in Ihrem Themenordner und fügen Sie den folgenden Code hinzu:
function contributors() { global $wpdb; $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name"); foreach($authors as $author) { echo "<li>"; echo "<a href="".get_bloginfo('url')."/?author="; echo $author->ID; echo "">"; echo get_avatar($author->ID); echo "</a>"; echo '<div>'; echo "<a href="".get_bloginfo('url')."/?author="; echo $author->ID; echo "">"; the_author_meta('display_name', $author->ID); echo "</a>"; echo "</div>"; echo "</li>"; } }
Indem Sie diese Funktion hinzufügen, weisen Sie WordPress an, eine Funktion zu erstellen, die den Namen des Autors und den Avatar des Autors anzeigt. Sie können die Plugin-Einstellung „Avatar“ in „Benutzerfoto“ ändern, indem Sie einfach die folgende Zeile ändern:
echo get_avatar($author->ID);
und ersetzen Sie es durch:
echo userphoto($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.
Außerdem müssten Sie Ihrer CSS-Datei die folgenden Zeilen hinzufügen:
#authorlist li { clear: left; float: left; margin: 0 0 5px 0; } #authorlist img.photo { width: 40px; height: 40px; float: left; } #authorlist div.authname { margin: 20px 0 0 10px; float: left; }
Sobald Sie die Funktion hinzugefügt haben, müssen Sie sie jetzt in Ihrer Seitenvorlage aufrufen. Öffnen Sie die Datei contributors.php oder wie auch immer Sie die Datei nennen. Folgen Sie der gleichen Seitenvorlage wie Ihre page.php und fügen Sie in der Schleife einfach diese Funktion hinzu, anstatt den Inhalt anzuzeigen:
<div id="authorlist"><ul><?php contributors(); ?></ul></div>
Dadurch erhalten Sie eine inhaltsreichere Mitwirkendenseite. Dieser Trick eignet sich hervorragend für Blogs mit mehreren Autoren.
Hier ist nun ein Beispiel dafür, wie wir es verwendet haben:
Wenn Sie eine Contributors-Seite 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 erhalten, was im obigen Bild angezeigt wird.
function contributors() { global $wpdb; $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY display_name"); foreach ($authors as $author ) { echo "<li>"; echo "<a href="".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/">"; echo get_avatar($author->ID); echo "</a>"; echo '<div>'; echo "<a href="".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/">"; the_author_meta('display_name', $author->ID); echo "</a>"; echo "<br />"; echo "Website: <a href=""; the_author_meta('user_url', $author->ID); echo "/" target="_blank">"; the_author_meta('user_url', $author->ID); echo "</a>"; echo "<br />"; echo "Twitter: <a href="http://twitter.com/"; the_author_meta('twitter', $author->ID); echo "" target="_blank">"; the_author_meta('twitter', $author->ID); echo "</a>"; echo "<br />"; echo "<a href="".get_bloginfo('url')."/author/"; the_author_meta('user_nicename', $author->ID); echo "/">Visit "; the_author_meta('display_name', $author->ID); echo "'s Profile Page"; echo "</a>"; echo "</div>"; echo "</li>"; } }
Dieser Code verwendet das User Photo-Plugin. Das Twitter-Feld wird mit dem Trick angezeigt, den wir im Artikel Twitter und Facebook des Autors auf der Profilseite erwähnt haben.
Das CSS würde zum Beispiel so aussehen:
#authorlist ul{ list-style: none; width: 600px; margin: 0; padding: 0; } #authorlist li { margin: 0 0 5px 0; list-style: none; height: 90px; padding: 15px 0 15px 0; border-bottom: 1px solid #ececec; } #authorlist img.photo { width: 80px; height: 80px; float: left; margin: 0 15px 0 0; padding: 3px; border: 1px solid #ececec; } #authorlist div.authname { margin: 20px 0 0 10px; }
Sie können weitere Informationen anzeigen, wenn Sie möchten, indem Sie den erweiterten Code als Leitfaden verwenden.