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 WordPress 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.
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. Notez également le plugin Twentig qui customise le thème 2020.
Il suffit de télécharger le fichier zip ici:
et pour installer le thème, je vous laisse voir sur ce tutoriel:
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.
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:
Et voici le profil de Laure Ambar une fois complété
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.
Donc, 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’
et 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’.
et 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
Dans le fichier ‘singular.php’, on retrouve la fonction ici:
Dans les paramètres, on retrouve notamment un chemin vers le dossier ‘template-parts’ et le fichier ‘content.php’.
Et dans ‘content.php’:
on 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:
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:
Pour modifier le fichier, on crée le même fichier dans notre thème enfant dans un dossier ‘template-parts’:
Dans ce fichier, on copie toutes les lignes du fichier original et on va ajouter ces lignes qui nous intéressent:
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:
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.
En 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:
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:
Afficher 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:
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’:
Get 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’:
et en front end, ça donne ça:
Pour 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.
pour 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:
On 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.
