Hoe een auteurslijst met Avatars te tonen op de WordPress Contributors-pagina

Tijdens het werken op de website van een klant, realiseerden we ons dat de ingebouwde functie voor het vermelden van auteurs niet voldoende was. We hebben laten zien hoe u alle auteurs van uw site kunt weergeven, maar die methode was alleen goed als u een eenvoudige lijst in uw zijbalk wilt weergeven. Als u een meer inhoudrijke en nuttige bijdragepagina wilt maken, is die functie nutteloos.

In dit artikel laten we je zien hoe je een bijdragepagina kunt maken die een lijst met auteurs met avatars of gebruikersfoto's en alle andere informatie die je leuk vindt weergeeft. Deze zelfstudie is een gemiddeld niveau zelfstudie.

Het eerste wat u hoeft te doen is een aangepaste pagina maken met behulp van deze sjabloon.

Dan moet je openen functions.php bestand in uw themamap en voeg de volgende code toe:

 functie-bijdragers () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename from $ wpdb-> users ORDER BY display_name"); foreach ($ authors as $ 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"
"; 

Door deze functie toe te voegen, vertelt u WordPress een functie te maken die de naam van de auteur en de avatar van de auteur toont. Je kunt de avatar in userphoto plugin-instelling wijzigen door simpelweg de volgende regel te veranderen:

echo get_avatar ($ author-> ID);

en te vervangen door:

echo userphoto ($ author-> ID);

U kunt meer functies aan deze functie toevoegen, zoals het weergeven van de URL van de auteur en andere informatie uit het profiel door de gebruikte structuur te volgen.

U zou ook de volgende regels aan uw CSS-bestand moeten toevoegen:

 #authorlist li clear: left; zweven: links; marge: 0 0 5px 0;  #authorlist img.photo width: 40px; hoogte: 40px; zweven: links;  #authorlist div.authname margin: 20px 0 0 10px; zweven: links;  

Als u klaar bent met het toevoegen van de functie, moet u deze nu in uw paginasjabloon oproepen. Open het Contributors.php-bestand of hoe je het bestand ook noemt. Volg dezelfde paginasjabloon als uw page.php en voeg in de loop alleen deze functie toe in plaats van de inhoud weer te geven:

Hiermee krijgt u een pagina met meer inhoudsvolle bijdragers. Deze truc is uitstekend voor blogs van meerdere auteurs.

Hier is een voorbeeld van hoe we het hebben gebruikt:

Als u een bijdragepagina wilt hebben met informatie zoals weergegeven in het bovenstaande voorbeeld, moet u een paar wijzigingen aanbrengen in de oorspronkelijke functie. We hebben een voorbeeldcode waarmee u precies alles krijgt wat in de bovenstaande afbeelding wordt weergegeven.

functie-bijdragers () 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" "; 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 "/ \"> Bezoek "; the_author_meta ('display_name', $ author-> ID); echo" 's Profile Page "; echo" "; echo" "; echo"
";

Deze code maakt gebruik van de User Photo-plug-in. Het twitterveld wordt weergegeven met behulp van de truc die we in het artikel How to Display Author's Twitter en Facebook op de profielpagina hebben genoemd.

De CSS zou er bijvoorbeeld als volgt uitzien:

#authorlist ul list-style: none; breedte: 600 px; marge: 0; opvulling: 0;  #authorlist li margin: 0 0 5px 0; lijststijl: geen; hoogte: 90 px; opvulling: 15px 0 15px 0; border-bottom: 1px solid #ececec;  #authorlist img.photo width: 80px; hoogte: 80 px; zweven: links; marge: 0 15px 0 0; opvulling: 3px; rand: 1px solide #ececec;  #authorlist div.authname margin: 20px 0 0 10px; 

U kunt desgewenst meer informatie weergeven door de geavanceerde code als leidraad te gebruiken.

Bron van deze functie