X

Agrega Soporte para Gravatar a tus Comentarios de WordPress

Despu ilde{s} de que varias personas solicitaran compatibilidad con Gravatar en los comentarios para el popular tema de WordPress Choice, decid ilde{i} investigar m ilde{a}s a fondo. Me encontr ilde{e} con esta excelente publicaci ilde{o}n de HackWordPress que te proporciona un peque ilde{n}o fragmento de c ilde{o}digo para a ilde{n}adir Gravatars a tu bucle de comentarios. Desde entonces, he estado a ilde{n}adiendo compatibilidad con Gravatar a todos los temas de aqu ilde{i}, simplemente porque es muy f ilde{a}cil de hacer. En esta gu ilde{i}a te mostrar ilde{e} c ilde{o}mo integro *exactamente* los Gravatars en los temas.

Antes de continuar, por favor entiende que esta guía está escrita solo para WordPress 2.5 y superior. El código que se revisará no funcionará en versiones anteriores.

El Código Gravatar

Simplemente insertar 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($comment, '50'); } ?>

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

Usa una Regla

Si quieres asegurarte de que tus Gravatars tengan un tama ilde{n}o adecuado, te recomiendo la extensi ilde{o}n de Firefox MeasureIt. Esto te ayudar ilde{a} a medir un ilde{a}rea en tu tema para determinar un buen tama ilde{n}o para los Gravatars.

¿Dónde poner el código?

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

Ubicación de Gravatar en Choice

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

Estilizando tus Gravatars

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

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

¡Listo! Tienes Gravatars con buen aspecto y tamaño perfecto. Por supuesto, los temas variarán, puedes estilarlos como prefieras.

Conclusión

Recuerda que este c ilde{o}digo solo funcionar ilde{a} en WordPress 2.5 y versiones posteriores. La etiqueta condicional function_exists har ilde{a} que tu tema no se rompa, pero no aparecer ilde{a} nada en versiones anteriores. Hay m ilde{a}s informaci ilde{o}n sobre otros m ilde{e}todos para usar Gravatars en el Codex de WordPress.

Si acabas de leer todo este art ilde{i}culo y no tienes ni idea de qu ilde{e} es un Gravatar, te sugiero que leas este primero de Lorelle en WordPress. Explica los conceptos b ilde{a}sicos de c ilde{o}mo obtener tu propio Gravatar registrándote en Gravatar.com, as ilde{i} como el uso de Gravatars en versiones anteriores de WordPress con plugins.

Los Gravatars no solo se pueden usar para comentarios, sino que tambi ilde{e}n se pueden a ilde{n}adir a las publicaciones individuales de los autores.

Si te gust ilde{o} el art ilde{i}culo, no dudes en comentar y compartir. Me gustar ilde{i}a saber tu opini ilde{o}n. Suscr ilde{i}bete a la fuente para recibir las ilde{u}ltimas actualizaciones de Theme Lab.

Comentarios   Deja una respuesta

  1. Muchas gracias por esta publicación. Después de leer esto, me tomó unos 4 minutos seguir sus instrucciones y hacer que funcionaran en mi sitio.

    ¡Eres genial!

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

    […] Theme Lab – Agrega soporte de Gravatar a tus comentarios de WordPress — para agregar más imágenes a la sección de comentarios […]

  3. ¡¡genial!! me alegra haber encontrado esto. ahora a encontrar una manera de restablecer mis comentarios para que todos tengan gravatares al lado.

  4. Estoy muy contenta de haber encontrado tu sitio. Gran información sobre cómo agregar un Gravatar al sitio de uno. Perdí horas tratando de jugar con un plugin y me tomó solo segundos siguiendo tus ejemplos para obtener lo que quería para el sitio.

    ¡¡Muchas gracias! Ojalá te hubiera buscado en Google antes 🙂

  5. El código funciona para obtener los avatares en los comentarios. Tengo problemas con la alineación en IE7.

    En IE7, el primer avatar se alinea correctamente, luego los avatares en los comentarios subsiguientes se desplazan hacia la derecha unos pocos píxeles.

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

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

  7. Gracias… lo implementaré en mi BLOG

  8. gracias

  9. muchas gracias

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

    […] de blogs. Si te gustan los Gravatars, entonces te gustará mucho este tema. Este tema no solo tiene comentarios habilitados para Gravatar, sino también la visualización de Gravatar para el autor de la publicación. Este tema también está listo para anuncios de 125×125, así que siéntete libre […]

  11. Henning Nielsen January 23, 2009 at 3:54 am

    Justo lo que estaba buscando 🙂 Gran explicación con "Dónde poner el código" y "Estilizando tus Gravatars" – Gracias

  12. Hacks to boost your WordPress 2.7 blog January 11, 2009 at 12:20 pm

    […] también hay un plugin para esto, aunque me gusta editar el código yo mismo. Aquí hay algunos consejos al respecto, solo agrega algunos […]

  13. Gracias por los consejos. El sitio de Gravatar no lo explicó con suficiente claridad, pero tu captura de pantalla lo dejó claro. Saludos.

  14. ¡Genial! He estado modificando un tema durante mucho tiempo y este fue el toque final. ¡Muchas gracias!

  15. Eso fue súper útil, hermano. He pasado los últimos dos días tratando de resolver esto. WordPress no pudo responder mi pregunta; tampoco Gravatar. Pero tú sí. Gracias.

  16. @testercraft: Encontré este plugin que podría ser lo que buscas: Gravatar Recent Comment

  17. He instalado el gravatar y está funcionando bien en mi página de comentarios... pero ¿cómo muestro el avatar en mis comentarios recientes en la barra lateral?

  18. Blognya AUDI » Masang Avatar October 6, 2008 at 12:38 pm

    […] Por favor, lee este sitio si tienes el mismo problema que yo. “Add Gravatar to Wordpress Comment” […]

  19. Gracias por la ayuda. Hice algunos cambios en mi sitio el otro día y noté... ¿dónde diablos están mis gravatares? Tuve que averiguar cómo volver a ponerlos. La mejor ayuda fue incluir la información CSS.

  20. hmm... ¡finalmente sé qué es el loop de "The WordPress"! Busqué theloop.php <- LOL

  21. gracias 🙂

  22. Blogger Indonesia A. Fatih Syuhud Weblog August 7, 2008 at 4:15 am

    Wordpress 2.6 Gravatar en Brian Threaded Comment...

    Ha pasado bastante tiempo desde que quise que los gravatares aparecieran en los comentarios de Brian Threaded de este blog sin usar ningún plugin. Solo un código simple. Debería ser posible considerando que Wordpress 2.5+ y 2.6 tienen gravatares incorporados.  Es t...

  23. Hola,

    He agregado gravatar a mi lista de comentarios gracias a tu gran truco, realmente es muy simple. El mismo código se da http://hackwordpress.com/wordpress-25-how-to-add-gravatar-to-your-wordpress-theme/ aquí también, pero es difícil porque no sé dónde publicar el código, PERO TU PUBLICACIÓN LO EXPLICA TODO CLARAMENTE.

    Pero todavía estoy teniendo un problema. También quiero mostrar el gravatar en la sección "Comentarios Recientes" de la barra lateral, así que por favor dime cómo hacerlo, qué archivo necesito editar. Estoy usando wordpress 2.6

    Gracias,
    Prashant

  24. @Spencer: Sabes... eso me ha estado molestando por mucho tiempo y no tenía idea de cuál era el problema. Acabo de agregar el CSS de fondo a la clase .post y a la clase .head. Gracias por el consejo.

    @eTomyam: Hmm... ¿es esto un problema de Gravatar o un problema de estilo?

    Gracias por los comentarios a todos, me alegra que les haya gustado el tutorial.

  25. Esto podría sonar un poco quisquilloso, pero aquellos que copian y pegan código que han publicado, ¿podrían agregar background:#fff; a su div.post dentro de su CSS? Si intentan resaltar el código tal como está ahora, es difícil saber qué están resaltando porque no le han declarado un fondo. De todos modos, podría facilitar las cosas a sus usuarios...

    ¡Gracias!

Agrega un comentario

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

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!