Up next
Author
Share article
The post has been shared by 0 people.
Facebook 0
X (Twitter) 0
Pinterest 0
Mail 0

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 "
  • ";
echo "";
echo get_avatar ($author - > ID);
echo " < /a>";
echo ' < div>';
echo "";
the_author_meta ('display_name', $author - > ID);
echo " < /a>";
echo "
    • "; echo ""; } }

    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ść:

      < / 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:

    Example of a Contributors Page with Author List and other Info

    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 "
  • ";
echo " ID);
echo "/">";
echo get_avatar ($author - > ID);
echo " < /a>";
echo ' < div>';
echo " ID);
echo "/">";
the_author_meta ('display_name', $author - > ID);
echo " < /a>";
echo "
    ";
echo "strona www:      ID);
echo "/" target='_blank'>";
the_author_meta ('user_url', $author - > ID);
echo " < /a>";
echo "
    ";
echo " < a href="http://twitter.com/";
the_author_meta ('twitter', $author - > ID);
echo "" target='_blank'>";
the_author_meta ('twitter', $author - > ID);
echo " < /a>";
echo "
    ";
echo "     ID);
echo " / " > odwiedź";
the_author_meta ('display_name', $author - > ID);
echo "'s Profile Page";
echo " < /a>";
echo "
    • "; echo ""; } }

    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