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. ¡Muchaaaaaaaaaaaaaass gracias! 🙂

  2. ¡Wow! Eso ayuda. Estuve jugando con mi tema no premium durante horas tratando de entender eso. El soporte de WordPress Codex no ayuda mucho. No explican exactamente dónde poner el código. Qué alivio haber encontrado este sitio. He estado programando desde 2008 y todavía me encuentro con problemas.

  3. Gracias, estoy teniendo algunos problemas reales para que esto funcione en mi blog, pero espero que esto ayude. Estoy usando un tema que se ejecuta en Thematic, así que puedo encontrar el "foreach" que mencionaste pero no el "endforeach" y cuando agregué el código no me funcionó. ¡Supongo que seguiré intentándolo!

  4. ¡Gracias por este genial tutorial, amigo! ¡Funciona perfectamente! ¡¡Whoop whoop!!

  5. Sandra Hendricks May 20, 2010 at 4:15 pm

    ¡Funcionó a la perfección! ¡¡Muchísimas gracias Leland por tu publicación! ¡Tu blog es verdaderamente una bendición para todos los que tienen WordPress! :)

  6. ¡Muchas gracias, funcionó a la perfección!

  7. Tu tema debería contener un avatar, ya que es bastante estándar en WordPress. Si no lo tiene, es un tema de mala calidad y sería mejor que buscaras otro tema. 😉

  8. Hairtransplantdoc October 19, 2009 at 11:18 am

    Mi tema no contiene este bucle dentro de comments.php, ¿alguna idea?

  9. Dios mío, por fin un código que funcionó... No podía hacer que el sistema cargara los avatares que estaban adjuntos a los correos electrónicos de los autores... ¡el tuyo funcionó!

    Muchas, muchas gracias.

  10. Gracias, acabo de configurarlo en mi blog también.

  11. ¡Muchas gracias! Esto fue fácil :)

  12. bueno, ya terminé con los comentarios
    pero quiero agregar más información con cada publicación sobre el autor
    su nombre
    su avatar
    y biografía
    mi blog aquí http://www.eskandarany.org/blog
    ¿cómo y qué código CSS para estilizar todo este nuevo contenido

    gracias de antemano :)

  13. Hola,

    Información útil, ahora he integrado Gravatar con éxito en mi sitio.

    Saludos,
    Eddie Gear

  14. Cool random avatars | Turtle Juice: Making Money Online July 8, 2009 at 5:00 am

    […] Más información: Usar Gravatars Añadir soporte para Gravatar a los comentarios de tu WordPress […]

  15. Add Gravatar in WordPress Comments « Ivan Teoh July 8, 2009 at 1:59 am

    […] Añadir soporte para Gravatar a los comentarios de tu WordPress […]

  16. Gravatars Enabled - Your Search Advisor Blog July 2, 2009 at 7:15 am

    […] agrega Gravatars a tu blog de WordPress, descarga el plugin y sigue estas instrucciones. ¡Simple! var addthis_pub = ‘RichmondWiki’; var addthis_brand = ‘Your Search Advisor’;var […]

  17. Hola, el post es genial. Pero mi problema es asociar la imagen de gravatar a una imagen de autor en mi blog de WordPress index.php. No sé la sintaxis correcta para hacer esto. ¿Tienes alguna sugerencia? ¡¡¡Muchas gracias!!!

  18. Dario Gutierez May 19, 2009 at 9:58 am

    Realmente efectivo, estaba buscando esto. Gracias.

  19. Add New Post | scream out May 2, 2009 at 1:28 am

    […] por mí. Este tema tiene todas las características normales de un tema de blog aquí en Theme Lab, incluido el soporte para Gravatar en los comentarios, una barra lateral lista para widgets y soporte nativo para etiquetas de WordPress. Este tema también [tiene anuncios de] 125×125 […]

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!