X

Ajouter le support Gravatar à vos commentaires WordPress

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 ?

Choice Gravatar Location

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.

Commentaires   laisser une réponse

  1. 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!

  2. Craisin.com | Craisin.com Revamp - Spring 2009! avril 5, 2009 à 12:19 am

    […] Theme Lab – Add Gravatar Support to Your WordPress Comments — to add more imagery to the comments section […]

  3. great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.

  4. 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 🙂

  5. 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.

  6. Add Gravatar Support to Wordpress Comments | just another damn notes mars 11, 2009 à 10:54 pm

    […] Reference : http://themelab.com […]

  7. Thanks…I’ll implement it in my BLOG

  8. thank you

  9. thanks a lot

  10. DivageekDesigns.com - 15 WordPress Themes made just for you! janvier 25, 2009 à 1:07 pm

    […] of blogs. If you like Gravatars, then you’ll like this theme a lot. Not only does this theme have Gravatar-enabled comments, but also Gravatar display for the post author. This theme is also 125×125 ad ready, so feel free […]

  11. Henning Nielsen janvier 23, 2009 à 3:54 am

    Just what I was looking for 🙂 Great explanation with “Where to put the code” and “Styling your Gravatars” – Thanks

  12. Hacks to boost your WordPress 2.7 blog janvier 11, 2009 à 12:20 pm

    […] is also a plugin for this, although I like to edit the code myself. Here are some advice on that, just add some […]

  13. Thanks for the tips. The Gravatar site didn’t explain it clearly enough, but your screenshot made it clear. Cheers.

  14. Sweet! I’ve been hacking away at a theme for a long time and this was the finishing touch. Thank you so much!

  15. That was super helpful, bro. I’ve spent the last two days trying to figure this out. WordPress couldn’t answer my question; neither could Gravatar. But you did. Thank you.

  16. @testercraft: I found this plugin that may be what you’re looking for: Gravatar Recent Comment

  17. i have installer the gravatar and it is functioning well on my comment page..but how do i show the avatar on my recent comments on the sidebar?

  18. Blognya AUDI » Masang Avatar octobre 6, 2008 à 12:38 pm

    […] Silahkan dibaca-baca situs ini jika mengalami masalah yang sama dengan gue. “Add Gravatar to WordPress Comment” […]

  19. Thank for the help. I made some changes to my site the other day, and noticed…where the heck are my gravatars? Had to figure out how to put back on. The best help was including the css info.

  20. hmm… finally I know what “The WordPress” loop is! I’ve searched for theloop.php <- LOL

  21. thank you 🙂

  22. Blogger Indonesia A. Fatih Syuhud Weblog août 7, 2008 à 4:15 am

    WordPress 2.6 Gravatar in Brian Threaded Comment…

    It’s been quite a while that I wanted to have gravatars appeared in this blog’s Brian Threaded comments without using any plugins. Just a simple code. It should be possible considering WordPress 2.5+ and 2.6 are gravatars built-in.  It t…

  23. Hi,

    I have added gravatar to my comment list from ur great trick, Really its very simple. The same code is given http://hackwordpress.com/wordpress-25-how-to-add-gravatar-to-your-wordpress-theme/ here also but its difficult caz i d’t know where to post the code, BUT YOUR POST TELL EVERTHING CLEARLY.

    But still i am facing a problem. I also wantto display gravatar in the sidebar “Recent Comments” section, so please tell me to do so, which file i need to edit. I am using wordpress 2.6

    Thanks,
    Prashant

  24. @Spencer: You know…that’s actually been bothering me for the longest time and I had no idea what the problem was. I just added the background CSS to the .post class and .head class. Thanks for the tip.

    @eTomyam: Hmm…is this a Gravatar issue or a styling issue?

    Thanks for the comments everyone, glad you all liked the tutorial.

  25. This might be kind of anal, but those who are copying and pasting code that you have posted, could you add the background:#fff; to your div.post within your css? If you try highlighting the code the way that it is now, it’s hard to tell what you’re highlighting because you haven’t declared a background on it. Anyways, it might make things easier for your users…

    Thanks!

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre privacy policy, et que tous les liens sont en nofollow. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.

WordPress Launch Checklist

L'ultime liste de contrôle pour le lancement de WordPress

Nous avons rassemblé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi le gratuit !