Jak wyświetlić listę autorów z awatarami na stronie współpracowników WordPress

Podczas pracy nad stroną klienta zdaliśmy sobie sprawę, że wbudowana funkcja listowania autorów nie wystarczy. Pokazaliśmy ci, jak wyświetlić wszystkich autorów z twojej witryny, ale ta metoda była dobra tylko wtedy, gdy chcesz wyświetlić prostą listę na pasku bocznym. Jeśli chcesz stworzyć bardziej bogatą w treść i użyteczną stronę dla współpracowników, ta funkcja jest bezużyteczna.

W tym artykule pokażemy Ci, jak możesz stworzyć stronę contributors, która wyświetli listę autorów z awatarami lub userphoto i innymi informacjami, które Ci się podobają. Ten poradnik jest poziom średniozaawansowany tutorial.

Pierwszą rzeczą, którą musisz zrobić, to stworzyć niestandardową stronę za pomocą tego szablonu.

Następnie musisz otworzyć funkcje.php plik w folderze themes i dodaj następujący kod:

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')."/?autor=";
echo $author - > ID;
echo "">";
echo get_avatar ($author - > ID);
echo " < /a>";
echo ' < div>';
echo "<a href=""get_bloginfo('url')."/?autor=";
echo $author - > ID;
echo "">";
the_author_meta ('display_name', $author - > ID);
echo " < /a>";
echo "</div>";
echo "</li>";
}
}

Dodając tę funkcję, każesz WordPressowi utworzyć funkcję, która wyświetli nazwisko autora i awatar autora. Możesz zmienić ustawienie avatara na wtyczkę userphoto, zmieniając po prostu następującą linię:

echo get_avatar ($author - > ID);

i zastąpienie go:

echo userphoto ($author - > ID);

Możesz dodać więcej funkcji do tej funkcji, takich jak wyświetlanie adresu URL autora i innych informacji z profilu, postępując zgodnie z używaną strukturą.

Musisz również dodać następujące linie do pliku CSS:

# authlist li {
clear: left;
float: left;
margin: 0 0 5px 0;
}

# autorlista img.photo {
width: 40px;
wysokość: 40px;
float: left;
}

# autorlist div.authname {
margin: 20px 0 0 10px;
float: left;
}

Po zakończeniu dodawania funkcji, teraz musisz wywołać ją w szablonie strony. Otwórz współpracowników.plik php lub jak go nazwiesz. Postępuj zgodnie z tym samym szablonem strony, co Twoja strona.php i w pętli wystarczy dodać tę funkcję zamiast wyświetlać zawartość:

<div id = "authorlist" ><ul><?PHP contributors ();?>< / ul > < / div>

To zapewni Ci bardziej bogatą w treść stronę contributors. Ta sztuczka jest doskonała dla blogów wielu autorów.

Oto przykład tego, jak go wykorzystaliśmy:

Jeśli chcesz mieć stronę contributors z informacjami wyświetlanymi w powyższym przykładzie, musisz wprowadzić kilka zmian do oryginalnej funkcji. Mamy przykładowy kod, który dostarczy Ci dokładnie wszystko, co jest wyświetlane na powyższym obrazku.

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')."/autor/";
the_author_meta ('user_nicename', $author - > ID);
echo "/">";
echo get_avatar ($author - > ID);
echo " < /a>";
echo ' < div>';
echo "<a href=""get_bloginfo('url')."/autor/";
the_author_meta ('user_nicename', $author - > ID);
echo "/">";
the_author_meta ('display_name', $author - > ID);
echo " < /a>";
echo "<br />";
echo "strona www: <a href="";
the_author_meta ('user_url', $author - > ID);
echo "/" target='_blank'>";
the_author_meta ('user_url', $author - > ID);
echo " < /a>";
echo "<br />";
echo " < 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')."/autor/";
the_author_meta ('user_nicename', $author - > ID);
echo " / " > odwiedź";
the_author_meta ('display_name', $author - > ID);
echo "'s Profile Page";
echo " < /a>";
echo "</div>";
echo "</li>";
}
}

Ten kod wykorzystuje wtyczkę Zdjęcia użytkownika. Pole twitter jest wyświetlane za pomocą sztuczki, o której wspomnieliśmy w artykule Jak wyświetlić autora Twittera i Facebooka na stronie profilu.

CSS na przykład wyglądałby tak:

# autorlista ul{
styl listy: brak;
width: 600px;
margin: 0;
padding: 0;
}
# authlist li {
margin: 0 0 5px 0;
styl listy: brak;
wysokość: 90px;
padding: 15px 0 15px 0;
border-bottom: 1px solid #ececec;
}

# autorlista img.photo {
width: 80px;
wysokość: 80px;
float: left;
margin: 0 15px 0 0;
padding: 3px;
border: 1px solid #ececec;
}

# autorlist div.authname {
margin: 20px 0 0 10px;
}

Możesz wyświetlić więcej informacji, jeśli chcesz, używając Zaawansowanego kodu jako przewodnika.

Źródło tej funkcji