Après que plusieurs personnes aient demandé la prise en charge de Gravatar dans les commentaires du thème populaire Choice de WordPress, j’ai décidé de me pencher plus attentivement sur la question. Je suis tombé sur cet excellent article de HackWordPress qui vous donne un petit extrait de code pour ajouter les Gravatars à votre boucle de commentaires. Depuis, j’ai ajouté la prise en charge de Gravatar à tous les thèmes ici, simplement parce que c’est si simple à faire. Dans ce guide, je vais vous montrer comment j’intègre les Gravatars dans les thèmes.
Avant de continuer, veuillez comprendre que ce guide est écrit pour WordPress 2.5 et plus. Le code présenté ne fonctionnera pas dans les versions précédentes.
Le code Gravatar
Il suffit d’insérer le code suivant dans votre boucle de commentaires pour qu’il fonctionne, mais il ne sera probablement pas très beau tel quel.
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50') ; } ?>
En gros, ce code va vérifier si vous avez la fonction get_avatar (native à WordPress 2.5), puis afficher l’avatar du commentateur dans un carré de 50px.
Utiliser une règle
Si vous voulez vous assurer que vos Gravatars ont une taille appropriée, je vous recommande l’extension Firefox MeasureIt. Elle vous aidera à mesurer une zone de votre thème pour déterminer la bonne taille des Gravatars.
Où placer le code ?
Dans le thème Choice, j’ai trouvé que 40 était une bonne taille. Où ai-je donc placé ce code exactement ?
N’importe où dans les boucles foreach et endforeach (la boucle de commentaires), cela fonctionnera.
Styliser vos Gravatars
Une fois les Gravatars affichés dans votre modèle de commentaires, vous voudrez probablement les styliser également. Vous remarquerez que le code Gravatar crache la classe “avatar” sur chaque image. Ajoutons une ligne à la feuille de style CSS pour faire flotter cette classe à gauche et ajouter une petite marge à droite.
img.avatar {float:left ; margin-right:5px;}
Et voilà, vous avez de jolies Gravatars, parfaitement dimensionnées et stylisées. Bien sûr, les thèmes diffèrent, vous pouvez les styliser comme vous le souhaitez.
Conclusion
Rappelez-vous que ce code ne fonctionne que sur WordPress 2.5 et plus. La balise conditionnelle function_exists fera en sorte que votre thème ne se brise pas, mais rien ne s’affichera dans les versions antérieures. Plus d’informations sur d’autres méthodes d’utilisation des Gravatars sont détaillées sur le Codex de WordPress.
Si vous venez de lire cet article et que vous n’avez aucune idée de ce qu’est un Gravatar, je vous suggère de lire d’abord cet article de Lorelle sur WordPress. Il explique comment obtenir votre propre Gravatar en vous inscrivant sur Gravatar.com et comment utiliser les Gravatars sur les anciennes versions de WordPress avec des plugins.
Non seulement les Gravatars peuvent être utilisés pour les commentaires, mais ils peuvent également être ajoutés aux articles individuels des auteurs.
Si vous avez apprécié cet article, n’hésitez pas à le commenter et à le partager. J’aimerais connaître votre avis. Abonnez-vous au flux pour les dernières mises à jour de Theme Lab.
Thaaaaaaaaaaaaaank you!!!! 🙂
Wow! That helps. I been fooling around with my non premium theme for hours trying to figure that out. WordPress Codex support doesn’t help much. They don’t explain exactly where to put the code. What a relief that I found this site. Been coding since 2008 and still run into problems.
Thanks, I am having some real issues getting this to work on my blog, but hopefully this will help. I am using a theme that runs on Thematic so I can find the “foreach” you mentioned but not the “endforeach” and when I added the code it didn’t work for me. I guess I will keep at!
Thanks for this great how-to mate! Works just fine! Whoop whoop!
It worked like a charm! Thank you soooo much Leland for your post! Your Blog is truly a blessing to all who have WordPress! 🙂
Thank you so much – worked like a charm!
Your theme should contain avatar, as it’s quite standard in wordpress. If it doesn’t it’s a craooy theme, and you would be better off finding another theme. 😉
My theme doesn’t contain this loop inside comments.php, any ideas?
Oh my god, at last a code, that worked… I couldn’t get the system to load the avatars, that were attached to the author emails… you’rs worked!!
Many many thanks.
Thanks, I’ve just set it up on my blog, too.
Thanks a lot! This was easy 🙂
nice i done with the comments
but i want to add more info with each post about the author
his name
his avatar
and bio
my blog here http://www.eskandarany.org/blog
how and what the CSS code to style all this new stuff
thanks in advance 🙂
Hi there,
Useful information, I’ve now successfully integrated Gravatar into my site.
Cheers,
Eddie Gear
[…] Learn more: Using Gravatars Add Gravatar Support to Your WordPress Comments […]
[…] Add Gravatar Support to Your WordPress Comments […]
[…] add Gravatars to your WordPress blog, download the plugin and follow these instructions. Simple! var addthis_pub = ‘RichmondWiki’; var addthis_brand = ‘Your Search Advisor’;var […]
@Alejandro: Check out this link: http://themeshaper.com/how-to-add-gravatars-for-the-post-author-in-wordpress/
Hi man, the post is awesome. But my problem is to asociate the gravatar image to an author image in my index.php WordPress blog. I don’t know the correct sintaxis to do this. Have you any sugerence? Thanks a lot!!!
Really effective, I was looking for this. Thanks.
[…] by myself. This theme has all the normal features of a blog theme here at Theme Lab, including Gravatar support for comments, a widget-ready sidebar, and native WordPress tag support. This theme also 125×125 ad […]
Thanks so much for this post. After reading this, it took me about 4 minutes to follow your instructions and get them working on my site.
You rock!
[…] Theme Lab – Add Gravatar Support to Your WordPress Comments — to add more imagery to the comments section […]
great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.
I am so glad I found your site. Great information on how to get to add a Gravatar to ones site. I wasted hours trying to play with a plugin and it took me just seconds following your examples to get what I wanted for the site.
Thank you so much! I only wished I had googled you earlier 🙂
The code works to get the avatars in the comments. I’m having trouble with alignment in IE7.
In IE7, the first avatar aligns correctly, then avatars in subsequent comments are indented to the right by a couple of pixels.