Come visualizzare un elenco di autori con avatar nella pagina dei contributori di WordPress

Mentre lavoravamo sul sito web di un cliente, ci siamo resi conto che la funzione incorporata per elencare gli autori non era abbastanza. Ti abbiamo mostrato come visualizzare tutti gli autori dal tuo sito, ma questo metodo è stato utile solo se desideri visualizzare un semplice elenco nella barra laterale. Se vuoi creare una pagina di contributori più ricca di contenuti e utile, allora quella funzione è inutile.

In questo articolo ti mostreremo come creare una pagina di contributori che visualizzerà un elenco di autori con avatar o userphoto e qualsiasi altra informazione che ti piace. Questo tutorial è un livello intermedio lezione.

La prima cosa che devi fare è creare una pagina personalizzata usando questo modello.

Quindi dovrai aprire functions.php file nella cartella Temi e aggiungi il seguente codice:

 function contributors () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename da $ 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"
"; 

Aggiungendo questa funzione stai dicendo a WordPress di creare una funzione che visualizzi il nome dell'autore e l'avatar dell'autore. Puoi cambiare l'impostazione del plug-in per l'avatar con userphoto semplicemente cambiando la seguente linea:

echo get_avatar ($ author-> ID);

e sostituendolo con:

echo userphoto ($ author-> ID);

È possibile aggiungere più funzioni a questa funzione, come visualizzare l'URL dell'autore e altre informazioni dal profilo, seguendo la struttura utilizzata.

Dovresti anche aggiungere le seguenti righe al tuo file CSS:

 #authorlist li clear: left; fluttuare: a sinistra; margine: 0 0 5px 0;  #authorlist img.photo width: 40px; altezza: 40px; fluttuare: a sinistra;  #authorlist div.authname margin: 20px 0 0 10px; fluttuare: a sinistra;  

Una volta che hai finito di aggiungere la funzione, ora dovresti chiamarla nel tuo modello di pagina. Apri il file contributors.php o qualsiasi cosa tu chiami il file. Segui lo stesso modello di pagina del tuo page.php e nel ciclo, aggiungi questa funzione invece di visualizzare il contenuto:

Questo ti fornirà una pagina di contributori più ricca di contenuti. Questo trucco è eccellente per i blog con più autori.

Ora ecco un esempio di come lo abbiamo usato:

Se si desidera avere una pagina di contributori con informazioni come visualizzate nell'esempio sopra, sarà necessario apportare alcune modifiche alla funzione originale. Abbiamo un codice di esempio che ti mostrerà esattamente tutto ciò che viene mostrato nell'immagine sopra.

function contributors () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename da $ 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" Sito web: 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 "/ \"> Visita "; the_author_meta ('display_name', $ author-> ID); echo" Pagina profilo "; echo" "; echo" "; echo"
";

Questo codice sta utilizzando il plugin Foto utente. Il campo twitter viene visualizzato utilizzando il trucco che abbiamo menzionato nell'articolo Come visualizzare Twitter e Facebook dell'autore nella pagina del profilo.

Ad esempio il CSS assomiglierebbe a:

#authorlist ul list-style: none; larghezza: 600 px; margine: 0; padding: 0;  #authorlist li margin: 0 0 5px 0; stile elenco: nessuno; altezza: 90 px; imbottitura: 15px 0 15px 0; border-bottom: 1px solid #ececec;  #authorlist img.photo width: 80px; altezza: 80 px; fluttuare: a sinistra; margine: 0 15px 0 0; imbottitura: 3px; border: 1px solid #ececec;  #authorlist div.authname margin: 20px 0 0 10px; 

Puoi visualizzare più informazioni se lo desideri utilizzando il codice avanzato come guida.

Fonte di questa funzione