Depois que algumas pessoas diferentes solicitaram suporte a Gravatar nos comentários para o popular tema Choice do WordPress, decidi investigar mais a fundo. Encontrei este ótimo post do HackWordPress que fornece um pequeno trecho de código para adicionar Gravatars ao seu loop de comentários. Desde então, tenho adicionado suporte a Gravatar a todos os temas aqui, apenas porque é muito simples de fazer. Neste guia, mostrarei como exatamente eu integro Gravatars aos temas.
Antes de continuar, por favor, entenda que este guia foi escrito apenas para WordPress 2.5 e superior. O código abordado não funcionará em versões anteriores.
O Código Gravatar
Apenas inserir o seguinte código no seu loop de comentários funcionará, mas provavelmente não ficará muito bom como está.
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>
Basicamente, este código verificará se você tem a função get_avatar (nativa do WordPress 2.5) e, em seguida, exibirá o avatar do comentarista em um quadrado de 50px.
Use uma Régua
Se você quiser ter certeza de que seus Gravatars terão um tamanho adequado, recomendo a extensão do Firefox MeasureIt. 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 exatamente eu coloquei este código?
Qualquer lugar dentro do foreach e endforeach (o loop de comentários) funcionará.
Estilizando seus Gravatars
Assim que você tiver os Gravatars exibidos no seu template de comentários, provavelmente você vai querer estilizar eles também. Você notará que o código do Gravatar gera a classe “avatar” em cada imagem. Vamos adicionar uma linha à folha de estilos CSS para flutuar isso para a esquerda e adicionar uma pequena margem à direita.
img.avatar {float:left; margin-right:5px;}
Pronto, você tem Gravatars com boa aparência, tamanho perfeito e estilizados. Claro que os temas variam, você pode estilizar como quiser.
Conclusão
Lembre-se, este código só funcionará no WordPress 2.5 e superior. A tag condicional function_exists fará com que seu tema não quebre, mas nada aparecerá nas versões anteriores. Mais informações sobre outros métodos de uso de Gravatars estão detalhadas no WordPress Codex.
Se você acabou de ler este artigo inteiro e não tem ideia do que é um Gravatar, sugiro que leia este primeiro de Lorelle no WordPress. Ele aborda os conceitos básicos de como obter seu próprio Gravatar se inscrevendo no Gravatar.com, bem como usando Gravatars em versões mais antigas do WordPress com plugins.
Gravatars não podem ser usados apenas para comentários, mas também podem ser adicionados às postagens individuais dos autores.
Se você gostou do artigo, sinta-se à vontade para comentar e compartilhar. Gostaria de saber suas opiniões. Assine o feed para as últimas atualizações do Theme Lab.
Muito obrigado por este post. Depois de ler isto, levei cerca de 4 minutos para seguir suas instruções e fazê-las funcionar no meu site.
Você arrasa!
[…] Theme Lab – Adicionar suporte a Gravatar aos seus comentários do WordPress — para adicionar mais imagens à seção de comentários […]
ótimo!! ainda bem que encontrei isso. agora para encontrar uma maneira de redefinir meus comentários para que todos tenham gravatares ao lado deles.
Fico muito feliz por ter encontrado seu site. Ótimas informações sobre como adicionar um Gravatar ao site de alguém. Perdi horas tentando mexer com um plugin e levei apenas segundos seguindo seus exemplos para obter o que eu queria para o site.
Muito obrigado! Eu só queria ter pesquisado você mais cedo 🙂
O código funciona para colocar os avatares nos comentários. Estou tendo problemas com o alinhamento no IE7.
No IE7, o primeiro avatar se alinha corretamente, então os avatares em comentários subsequentes são recuados para a direita em alguns pixels.
[…] Referência: http://themelab.com […]
Obrigado… vou implementar no meu BLOG
obrigado
muito obrigado
[…] de blogs. Se você gosta de Gravatars, então vai gostar muito deste tema. Este tema não só tem comentários habilitados para Gravatar, mas também exibição de Gravatar para o autor da postagem. Este tema também está pronto para anúncios de 125×125, então sinta-se à vontade […]
Era exatamente o que eu estava procurando 🙂 Ótima explicação com "Onde colocar o código" e "Estilizando seus Gravatars" – Obrigado
[…] também existe um plugin para isso, embora eu prefira editar o código eu mesmo. Aqui estão alguns conselhos sobre isso, basta adicionar alguns […]
Obrigado pelas dicas. O site do Gravatar não explicou com clareza suficiente, mas sua captura de tela deixou claro. Valeu.
Incrível! Tenho trabalhado em um tema por muito tempo e este foi o toque final. Muito obrigado!
Isso foi super útil, mano. Passei os últimos dois dias tentando descobrir isso. O WordPress não conseguiu responder minha pergunta; nem o Gravatar. Mas você conseguiu. Obrigado.
@testercraft: Encontrei este plugin que pode ser o que você procura: Gravatar Recent Comment
eu instalei o gravatar e ele está funcionando bem na minha página de comentários..mas como faço para mostrar o avatar nos meus comentários recentes na barra lateral?
[…] Por favor, leia este site se você estiver com o mesmo problema que eu. “Add Gravatar to Wordpress Comment” […]
Obrigado pela ajuda. Fiz algumas alterações no meu site outro dia e notei… onde diabos estão meus gravatares? Tive que descobrir como colocá-los de volta. A melhor ajuda foi incluir as informações de CSS.
hmm… finalmente sei o que é o loop do “WordPress”! Eu procurei por theloop.php <- LOL
obrigado 🙂
Gravatar do WordPress 2.6 em Comentários Encadeados do Brian...
Já faz um tempo que eu queria que os gravatares aparecessem nos comentários encadeados do Brian deste blog sem usar nenhum plugin. Apenas um código simples. Deve ser possível considerando que o WordPress 2.5+ e 2.6 têm gravatares integrados. Isso t...
Olá,
Adicionei o gravatar à minha lista de comentários com sua ótima dica, realmente é muito simples. O mesmo código é dado http://hackwordpress.com/wordpress-25-how-to-add-gravatar-to-your-wordpress-theme/ aqui também, mas é difícil porque eu não sei onde postar o código, MAS SEU POST EXPLICA TUDO CLARAMENTE.
Mas ainda estou enfrentando um problema. Eu também quero exibir o gravatar na seção “Comentários Recentes” da barra lateral, então por favor me diga como fazer isso, qual arquivo preciso editar. Estou usando o wordpress 2.6
Obrigado,
Prashant
@Spencer: Sabe… isso tem me incomodado por muito tempo e eu não tinha ideia de qual era o problema. Acabei de adicionar o CSS de fundo às classes .post e .head. Obrigado pela dica.
@eTomyam: Hmm… isso é um problema de Gravatar ou um problema de estilo?
Obrigado pelos comentários a todos, fico feliz que tenham gostado do tutorial.
Isso pode parecer meio chato, mas aqueles que estão copiando e colando o código que você postou, poderiam adicionar o background:#fff; ao seu div.post dentro do seu css? Se você tentar destacar o código do jeito que está agora, é difícil dizer o que você está destacando porque você não definiu um fundo para ele. De qualquer forma, isso pode facilitar as coisas para seus usuários...
Obrigado!