Personnalisez l’affichage de vos utilisateurs WordPress

Sur un blog WordPress avec beaucoup de contributeur-trice-s, on aimerait pouvoir afficher des informations au sujet de chacun-e d’eux. Les gens qui viennent lire des articles sur le blog aimeraient peut-être en savoir + sur les auteurs: connaître leur biographie et leurs parcours. De plus, ils aimeraient peut-être voir d’autres travaux des auteurs en cliquant sur des liens. C’est le cas par exemple du site de WPFormation: sous chaque article, vous trouvez des informations sur l’auteur.

Dans ce tutoriel, nous allons voir comment les utilisateurs sont affichés dans le template de notre thème, comment ajouter des informations supplémentaires et modifier l’affichage. A la fin, nous verrons comment afficher tous les auteurs du blog sur une seule page.

wordpress_users

Installation du thème Twenty Twenty

Pour être dans l’actualité et la fraicheur, je vous propose de travailler sur l’affichage des ‘users’ directement à partir du futur nouveau thème par défaut de WordPress: Twenty Twenty

Au moment où j’écris ce tutoriel, le thème Twenty Twenty n’est pas encore sorti. Il sera présent par défaut à la version majeure 5.3 de WordPress qui devrait sortir le 12 novembre 2019. En attendant, une version master est disponible sur le repository de Github.

Il suffit de télécharger le fichier zip ici:

github_theme_wordpress_twenty_twentyet pour installer le thème, je vous laisse voir sur ce tutoriel:

Comment installer un thème WordPress gratuit ou premium ?

Création des utilisateurs

Pour l’exemple, nous allons créer plusieurs utilisateurs sur notre blog fictif. Pour créer un utilisateur, nous devons aller dans l’onglet ‘utilisateurs’ de l’administration.

Vous trouvez les informations ici pour ajouter un nouvel utilisateur.

J’ai créé plusieurs utilisateurs dont Laure Ambar.

Pour l’exemple, nous ajoutons l’extension ‘Avatar Privacy’ qui permet d’ajouter des avatars très facilement sans passer par Gravatar.com. C’est ici pour savoir comment ajouter une extension.

Dorénavant, Laure Ambar peut se connecter à l’admin et compléter son profil.

Voici par défaut, les différents champs que devra remplir Laure Ambar pour voir son profil afficher en bas des articles qu’elle écrira. Ici, il manque encore des renseignements biographiques et la photo de profil.

wordpress_profil_admin

Créations de nouveaux champs

Dans les informations de contact, il y a pour l’instant l’adresse e-mail et le site web mais nous aimerions aussi afficher des liens vers son profil facebook et son profil twitter. Ainsi, nous devons ajouter des champs dans ‘Informations de contact’. Pour se faire, nous devons modifier notre thème et ajouter quelques lignes dans le fichier ‘functions.php’.

Mais avant toute chose, nous allons créer un thème enfant. Pour ça, c’est ici.

Pour ajouter des champs sur un profil, il y a un filtre dans WordPress: ‘user_contactmethods’ et pour l’utiliser il suffit de se rendre dans le codex:

Ainsi, il suffit d’ajouter ces lignes dans le fichier ‘functions.php’ de notre thème enfant.

function modify_user_contact_methods( $user_contact ) {

	// Add user contact methods
	$user_contact['facebook']   = __( 'Compte Facebook'   );
	$user_contact['twitter'] = __( 'Compte Twitter' );

	return $user_contact;
}
add_filter( 'user_contactmethods', 'modify_user_contact_methods' );

Nous déclarons une fonction ‘modify_user_contact_methods’ et dans cette fonction, il suffit d’ajouter la déclaration des deux nouveaux champs dans le array ‘$user_contact’. Au final, on déclare la fonction à travers le filtre ‘user_contactmethods’.

Dorénavant, la partie ‘Information de contact’ se présente ainsi:

wordpress_infos_de_contactEt voici le profil de Laure Ambar une fois complété

wordpress_profile_admin

Affichage par défaut de l’utilisateur

Quand on va sur un article, avec le thème Twenty Twenty (et c’était le cas aussi pour Twenty Nineteen), l’auteur de l’article s’affiche en bas et de cette manière.

profilDonc, nous avons l’avatar, le nom et la description. Et nous avons un lien vers la liste des articles que Laure Ambar a écrit. Nous aimerions afficher d’autres informations: les liens vers le site web, la page facebook et la page twitter. Dans la suite, nous allons ajouter ces différentes informations.

Afficher le template courant

Afficher le modèle courant est une extension très pratique quand on veut modifier des ‘templates’ sur WordPress. En effet, il est parfois difficile de savoir quel ‘template’ affiche telle ou telle page ou partie de page. Cette extension nous indique à chaque fois quel est le ‘template’ principal et les ‘sous-templates’. On gagne beaucoup de temps.

Par exemple si on retourne sur un article de Laure Ambar.

C’est indiqué que le ‘template’ principal est: ‘singular.php’

show_current_templateet encore mieux, quand on passe la souris sur ‘Modèle: singular.php’, une liste déroulante affiche les dépendances du ‘template’ principal: notamment les ‘sous-templates’ ou parties de ‘templates’.

show_current_template_list_templateset celui qui nous intéresse pour aller modifier l’affichage du profil est ‘entry-author-bio.php’ dans le dossier ‘template-parts’.  Les ‘template-parts’ permettent de diviser les templates en petites parties et ainsi éviter d’aller modifier le ‘template’ en entier. Cela fait mieux rangé et on retrouve + facilement la partie qui nous intéresse. Pour afficher une partie de ‘template’, on utilise la fonction ‘get_template_part()’. Cette fonction est décrite ici

get_template_part()

Dans le fichier ‘singular.php’, on retrouve la fonction ici:

get_template_part

Dans les paramètres, on retrouve notamment un chemin vers le dossier ‘template-parts’ et le fichier ‘content.php’.

Et dans ‘content.php’:

template_parton retrouve un appel vers le ‘template’ qui nous intéresse: ‘entry-author-bio.php’.

Modifier le template

Dans ce ‘template’, on trouve les lignes suivantes:

template_author_bio

En premier lieu, on trouve une fonction qui permet d’afficher l’avatar ‘get_avatar()’. En paramètres, on doit obligatoirement indiquer le mail ou l’identifiant du ‘user’ et les autres paramètres sont facultatifs. Dans ce ‘template’, les auteurs du thèmes ont ajouté la largeur de l’image, 160px. Toutes les infos concernant ‘get_avatar()’ sont ici.

Ensuite, on affiche le nom de l’auteur avec ‘get_the_author()’.

Et finalement, on affiche la description avec la fonction ‘the_author_meta(). Cette fonction permet d’afficher les différents champs dans ‘informations de contact’. Tous les champs par défaut sont répertoriés ici.

Et ça tombe bien, nous allons utiliser cette fonction pour afficher les liens qui nous intéressent (site web, facebook et twitter). Pour le visuel de chaque lien, on va utiliser Font Awesome. Cela permet rapidement d’ajouter des pictogrammes dans le html. Un tutoriel qui explique tout à propos de Font Awesome:

Intégrer Font Awesome dans votre site WordPress

Pour modifier le fichier, on crée le même fichier dans notre thème enfant dans un dossier ‘template-parts’:

twentytwenty_wordpress_child

Dans ce fichier, on copie toutes les lignes du fichier original et on va ajouter ces lignes qui nous intéressent:
ajout_affichage_meta_author
Dans un paragraphe, on ajoute les trois liens qui nous intéressent avec l’affichage d’un ‘icon’ de Font Awesome.

Et pour la traduction, utilisons l’extension loco translate

Une fois ces modifications effectuées, l’affichage donne ceci:

author_bio

Un peu de CSS

A partir de là, on peut modifier le CSS à notre convenance. Il suffit de sélectionner la class ‘author-bio’ avec l’inspecteur de firefox ou chrome.

firefox_inspectorEn bas à droite, le CSS assigné à la class ‘author-bio’ est indiqué ainsi que le numéro de la ligne sur le fichier. A cette ligne, dans le fichier ‘style.css’, on trouve ces lignes de code:

author_bio_css

Il suffit de surcharger ce CSS dans le fichier ‘style.css’ de notre thème enfant.

Exemple: si on veut mettre un fond autour de notre profil et ajouter une ombre, on ajoute ces lignes CSS:

.author-bio {
    background-color: #F5F5F5;
    padding: 6rem;
    box-shadow: 5px 5px 5px #888888;
}

.author-bio .avatar {
    position: relative;
}

on ajoute un padding et on indique une position relative à notre avatar (dans Twenty Twenty, il est en position absolute).

Et on obtient ceci:

display_author_bioAfficher une liste des utilisateurs

Maintenant, nous allons voir comment afficher tous les auteurs des articles du blog sur une page.

Création d’une page personnalisée

Pour commencer, nous créons un ‘template’ de page ou page personnalisée. Tout est très bien expliqué dans ce tutoriel:

Comment créer une page personnalisée sous WordPress ?

Encore une fois, on utilise l’extension ‘Montrer le modèle courant’ pour savoir quel ‘template’ affiche les pages pour le thème Twenty Twenty. C’est ‘singular.php’. Donc on copie le contenu de ‘singular.php’ dans un fichier qu’on appelle ‘page-users.php’ qu’on place dans le thème enfant.

Le fichier ‘singular.php’ fait appel au ‘template’ ‘content.php’ dans le dossier ‘template-parts’. On doit changer ça car on veut un contenu spécifique pour cette page. Donc on crée un nouveau ‘template’ dans le dossier ‘template-parts’ du thème enfant qui s’appelle par exemple: users.php. Et on colle le contenu de ‘content.php’

Dans ‘page-users.php’, on place ceci:

get_template_part( 'template-parts/users', get_post_type() );

Il reste à créer une page dans l’administration du site et d’utiliser le ‘template’ qu’on vient de créer.

Cette nouvelle page fait effectivement référence aux bons ‘templates’:

show_current_templateGet Users

Pour afficher la liste des auteurs, nous utilisons une fonction qui s’appelle ‘get_users()’. On trouve toutes les infos ici

Dans les paramètres de la fonction, on peut mettre beaucoup de choses, ce qui permet d’afficher les utilisateurs selon des filtres et des paramètres. Ici, nous voulons uniquement le rôle ‘editor’ donc nous mettons ceci dans les paramètres de la fonction (nous ne voulons pas par exemple, faire apparaître le rôle administrateur):

'role=editor'

La fonction retourne un array. Une boucle foreach est nécessaire pour parcourir tous les résultats (il y a plusieurs ‘users’):

Ainsi pour afficher le nom des utilisateurs, on va placer ça dans ‘users.php’:

get_user_in_templateet en front end, ça donne ça:

display_usersPour compléter, nous allons afficher les mêmes infos vues précédemment dans les articles. Nous allons afficher l’avatar, la biographie et les liens vers le site web, la page facebook et twitter.

get_userspour afficher l’avatar, nous utilisons encore la fonction ‘get_avatar()’. Dans les paramètres, nous indiquons l’identifiant. Pour les autres, ce sont les mêmes paramètres qu’on appelait auparavant avec la fonction ‘the_author_meta()’.

et en front end, nous avons maintenant ceci:

display_all_editorsOn ne va pas faire ça ici, mais vous pouvez complètement changer le style de l’affichage en ajoutant des classes html et ajoutant des lignes dans la feuille de style CSS. A vous de jouer…

En conclusion

A travers ces quelques paragraphes, nous avons vu comment modifier l’affichage des utilisateurs sur les pages de votre blog WordPress. Pour ce travail, nous avons découvert quelques fonctions de WordPress, et à partir de ça, on peut maintenant imaginer une déclinaison des usages presque infinie.

Si des extensions font très bien  ce travail, il est toujours intéressant de plonger un peu dans le codex et de tenter de modifier des ‘templates’ existants. Quand on sait ce qu’on veut faire, il suffit juste d’ajouter quelques lignes de code et nous avons rapidement des résultats convaincants.

A propos de l'auteur...

Cyril BRON

Formateur média-vidéo dans une Haute Ecole à Genève et développeur web indépendant, j'utilise WordPress au quotidien. Je pratique beaucoup la veille technologique; j'aime découvrir, expérimenter et partager. Je me déplace souvent en Europe avec mon ordinateur, j'occupe mon temps entre exploration, prises de vue, traitement d’images et lignes de code...

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !