Ajouter une photo de l’auteur d’un article peut aider à personnaliser un peu plus votre site et permettre à vos visiteurs de mettre un visage sur un nom.
Regardez par exemple ce que ça peut donner sur un article que j’ai déjà rédigé :
Plutôt sympa non ?
Et bien rassurez-vous, c’est super simple !
La première chose à faire est de copier le fichier single.php que vous trouverez dans le dossier du thème Divi et de le coller dans le dossier de votre thème enfant (si vous n’en avez pas, vous pouvez télécharger le nôtre).
Vous allez maintenant copier/coller le code PHP suivant :
Quelques explications sur le code :
- echo sert à afficher quelque chose en PHP. En l’occurence, il s’agit de notre avatar.
- on ajoute ensuite une balise HTML de paragraphe avec une classe CSS pour pouvoir personnaliser un peu notre image. Je vous en reparle un peu plus loin.
- la fonction PHP get_avatar permet de récupérer l’avatar d’un utilisateur de WordPress.
- On récupère ensuite l’identifiant (ID) de l’utilisateur grâce à la fonction get_the_author_meta
Vous allez donc ouvrir votre fichier single.php contenu dans le thème enfant et copier/coller ce code juste avant la ligne et_divi_post_meta(); aux alentours de la ligne 41-42 :
Voyez ou j’ai copié mon bout de code. Pensez à enregistrer vos modifications.
À ce stade, les métas de vos articles devraient ressembler à ça :
On est d’accord, c’est pas tout à fait le résultat escompté et ça n’est pas encore très propre.
On va donc maintenant ajouter un peu de CSS.
Copiez/collez le code suivant dans Apparence->Personnaliser->CSS additionnel ou dans le fichier style.css de votre thème enfant :
Et voila, maintenant votre avatar devrait se trouver sur la gauche aligné avec le reste des métas comme ceci :
Si vous voulez conserver une image carrée, ne copiez pas la dernière propriété CSS.
À vous de jouer !
Bonjour,
J’ai fait comme indiqué dans le tuto mais ça ne fonctionne pas.
Mes pages articles sont toutes construites avec le divi builder. Le premier module correspond à TITRE DU POSTE.
Merci d’avance pour votre réponse,
Lilian
Salut, dans ce cas il faut modifier le fichier single-et_pb_layout.php à la place de single.php
Merci pour ta réponse. Je vais essayer.
Vos articles ne sont donc pas construit avec le divi builder ?
Non, ils sont fait à mains nues 😉
Où dois-je ajouter le code php dans single-et_pb_layout.php ?
Tu as quasiment le même code, c’est juste le contenu de l’article qui change. Cherche la même ligne que dans single.php.
Pas tout à fait, le code est très court.
Bonjour Julien,
Lorsque l’on construit ses pages de blog avec le builder et que l’on utilise le module Titre du poste, où doit-on ajouter ce code dans le fichier single-et_pb_layout.php ?
Merci pour ta réponse,