Cómo cambiar el tamaño de la imagen de Gravatar en WordPress

¿Quieres cambiar el tamaño de las imágenes de Gravatar en tu sitio de WordPress?

Gravatar es un servicio que conecta la dirección de correo electrónico de un usuario con su imagen. Los temas de WordPress muestran las imágenes de Gravatar a un tamaño determinado, pero algunos propietarios de sitios web pueden preferir imágenes más grandes o más pequeñas.

En este artículo, te mostraremos cómo cambiar el tamaño de las imágenes de Gravatar en tu tema de WordPress.

¿Qué es Gravatar?

Gravatar son las siglas de Globally Recognized Avatar. Es un servicio web creado y gestionado por la empresa del cofundador de WordPress, Matt Mullenweg, llamada Automattic. Te permite crear un perfil y asociar imágenes de avatar a tus direcciones de correo electrónico.

La mayoría de los temas de WordPress añaden un Gravatar junto a cada comentario del usuario. Algunos también muestran un Gravatar en el cuadro de la biografía del autor. Cuando un usuario no tiene una cuenta de Gravatar, se muestra en su lugar la imagen de Gravatar por defecto

Como el tamaño de las imágenes de Gravatar lo define tu tema, tendrás que editar los archivos de tu tema para cambiar esta configuración en tu sitio web de WordPress.

Si no estás familiarizado con la edición del código de tus archivos de WordPress, te recomendamos que primero hagas una copia de seguridad de tu sitio web y consultes nuestra guía para principiantes sobre cómo pegar fragmentos de código en WordPress.

También puedes consultar nuestra guía para principiantes sobre cómo utilizar el FTP para acceder a tus archivos de WordPress.

Dicho esto, vamos a ver cómo puedes cambiar el tamaño de la imagen de Gravatar en tu sitio de WordPress. Puedes utilizar la lista de abajo para saltar a la sección que más te interese.

Lo primero que debes hacer es conectarte a tu sitio web mediante un software FTP y luego ir a /wp-content/themes/. A continuación, abre la carpeta del tema que estás utilizando actualmente.

Alternativamente, si tu empresa de alojamiento de WordPress ofrece un Gestor de Archivos, puedes editar este archivo utilizando la interfaz web de tu cPanel.

Una vez allí, debes abrir el archivo comments.php situado en tu carpeta de temas. A continuación, debes encontrar el siguiente código avatar_size

Estará dentro de la sección wp_list_comments de la función.

<?php
wp_list_comments( 
	array(
		'avatar_size' => 60,
    	'style'       => 'ol',
    	'short_ping'  => true,
	) 
);
?>

Simplemente cambia el tamaño a las dimensiones que quieras. En la captura de pantalla anterior, cambiarías 60 por otro número. Los gravatares son cuadrados, así que el valor que establezcas será el mismo para la anchura y la altura.

Sigue adelante y guarda los cambios. Si utilizas FTP, sube los cambios a tu servidor.

Ahora abre un post que tenga comentarios para ver si tus cambios están activos. Así es como aparece nuestro sitio de demostración antes y después de aumentar el tamaño de Gravatar de 60 a 70 píxeles. Estamos utilizando el tema predeterminado Twenty Twenty-One.

Si el tamaño de la imagen de Gravatar no ha cambiado, puede ser debido a tu caché. Primero consulta nuestra guía sobre cómo arreglar que WordPress no se actualice de inmediato.

Si sigue sin cambiar, entonces podría ser porque el CSS de tu tema está anulando la configuración en comments.php. La mejor manera de comprobarlo es utilizar la herramienta Inspect en tu navegador.

Simplemente haz clic con el botón derecho del ratón sobre el Gravatar en tu navegador y haz clic en Inspeccionar.

Esto dividirá la pantalla de tu navegador en dos partes. En la parte inferior de la pantalla, verás el HTML y el CSS de la página.

Tienes que mirar la altura y la anchura de la imagen de Gravatar para ver si refleja el valor que has establecido. Cuando el código al que apunta tu ratón resalta el Gravatar, deberías poder ver el tamaño al que se muestra.

Notarás que el tamaño de la imagen aquí es diferente al que especificaste en el archivo comments.php. Esto significa que el archivo style.css de tu tema está anulando el tamaño de la imagen por defecto.

Muchos temas, como el tema Twenty Sixteen, utilizan CSS para controlar el tamaño de la imagen de Gravatar para diferentes tamaños de pantalla.

Tienes que abrir el archivo style.css en la carpeta de tu tema y buscar avatar. Es probable que encuentres una clase CSS comment-author .avatar que contiene un código como este

.comment-author .avatar {
    height: 42px;
    position: relative;
    top: 0.25em;
    width: 42px;
}

Sigue adelante y cambia la anchura y la altura para que coincidan con el valor que estableciste anteriormente en el archivo comments.php.

Eso es todo. Has cambiado con éxito el tamaño de la imagen de Gravatar en tus comentarios de WordPress.

Ahora te preguntarás por qué empezamos cambiando avatar_size en el archivo comments.php cuando puedes simplemente anular el tamaño de la imagen usando CSS. Hay dos razones.

Primero, para evitar imágenes borrosas. Si utilizas CSS para que la imagen parezca más grande de lo que realmente es, entonces se verá borrosa.

En segundo lugar, para que los tiempos de carga sean más rápidos. Si utilizas CSS para que la imagen parezca más pequeña, tu sitio web tendrá que cargar la imagen más grande. Al cambiar el tamaño en comments.php, haces que la imagen real sea más pequeña y se cargue más rápido.

Cómo mostrar imágenes redondas de Gravatar

Puede que te hayas dado cuenta de que las imágenes de Gravatar en WPMundobytes son redondas, y quieras hacer lo mismo en tu propio sitio. Algunos temas, como Twenty Twenty-One y Astra, muestran Gravatares redondos por defecto.

Si tu tema muestra Gravatars cuadrados por defecto, puedes crear el mismo efecto utilizando código. Utilizaremos la propiedad border-radius de CSS3.

Lo primero que debes hacer es editar el archivo style.css de tu tema utilizando un programa FTP. Alternativamente, puedes añadir el CSS yendo a Apariencia " Personalizar " CSS adicional en tu administración de WordPress.

A continuación, debes añadir el siguiente código:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

Esto debería funcionar en la mayoría de los temas de WordPress. Aquí tienes capturas de pantalla del antes y el después de nuestro sitio de demostración utilizando el tema Twenty Twenty.

Sin embargo, si esto no funciona en tu tema, es probable que haya algún plugin o la función de tu tema que interfiera con las clases por defecto utilizadas para Gravatar en WordPress.

Para averiguar qué clase CSS utilizan las imágenes de Gravatar en tu tema, tienes que abrir una entrada del blog que tenga comentarios. Desplázate hasta la sección de comentarios y haz clic con el botón derecho en la imagen de Gravatar para seleccionar Inspeccionar.

Esto dividirá la pantalla de tu navegador en dos partes. En la parte inferior de la pantalla, verás el HTML y el CSS de la página. Tienes que pasar el ratón por encima del código hasta que se resalte la imagen de Gravatar, y luego encontrar la clase CSS de la imagen.

Si la clase es algo diferente a 'avatar', entonces usa eso en lugar de .avatar en el código CSS anterior.

Cómo cambiar el tamaño de Gravatar para las biografías de los autores

Algunos temas de WordPress también utilizan Gravatar para las cajas de biografía de los autores. Es posible que primero tengas que escribir algo en el campo de información biográfica del perfil del usuario. Obtén más información en nuestra guía sobre cómo añadir una caja de información del autor en las entradas de WordPress.

Aquí puedes cambiar el tamaño predeterminado de Gravatar de forma muy similar a la plantilla de comentarios.

En primer lugar, tienes que localizar el archivo del tema que añade la biografía. Tienes que buscar el código en los archivos de plantilla del tema get_avatar.

El tema por defecto de Twenty-One utiliza el archivo de la parte de la plantilla llamado author-bio.php. En otros temas podría estar en el archivo single.php, en el archivo functions.php o en algún otro lugar.

Este es el código del archivo author-bio.php de Twenty-One:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
		<?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

Sólo tendrás que cambiar el número 85 por el que quieras.

En otros temas, el código puede ser así:

get_avatar( get_the_author_meta( 'user_email' ), 85);

Después de cambiar el tamaño, actualiza la página para ver si el tamaño se ha actualizado. Si no es así, entonces tendrías que buscar la clase avatar en el archivo style.css como mostramos para los comentarios, y actualizar el tamaño allí también.

Así es como aparece nuestro sitio de demostración antes y después de reducir el tamaño de Gravatar de 85 a 60 píxeles cuando se utiliza el tema predeterminado Twenty-One.

Esperamos que este tutorial te haya ayudado a aprender cómo cambiar el tamaño de la imagen de Gravatar en WordPress.

Quizá también quieras aprender a crear una dirección de correo electrónico empresarial gratuita, o consultar nuestra lista de los mejores servicios de alojamiento de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.