Ajouter l'avatar de l'auteur dans les métas des articles de Divi - Divi Community

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é :

avatar auteur blog divi

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 :

echo '<p class="gravatar">' . get_avatar( get_the_author_meta('ID'), 30);

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 :

insertion code single php

Voyez ou j’ai copié mon bout de code. Pensez à enregistrer vos modifications.

À ce stade, les métas de vos articles devraient ressembler à ça :

avatar sans css div

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 :

/*Avatar auteur sur les articles*/

/*On force l'image à flotter sur la gauche, en la décalant de 10px du texte*/
p.gravatar {
float: left;
margin-right: 10px;
}

/*On arrondie les angles de l'image*/
.gravatar img {
border-radius: 50%;
}

Et voila, maintenant votre avatar devrait se trouver sur la gauche aligné avec le reste des métas comme ceci :

avatar auteur blog divi

Si vous voulez conserver une image carrée, ne copiez pas la dernière propriété CSS.

À vous de jouer !