Slik viser du en forfatterliste med avatarer på WordPress-bidragsytersiden

Mens vi jobbet på en kundes nettsted, innså vi at den innebygde funksjonen for oppføring av forfattere ikke var nok. Vi viste deg hvordan du viser alle forfattere fra nettstedet ditt, men den metoden var bare bra hvis du vil ha en enkel liste som skal vises i sidelinjen. Hvis du vil opprette en mer innholdsrik og nyttig bidragsyterside, er den funksjonen ubrukelig.

I denne artikkelen vil vi vise deg hvordan du kan opprette en bidragsyterside som vil vise en liste over forfattere med avatarer eller userphoto og annen informasjon du liker. Denne opplæringen er en mellomnivå opplæringen.

Det første du må gjøre er å lage en egendefinert side ved hjelp av denne malen.

Da må du åpne functions.php fil i tema-mappen din og legg til følgende kode:

 funksjon bidragsytere () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename fra $ wpdb-> brukere ORDER BY display_name"); foreach ($ forfattere som $ forfatter) echo "
"ekko" ID; ekko "\"> "; ekko get_avatar ($ author-> ID); ekko" "; ekko"; ekko "ID; echo "\"> "; the_author_meta (" display_name ", $ author-> ID); ekko" "; ekko" "; ekko"
"; 

Ved å legge til denne funksjonen forteller du WordPress for å lage en funksjon som vil vise forfatterens navn og forfatterens avatar. Du kan endre avataren til userphoto plugin-innstilling ved å bare endre følgende linje:

echo get_avatar ($ author-> ID);

og erstatte den med:

ekko userphoto ($ author-> ID);

Du kan legge til flere funksjoner i denne funksjonen, for eksempel å vise forfatteradresse og annen informasjon fra profilen ved å følge strukturen som brukes.

Du må også legge til følgende linjer i CSS-filen din:

 #authorlist li clear: left; flyte: venstre; margin: 0 0 5px 0;  #authorlist img.photo width: 40px; høyde: 40px; flyte: venstre;  #authorlist div.authname margin: 20px 0 0 10px; flyte: venstre;  

Når du er ferdig med å legge til funksjonen, trenger du nå å ringe den i sidemalen. Åpne contributors.php filen eller hva du navnet filen. Følg samme sidemal som din page.php og i løkken, legg bare til denne funksjonen i stedet for å vise innholdet:

Dette gir deg en mer innholdsrik bidragsyterside. Dette trikset er utmerket for Multi-Author blogger.

Her er et eksempel på hvordan vi brukte det:

Hvis du vil ha en bidragsyterside med informasjon som vist i eksemplet ovenfor, må du gjøre noen endringer i den opprinnelige funksjonen. Vi har et eksempelkode som gir deg alt som vises i bildet ovenfor.

funksjon bidragsytere () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename fra $ wpdb-> brukere WHERE display_name 'admin' ORDER BY display_name"); foreach ($ forfattere som $ forfatter) echo "
"ekko" ID); ekko "/ \"> "; ekko get_avatar ($ author-> ID); ekko" "; ekko"; ekko "ID); ekko "/ \"> "; the_author_meta ('display_name', $ author-> ID); ekko" "; ekko"
"ekko" Nettsted: ID); ekko "/ \" target = "_ blank"> "the_author_meta ('user_url', $ author-> ID); ekko" "; ekko"
"; ekko" Twitter: ID); ekko "\" target = "_ blank"> "the_author_meta (" twitter ", $ author-> ID); ekko" "; ekko"
"ekko" ID); ekko "/ \"> Besøk "; the_author_meta ('display_name', $ author-> ID); ekkos profilside"; echo ""; ekko "
";

Denne koden bruker User Photo plugin. Twitter-feltet blir vist ved hjelp av trikset vi nevnte i artikkelen Hvordan vise forfatterens Twitter og Facebook på profilsiden.

CSS for eksempel vil se ut som:

#authorlist ul listestil: none; bredde: 600px; margin: 0; polstring: 0;  #authorlist li margin: 0 0 5px 0; listestil: none; høyde: 90px; polstring: 15px 0 15px 0; grensebunn: 1px solid #ececec;  #authorlist img.photo width: 80px; høyde: 80px; flyte: venstre; margin: 0 15px 0 0; polstring: 3px; grense: 1px solid #ececec;  #authorlist div.authname margin: 20px 0 0 10px; 

Du kan vise mer informasjon hvis du vil, ved å bruke den avanserte koden som din guide.

Kilde til denne funksjonen