Depois que algumas pessoas solicitaram suporte ao Gravatar nos comentários do popular tema Choice do WordPress, decidi dar uma olhada com mais atenção. Deparei-me com esta excelente publicação do HackWordPress, que fornece um pequeno trecho de código para adicionar Gravatares ao loop de comentários. Desde então, tenho adicionado suporte ao Gravatar a todos os temas aqui, simplesmente porque é muito simples de fazer. Neste guia, mostrarei exatamente como integro o Gravatars aos temas.
Antes de continuar, entenda que este guia foi escrito somente para o WordPress 2.5 e superior. O código apresentado não funcionará em versões anteriores.
O código do Gravatar
O simples fato de inserir o código a seguir em seu loop de comentários funcionará, mas provavelmente não terá uma aparência muito boa como está.
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>
Basicamente, esse código verificará se você tem o get_avatar (nativo do WordPress 2.5) e, em seguida, exibirá o avatar do comentarista em um quadrado de 50px.
Use uma régua
Se quiser ter certeza de que seus gravatares estão em um tamanho adequado, recomendo a extensão MeasureIt Firefox. Isso o ajudará a medir uma área em seu tema para determinar um bom tamanho para os Gravatars.
Onde colocar o código?
No tema Choice, descobri que 40 era um bom tamanho. Então, onde coloquei esse código exatamente?
Qualquer lugar dentro do foreach e endforeach (o loop de comentários) funcionará.
Como estilizar seus gravatares
Depois que os Gravatares forem exibidos no modelo de comentários, você provavelmente desejará estilizá-los também. Você notará que o código do Gravatar exibe a classe “avatar” em cada imagem. Vamos adicionar uma linha à folha de estilo CSS para que ela flutue à esquerda e adicione uma pequena margem direita.
img.avatar {float:left; margin-right:5px;}
Pronto, você tem gravatares bonitos, de tamanho perfeito e estilizados. É claro que os temas serão diferentes, você pode estilizá-los como quiser.
Conclusão
Lembre-se de que esse código só funcionará no WordPress 2.5 e superior. A tag condicional function_exists fará com que seu tema não seja interrompido, mas nada aparecerá nas versões anteriores. Mais informações sobre outros métodos de uso do Gravatars estão detalhadas no WordPress Codex.
Se você acabou de ler todo este artigo e não tem a menor ideia do que é um Gravatar, sugiro que leia primeiro este artigo de Lorelle no WordPress. Ele aborda os conceitos básicos de como obter seu próprio Gravatar inscrevendo-se no Gravatar.com e também como usar Gravatars em versões mais antigas do WordPress com plug-ins.
Os Gravatares podem ser usados não apenas para comentários, mas também podem ser adicionados às postagens individuais do autor.
Se você gostou do artigo, fique à vontade para comentar e compartilhar. Gostaria de ouvir sua opinião. Assine o feed para receber as últimas atualizações do Theme Lab.
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.
[…] Reference : http://themelab.com […]
Thanks…I’ll implement it in my BLOG
thank you
thanks a lot
[…] 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 […]
Just what I was looking for 🙂 Great explanation with “Where to put the code” and “Styling your Gravatars” – Thanks
[…] is also a plugin for this, although I like to edit the code myself. Here are some advice on that, just add some […]
Thanks for the tips. The Gravatar site didn’t explain it clearly enough, but your screenshot made it clear. Cheers.
Sweet! I’ve been hacking away at a theme for a long time and this was the finishing touch. Thank you so much!
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.
@testercraft: I found this plugin that may be what you’re looking for: Gravatar Recent Comment
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?
[…] Silahkan dibaca-baca situs ini jika mengalami masalah yang sama dengan gue. “Add Gravatar to WordPress Comment” […]
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.
hmm… finally I know what “The WordPress” loop is! I’ve searched for theloop.php <- LOL
thank you 🙂
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…
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
@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.
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!