Cómo mostrar gravatar desde el correo electrónico del usuario en WordPress

Gravatar es un servicio web que conecta la dirección de correo electrónico de un usuario con un avatar en línea.

WordPress muestra automáticamente los Gravatars de los visitantes en la sección de comentarios, pero es posible que desees agregarlos a otras áreas de tu sitio web también. Esto puede ayudar a crear una experiencia de usuario más atractiva visualmente y aumentar la participación.

En este artículo, te mostraremos cómo mostrar fácilmente un Gravatar a partir del correo electrónico del usuario en WordPress, explorando varios métodos para brindarte opciones flexibles.

¿Qué es Gravatar y por qué mostrarlo?

Gravatar significa Avatar Reconocido Globalmente y permite a las personas vincular una imagen a su dirección de correo electrónico.

Si un sitio web es compatible con Gravatar, puede obtener la imagen de la persona y mostrarla junto a su nombre. Por ejemplo, cuando un usuario deja un comentario con su correo electrónico en un sitio web de WordPress, WordPress mostrará el Gravatar de esa persona junto a su comentario.

Los Gravatars pueden animar a los usuarios a unirse a la conversación, crear un sentido de comunidad y hacer que tus páginas se vean más interesantes. Todo esto junto puede ayudarte a obtener más comentarios en tus publicaciones de WordPress.

Dependiendo de cómo esté configurado tu sitio, WordPress puede mostrar Gravatars en otras ubicaciones, como la biografía del autor. Sin embargo, es posible que desees cambiar dónde aparecen los Gravatars de los usuarios en tu blog o sitio web de WordPress. Por ejemplo, podrías mostrar el Gravatar del usuario en la barra de herramientas o en el perfil de usuario de tu sitio web.

Dicho esto, veamos cómo puedes mostrar el Gravatar de un correo electrónico de usuario en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que prefieras:

• Método 1: Editar tu tema de WordPress (Mejor para la consistencia)
• Método 2: Usar un shortcode personalizado de WordPress (Completamente personalizable)
• Extra: Carga diferida de Gravatars en comentarios de WordPress

Método 1: Editar tu tema de WordPress (Mejor para la consistencia)

Primero, puedes agregar un Gravatar a tu tema de WordPress usando código. Esta es una buena opción si deseas mostrar un Gravatar en la misma ubicación en todo tu sitio, como la barra lateral o encima del encabezado. Sin embargo, necesitarás editar los archivos de tu plantilla, por lo que no es el método más amigable para principiantes.

Este método muestra el Gravatar de la persona que ha iniciado sesión actualmente en tu sitio web. Esto es útil para sitios de membresía, tiendas en línea o cualquier otro sitio web donde el usuario deba iniciar sesión en una cuenta.

Para agregar un Gravatar a tu tema, necesitarás pegar algo de código en los archivos de tu tema. Si no lo has hecho antes, consulta nuestra guía para principiantes sobre pegar fragmentos de la web en WordPress.

La forma más fácil de agregar fragmentos de código a tu sitio web de WordPress es usando WPCode. Es el mejor plugin de fragmentos de código para WordPress que te permite agregar PHP, CSS, JavaScript y más a tu sitio web.

Primero, necesitarás instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, visita la página Fragmentos de código » + Agregar fragmento » en el panel de WordPress. Aquí verás todos los fragmentos listos para usar que WPCode puede agregar a tu sitio.

Simplemente pasa el cursor del mouse sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘Usar fragmento’ cuando aparezca.

Para empezar, escribe un título para el fragmento de código. Esto es solo para tu referencia, así que puedes usar lo que quieras.

Después de eso, abre el menú desplegable ‘Tipo de código’ y selecciona ‘Fragmento de PHP’.

Ahora puedes proceder y pegar lo siguiente en el editor de código:

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

Este código crea una función simple que te permite agregar un Gravatar en cualquier lugar de tus archivos de plantilla de WordPress.

Después de pegar el código, desplázate hasta la sección ‘Inserción’ y selecciona ‘Insertar automáticamente’. También necesitarás abrir el menú desplegable ‘Ubicación’ y elegir ‘Ejecutar en todas partes’.

Hecho esto, desplázate hasta la parte superior de la página y haz clic en el interruptor ‘Inactivo’ para que muestre ‘Activo’ en su lugar.

Luego, simplemente haz clic en el botón ‘Guardar fragmento’.

Ahora, puedes mostrar el Gravatar del usuario en cualquier lugar de tu sitio web de WordPress usando la siguiente función:

<?php wpbeginner_display_gravatar(); ?>

Simplemente agrega esta función al archivo de plantilla correcto. Por ejemplo, si deseas mostrar el Gravatar del usuario en el encabezado de tu sitio web, normalmente editarás el archivo header.php.

Sin embargo, esto puede variar dependiendo de tu tema de WordPress. Para ayudarte a encontrar el archivo de plantilla correcto para tus necesidades, consulta nuestra hoja de referencia sobre la jerarquía de plantillas de WordPress.

Método 2: Usar un shortcode personalizado de WordPress (Completamente personalizable)

También puedes agregar un Gravatar a cualquier página, publicación o área preparada para widgets creando un shortcode personalizado.

Esta es una buena opción si deseas controlar exactamente dónde aparecen los Gravatares en cada página o si deseas mostrar estas imágenes en diferentes ubicaciones en tu sitio web.

Al igual que el método 1, este enfoque mostrará el Gravatar del usuario actual. Si lo prefieres, puedes mostrar el Gravatar asignado a una dirección de correo electrónico específica haciendo un cambio simple en el código.

Esto es útil si tienes la dirección de correo electrónico de una persona y quieres mostrar su Gravatar en tu sitio, pero no es un usuario registrado.

La forma más fácil de crear shortcodes personalizados es usar WPCode. Aún mejor, no tienes que editar los archivos de tu tema, lo que hace que este sea un método mucho más amigable para principiantes.

Si aún no lo has hecho, necesitarás instalar WPCode. También necesitarás crear un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.

Hecho esto, dale un nombre al fragmento de código y elige 'Fragmento de PHP' como tipo de código.

A continuación, pega el siguiente PHP en el editor de código:

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

Este código crea un shortcode [wpb_gravatar] que puedes agregar a cualquier página, publicación o área lista para widgets.

Cuando estés listo, desplázate hasta la sección 'Inserción' y asegúrate de que 'Insertar automáticamente' esté seleccionado. También deberás abrir el menú desplegable 'Ubicación' y elegir 'Ejecutar en todas partes' si no está seleccionado.

Finalmente, desplázate hasta la parte superior de la pantalla y haz clic en el interruptor 'Inactivo' para que muestre 'Activo' en su lugar. Luego puedes hacer clic en 'Guardar fragmento' para que tu código esté en vivo.

Ahora puedes mostrar el Gravatar del usuario en cualquier página, publicación o área lista para widgets usando el siguiente shortcode:

[wpb_gravatar]

Para obtener más información sobre cómo colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Si quieres mostrar el Gravatar de un usuario específico, puedes simplemente agregar su dirección de correo electrónico al shortcode:

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Si no estás satisfecho con cómo se ve el Gravatar, entonces puedes estilizarlo usando CSS personalizado. Por ejemplo, puedes agregar el siguiente fragmento de código CSS a la hoja de estilos de tu tema de WordPress:

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

Para más detalles sobre cómo agregar CSS a WordPress, consulta nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

Si lo prefieres, puedes agregar CSS personalizado usando el Personalizador de WordPress. En el panel de control, simplemente ve a Apariencia » Personalizar.

En el menú de la izquierda, haga clic en 'CSS adicional'.

Luego puede pegar el CSS personalizado en el pequeño editor de código.

Hecho esto, simplemente haga clic en 'Publicar'.

Ahora, si visita su sitio web, verá su Gravatar con el nuevo estilo.

Para obtener aún más consejos sobre cómo personalizar Gravatars en su sitio, consulte nuestra guía sobre cómo cambiar el tamaño de la imagen Gravatar en WordPress.

Cómo agregar un shortcode personalizado usando el editor de sitio completo

Si está utilizando uno de los temas más recientes basados en bloques, puede agregar el shortcode a cualquier plantilla o parte de plantilla. Esto le permite mostrar el Gravatar del usuario en todo su sitio web sin tener que editar los archivos de plantilla.

Por ejemplo, podría agregar el shortcode a la plantilla de blog de su sitio o a la parte de la plantilla del encabezado.

Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema, pero puede agregar shortcodes a cualquier plantilla o parte de plantilla, como el encabezado o el pie de página.

Para ver todas las opciones disponibles, simplemente seleccione 'Plantillas' o 'Partes de plantilla'.

Ahora puedes hacer clic en la plantilla o parte de plantilla que deseas editar.

Como ejemplo, agregaremos el shortcode a la plantilla de página 404, pero los pasos serán exactamente los mismos sin importar qué plantilla seleccione.

WordPress ahora mostrará una vista previa de la plantilla o parte de la plantilla.

Para agregar el shortcode, haz clic en el ícono del lápiz pequeño.

Hecho esto, haz clic en el ícono azul '+' en la esquina superior izquierda.

En la barra de búsqueda, escribe 'Shortcode'.

Cuando aparezca el bloque correcto, arrástralo y suéltalo en la plantilla del tema.

Ahora puedes pegar o escribir el shortcode [wpb_gravatar] en este bloque.

Después de eso, procede y haz clic en el botón 'Guardar'.

Ahora, simplemente visita tu blog de WordPress para ver el Gravatar en acción.

Extra: Carga diferida de Gravatars en comentarios de WordPress

Una vez que hayas agregado Gravatars en varios lugares de tu sitio web, es una buena idea cargar de forma diferida esos Gravatars en los comentarios de WordPress.

Esto se debe a que la mayoría de los Gravatars se muestran en la sección de comentarios y pueden ralentizar la velocidad de tu sitio, particularmente en artículos con muchos comentarios.

Para cargar Gravatars de forma diferida, simplemente instala y activa el plugin a3 Lazy Load. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activar, dirígete a la página Ajustes » a3 Lazy Load desde el panel de WordPress y expande la pestaña 'Carga diferida de imágenes'.

Luego, simplemente activa el interruptor junto a la opción 'Gravatars' a 'Activado'. Después de eso, haz clic en el botón 'Guardar cambios' para almacenar tu configuración.

Ahora, todos los Gravatars en las biografías de tus autores y comentarios se cargarán de forma diferida para mejorar el rendimiento del sitio. Para más instrucciones, consulta nuestro tutorial sobre cómo cargar Gravatars de forma diferida en los comentarios de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar Gravatar a partir de correos electrónicos de usuarios en tu sitio de WordPress. También te puede interesar nuestro tutorial sobre cómo notificar a los usuarios cuando se aprueba su comentario en WordPress y nuestra guía sobre cómo agregar etiquetas rápidas en los formularios de comentarios de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.