Comment afficher une liste d'auteurs avec des avatars dans la page Contributeurs de WordPress

En travaillant sur le site Web d'un client, nous avons réalisé que la fonction intégrée permettant de répertorier les auteurs ne suffisait pas. Nous vous avons montré comment afficher tous les auteurs de votre site, mais cette méthode n'était utile que si vous souhaitez qu'une simple liste s'affiche dans votre barre latérale. Si vous souhaitez créer une page de contributeurs plus riche en contenu et plus utile, cette fonction est inutile..

Dans cet article, nous allons vous montrer comment créer une page de contributeurs qui affichera une liste d'auteurs avec avatars ou userphoto, ainsi que toute autre information de votre choix. Ce tutoriel est un niveau intermédiaire Didacticiel.

La première chose à faire est de créer une page personnalisée à l'aide de ce modèle..

Ensuite, vous devrez ouvrir functions.php fichier dans votre dossier de thèmes et ajoutez le code suivant:

 fonction contributors () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, nom_utilisateur_utilisateur à partir de $ wpdb-> utilisateurs ORDER BY nom_affichage"); foreach ($ authors en tant que $ 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"
"; 

En ajoutant cette fonction, vous indiquez à WordPress de créer une fonction permettant d'afficher le nom de l'auteur et son avatar. Vous pouvez modifier le paramètre du plug-in userphoto de l'avatar en modifiant simplement la ligne suivante:

echo get_avatar ($ author-> ID);

et le remplacer par:

echo userphoto ($ author-> ID);

Vous pouvez ajouter d'autres fonctionnalités à cette fonction, telles que l'affichage de l'URL de l'auteur et d'autres informations du profil en suivant la structure utilisée..

Vous devez également ajouter les lignes suivantes à votre fichier CSS:

 #authorlist li clear: left; float: gauche; marge: 0 0 5 px 0;  #authorlist img.photo width: 40px; hauteur: 40px; float: gauche;  #authorlist div.authname margin: 20px 0 0 10px; float: gauche;  

Une fois que vous avez terminé d'ajouter la fonction, vous devez maintenant l'appeler dans votre modèle de page. Ouvrez le fichier contributors.php ou ce que vous nommez. Suivez le même modèle de page que votre page.php et dans la boucle, ajoutez simplement cette fonction au lieu d’afficher le contenu:

Cela vous fournira une page de contributeurs plus riche en contenu. Cette astuce est excellente pour les blogs multi-auteurs.

Maintenant, voici un exemple de la façon dont nous l'avons utilisé:

Si vous souhaitez avoir une page de contributeurs avec des informations telles que celles présentées dans l'exemple ci-dessus, vous devez apporter quelques modifications à la fonction d'origine. Nous avons un exemple de code qui vous donnera exactement tout ce qui est affiché dans l'image ci-dessus.

fonction contributors () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, nom_utilisateur_utilisateur à partir de $ wpdb-> utilisateurs WHERE nom_affichage 'admin' ORDER BY nom_affichage"); foreach ($ authors en tant que $ 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" Site 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 "/ \"> visite "; the_author_meta ('display_name', $ author-> ID); echo" page de profil ""; echo ""; echo ""; echo "
";

Ce code utilise le plugin User Photo. Le champ twitter est affiché à l'aide de l'astuce mentionnée dans l'article Comment afficher les comptes Twitter et Facebook de l'auteur dans la page Profil.

Le CSS par exemple ressemblerait à ceci:

#authorlist ul list-style: none; largeur: 600px; marge: 0; rembourrage: 0;  #authorlist li margin: 0 0 5px 0; style de liste: aucun; hauteur: 90px; remplissage: 15px 0 15px 0; border-bottom: 1px solid #ececec;  #authorlist img.photo width: 80px; hauteur: 80px; float: gauche; marge: 0 15 px 0 0; rembourrage: 3px; bordure: 1px solide #ececec;  #authorlist div.authname margin: 20px 0 0 10px; 

Vous pouvez afficher plus d'informations si vous le souhaitez en utilisant le code avancé comme guide..

Source de cette fonction