X

Añade soporte Gravatar a tus comentarios de WordPress

Después de que varias personas solicitaran soporte para Gravatar en los comentarios del popular tema Choice de WordPress, decidí investigarlo más detenidamente. Me encontré con este gran post de HackWordPress que le da un pequeño fragmento de código para añadir Gravatars a su bucle de comentarios. Desde entonces, he estado añadiendo soporte Gravatar a todos los temas aquí, sólo porque es tan fácil de hacer. En esta guía te voy a mostrar cómo exactamente integrar Gravatars en temas.

Antes de continuar, por favor entienda que esta guía está escrita sólo para WordPress 2.5 y superiores. El código no funcionará en versiones anteriores.

El código de Gravatar

Simplemente poniendo el siguiente código en tu bucle de comentarios funcionará, pero probablemente no se verá muy bien tal cual.
<?php if(function_exists('get_avatar')) { echo get_avatar($comentario, '50'); } ?>

Básicamente este código comprobará si tienes el get_avatar (nativo de WordPress 2.5), y luego mostrará el avatar del comentarista en un cuadrado de 50px.

Usar una regla

Si quieres asegurarte de que tus Gravatars tienen un tamaño adecuado, te recomiendo la extensión de Firefox MeasureIt. Esto le ayudará a medir un área en su tema para determinar un buen tamaño para Gravatars.

¿Dónde colocar el código?

En el tema Choice, encontré que 40 era un buen tamaño. Entonces, ¿dónde puse este código exactamente?

Choice Gravatar Location

En cualquier lugar dentro del foreach y endforeach (el bucle de comentarios) funcionará.

Estilizar sus Gravatars

Una vez que tengas los Gravatars mostrados en tu plantilla de comentarios, probablemente querrás darles estilo también. Notarás que el código de Gravatar escupe la clase “avatar” en cada imagen. Vamos a añadir una línea a la hoja de estilos CSS para flotar esto a la izquierda, y añadir un pequeño margen derecho.

img.avatar {float:left; margin-right:5px;}

Ahí lo tienes, tienes Gravatars de aspecto agradable, perfectamente dimensionados y con estilo. Por supuesto, los temas serán diferentes, puede darles el estilo que desee.

Conclusión

Recuerde, este código sólo funcionará en WordPress 2.5 y superior. La etiqueta condicional function_exists hará que tu tema no se rompa, pero no aparecerá nada en versiones anteriores. Encontrará más información sobre otros métodos para usar Gravatars en el Codex de WordPress.

Si acabas de leer todo este artículo y no tienes ni idea de lo que es un Gravatar, te sugiero que leas primero este otro de Lorelle en WordPress. Repasa los conceptos básicos de cómo obtener tu propio Gravatar registrándote en Gravatar.com, así como el uso de Gravatars en versiones anteriores de WordPress con plugins.

Los Gravatars no sólo se pueden utilizar para los comentarios, sino que también se pueden añadir a las entradas individuales del autor.

Si te ha gustado el artículo, no dudes en comentarlo y compartirlo. Me gustaría conocer tu opinión. Suscríbete al feed para recibir las últimas actualizaciones de Theme Lab.

Comentarios   Deja una respuesta

  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! abril 5, 2009 en 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 marzo 11, 2009 en 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! enero 25, 2009 en 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 enero 23, 2009 en 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 enero 11, 2009 en 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. Raymond Burton enero 5, 2009 en 6:23 pm

    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 octubre 6, 2008 en 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 agosto 7, 2008 en 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!

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Tenga en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad , y que todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

WordPress Launch Checklist

La lista definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de comprobación para el lanzamiento de su próximo sitio web de WordPress en un práctico ebook.
Sí, envíeme el ¡gratuito!