(modifié le 22 juillet 2008 à 18:59)

But : incorporer les gravatars aux commentaires laissés sur votre blog WordPress

Un "gravatar" c'est quoi ?

Vient de l'anglais Globally Recognized avatar (comprendre : avatar qui vous suit partout sur le web). C'est donc un avatar attaché à votre ou vos adresse(s) email(s). Comme ça peut paraître très "définition de dictionnaire", voici donc un exemple d'utilisation : vous postez un commentaire sur le blog de Mr Xhark avec votre pseudo, email et éventuellement site perso. Lorsque votre commentaire sera en ligne le blog ira automatiquement cherché votre Gravatar pour l'afficher 🙂

Comment cela fonctionne-t-il ?

Pour rattacher un avatar à votre adresse email il faut ouvrir un compte sur Gravatar.com : il vous suffit de préciser votre email et c'est terminé 🙂 Suivez l'assistant ensuite pour ajouter votre Gravatar dans votre compte.

Passons à l'intégration des Gravatars sur votre blog propulsé par WordPress 😉

Sachez qu'Automattic, la société qui gère WordPress.com a racheté la societé "Gravatar" qui éditait ces fameux avatars en octobre 2007. Ce qui fait aujourd'hui que le code source de WordPress intègre nativement une fonction permettant d'afficher les gravatars. Inutile d'ajouter donc le plugin WP-Gravatar qui surchargerai votre blog pour rien.

Par contre aucun des thèmes fournis avec WordPress ne les comporte, c'est pour cela que je vous propose de l'intégrer à votre code source très facilement. Je vais vous montrer comment l'intégrer au thème GlossyBlue (celui que j'utilise) :

Editer le fichier comments.php de votre blog (/wp-content/theme/votre_theme/comments.php) puis rechercher la ligne suivante (l. 34 environ) :

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Puis ajouter juste après cette ligne le code suivant :

<?php
# Gravatar by Xhark.fr.nf
echo get_avatar($comment, $size = '64'); ?>

Nous souhaitons afficher le Gravatar à droite du commentaire (proprieté CSS float:right). Dans le code que je vous ai précédemment fait recherché il y avait juste une balise comme cela :

<ol class="commentlist">

Important : notez le nom de la classe CSS utilisée dans un coin (commentlist dans mon cas).

Modifions maintenant le fichier style.css (situé dans le même répertoire que comments.php) pour y ajouter à la fin (ou ailleurs si vous préferez classer vos classes 🙂 ) :

/* modif by Xhark.fr.nf pour gravatar */
.commentlist li .avatar {
float: right;
}
/* fin de modif gravatar by Xhark.fr.nf */

La classe écrite en rouge est à remplacée par celle que je vous ai fait noté y'a 20 secondes si elle diffère de celle utilisée dans mon exemple.

Pensez à bien valider les modifications sur vos fichiers et faîtes un vidage du cache de votre navigateur (CTRL+F5 permet de vider le cache concernant la page active uniquement).

Voici le résultat en image (cliquez sur l'image pour le voir réellement) :

Documentation Codex sur les Gravatars