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

Si buscas redimensionar las imágenes de Gravatar en tu sitio de WordPress, estás en el lugar correcto. Ha habido ocasiones en las que hemos tenido que redimensionar tamaños personalizados de Gravatar en sitios de WordPress en los que estábamos trabajando, pero el método difiere según el tema que estés utilizando.

Un Gravatar es una imagen que se utiliza para representar a un comentarista o autor de una entrada de blog. Los temas de WordPress muestran los Gravatars en un tamaño determinado, pero es posible que prefieras hacerlos más pequeños o más grandes para que se adapten mejor al diseño de tu sitio web.

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

¿Por qué cambiar el tamaño de la imagen de Gravatar en WordPress?

Gravatar es el acrónimo de Globally Recognized Avatar (Avatar Reconocido Globalmente). Es un servicio web que te permite crear un perfil y asociar imágenes de avatar a tu dirección de correo electrónico.

La mayoría de los temas de WordPress muestran un Gravatar junto al comentario del usuario. Algunos temas también muestran un Gravatar en el cuadro de biografía del autor.

Incluso si un usuario no tiene una cuenta de Gravatar, tu sitio seguirá mostrando uno de los Gravatars predeterminados de WordPress.

A veces, es posible que desees cambiar el tamaño de los Gravatars de tu tema. Por ejemplo, es posible que desees hacerlos más grandes para que destaquen, atrayendo la atención del visitante a la sección de comentarios de tu sitio.

Dicho esto, veamos cómo puedes cambiar el tamaño de tu imagen Gravatar personalizada en tu sitio de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar al método que deseas usar:

• Método 1: Cambiar el tamaño de Gravatar usando el Editor de Sitio Completo (Solo Temas de Bloques)
• Método 2: Cambiar el tamaño de Gravatar editando comments.php (Todos los Temas)
• Método 3: Cambiar el tamaño de Gravatar editando style.css (Todos los Temas)
• Method 4: Change Gravatar Size for Author Bios With Code

Método 1: Cambiar el tamaño de Gravatar usando el Editor de Sitio Completo (Solo Temas de Bloques)

Si estás utilizando un tema basado en bloques como Twenty Twenty-Five, entonces puedes cambiar el tamaño predeterminado de Gravatar de WordPress usando el editor de sitio completo.

Este método no funciona con todos los temas, así que si no estás usando un tema habilitado para bloques, te recomendamos usar el método 2 en su lugar.

En el panel de administración de WordPress, ve a Apariencia » Editor.

Ahora llegarás al editor de sitio completo y verás varias configuraciones para editar diferentes partes de tu sitio web de WordPress.

Para cambiar el tamaño predeterminado del avatar para los comentarios de tu WordPress, haz clic en el icono de la barra de búsqueda en la parte superior del panel izquierdo.

En este punto, solo busca la parte de la plantilla de Comentarios.

Haz clic en ella una vez que la hayas encontrado.

En la siguiente página, verás información sobre la parte de la plantilla de Comentarios.

Para editar la parte de la plantilla de Comentarios, haz clic en el botón del lápiz. Luego serás dirigido a la interfaz de edición.

Ahora puedes proceder y hacer clic en cualquiera de los Gravatars en la vista previa en vivo.

En el menú de la derecha, puedes seleccionar la pestaña 'Bloque' si aún no está seleccionada.

Ahora puedes hacer los Gravatars más grandes o más pequeños arrastrando el control deslizante 'Tamaño de imagen'.

A medida que muevas el control deslizante, todos los Gravatars se actualizarán automáticamente, para que puedas probar diferentes tamaños y ver cuál se ve mejor.

Adicionalmente, siéntete libre de habilitar la configuración 'Enlace al perfil de usuario'. Cuando un usuario haga clic en el Gravatar, será dirigido a la página de perfil del comentarista en tu sitio web.

Cuando estés satisfecho con el nuevo tamaño predeterminado de la imagen de Gravatar, haz clic en el botón 'Guardar'.

Ahora, si visitas cualquier sección de comentarios en tu sitio web de WordPress, verás los cambios en vivo.

Método 2: Cambiar el tamaño de Gravatar editando comments.php (Todos los Temas)

Si no estás utilizando un tema de WordPress basado en bloques, puedes cambiar el tamaño de la imagen de perfil de Gravatar para los comentarios de WordPress editando el código de tu tema.

Este método requiere que edites los archivos del tema, por lo que no es la opción más amigable para principiantes. Sin embargo, este método debería funcionar para la mayoría de los temas de WordPress.

Primero, necesitarás conectarte a tu sitio de WordPress usando un cliente FTP como FileZilla, o puedes usar el administrador de archivos de tu cPanel de hosting de WordPress.

Si es la primera vez que usas FTP, puedes ver nuestra guía completa sobre cómo conectarte a tu sitio usando FTP.

Una vez que estés conectado, necesitas ir a /wp-content/themes/ y abrir la carpeta de tu tema actual de WordPress.

Una vez aquí, abre el archivo comments.php y busca una función wp_list_comments. Dentro de esta función, encontrarás avatar_size, que establece el tamaño del Gravatar.

Aquí tienes un ejemplo de cómo podría verse:

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

Simplemente puedes cambiar avatar_size al tamaño que desees usar. En el fragmento de código anterior, esto significaría cambiar 60 por otro número.

Los Gravatars son cuadrados, por lo que WordPress usará el mismo valor para el ancho y el alto de la imagen. Esto significa que solo necesitas escribir un número.

Después de hacer este cambio, asegúrate de guardar y subir el archivo de vuelta a tu cuenta de hosting de WordPress. Cuando hayas terminado, puedes visitar tu blog de WordPress para ver el cambio en acción.

Si la imagen de Gravatar no ha cambiado, puede deberse a la caché. Para obtener más información, consulta nuestra guía sobre cómo solucionar que WordPress no se actualiza de inmediato.

Si Gravatar aún no cambia, entonces el CSS de tu tema podría estar anulando la configuración en el archivo comments.php. En este caso, necesitas probar el siguiente método.

Método 3: Cambiar el tamaño de Gravatar editando style.css (Todos los Temas)

Para ver si el CSS de tu tema está anulando tu archivo comment.php, puedes usar la herramienta Inspect de tu navegador. Los pasos variarán según el navegador que estés utilizando, pero en Chrome, simplemente puedes hacer clic derecho o Ctrl+clic en el Gravatar y luego seleccionar 'Inspect'.

Esto mostrará el código HTML y CSS de la página en un nuevo panel.

En este código, necesitas enfocarte en el panel inferior y buscar la clase o clases CSS para el avatar del autor del comentario.

En nuestro ejemplo, eran .comment-author y .avatar, y contienen propiedades CSS para los valores de alto y ancho del Gravatar. Lo sabemos porque cuando pasamos el cursor sobre los fragmentos de código CSS, el Gravatar se resalta en la vista previa.

Aquí se ve el código en nuestro tema. Ten en cuenta que puede verse diferente en el tuyo:

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

Si el tamaño del Gravatar en el código CSS es diferente de lo que especificaste en el archivo comments.php, entonces esto significa que el archivo style.css de tu tema está anulando tus cambios.

Para editar tu archivo style.css, necesitas usar WPCode, que es un plugin de fragmentos de código que facilita la inserción de código personalizado en tu tema. Con esto, puedes editar tu archivo style.css sin acceder directamente a él, reduciendo la posibilidad de cometer errores.

Además, necesitarás mantener abierta la pestaña donde tienes la herramienta de inspección. Esto es para que puedas copiar y pegar el código CSS del Gravatar del autor de tu comentario en WPCode y editarlo más tarde.

Primero, instala WPCode en tu sitio web de WordPress. Puedes leer nuestra guía sobre cómo instalar un plugin de WordPress para más información.

Luego, ve a Fragmentos de Código » + Añadir Fragmento y selecciona ‘Añadir tu código personalizado (Nuevo Fragmento)’. Haz clic en el botón ‘+ Añadir Fragmento Personalizado’.

Una vez hecho esto, escribe un nombre para tu nuevo código CSS. Puede ser algo tan simple como ‘Cambiar tamaño de Gravatar’.

En cuanto al Tipo de Código, selecciona ‘Fragmento CSS’.

Ahora, copia y pega tus fragmentos de código CSS del tema original para el tamaño de Gravatar en el cuadro de Vista previa del código.

Una vez hecho esto, puedes cambiar los valores de alto y ancho dentro del código. En nuestro ejemplo, lo cambiamos a 50px. Asegúrate de que los tamaños de alto y ancho sean los mismos.

Una vez hecho esto, desplázate hacia abajo hasta la sección Insertar.

Asegúrate de que esté seleccionado el método 'Insertar automáticamente'. En cuanto a la Ubicación, simplemente elige 'Pie de página de todo el sitio' para que tu CSS personalizado pueda anular el código CSS existente.

Después de eso, simplemente haz clic en el interruptor en la esquina superior derecha para que el código esté 'Activo' y haz clic en 'Guardar fragmento'. Si visitas tu blog o sitio web de WordPress, verás tus imágenes de Gravatar actualizadas.

Ahora, recomendamos intentar cambiar el tamaño de Gravatar en el archivo comments.php antes de usar el método CSS más fácil.

En primer lugar, el CSS a veces puede hacer que los Gravatars se vean borrosos, especialmente si haces que los avatares sean mucho más grandes que la imagen original.

En segundo lugar, cambiar el tamaño de la imagen en comments.php a menudo ayuda a que tu sitio cargue más rápido. Esto se debe a que el navegador todavía tiene que descargar la imagen de tamaño completo y luego usar CSS para redimensionarla para su visualización. Esto puede resultar en un rendimiento más lento del sitio web.

Método 4: Cambiar el tamaño de Gravatar para biografías de autor con código

Si administras un sitio de WordPress de varios autores, entonces un cuadro de autor puede ayudar a los lectores a aprender más sobre el autor de la publicación.

Si deseas agregar esta función a tu sitio web, consulta nuestra guía sobre cómo agregar un cuadro de información del autor en las publicaciones de WordPress.

Muchas biografías de autores muestran el Gravatar del escritor junto con su biografía. Para cambiar el tamaño predeterminado del Gravatar en los cuadros de biografía de tu autor, necesitas encontrar el archivo del tema que agrega la biografía.

Simplemente conéctate a tu sitio usando un cliente FTP como FileZilla o el administrador de archivos de tu hosting de WordPress. Una vez que estés conectado, ve a /wp-content/themes/ y abre la carpeta de tu tema actual de WordPress.

Después de eso, necesitas abrir la carpeta template-parts.

Ahora necesitas encontrar el archivo que contiene el código get_avatar . A menudo encontrarás este código en un archivo de parte de plantilla llamado author-bio.php, single.php, archivo functions.php, o similar.

Aquí tienes un ejemplo de cómo podría verse este código:

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

En el fragmento anterior, simplemente puedes cambiar el número 85 al tamaño que deseas usar.

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

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

Simplemente puedes reemplazar el número con el valor que deseas usar para hacer el Gravatar más grande o más pequeño.

Después de cambiar el tamaño, no olvides guardar tus cambios. Luego puedes visitar tu sitio web para ver el nuevo cuadro de biografía del autor en acción.

Si los Gravatars no han cambiado, entonces necesitarás buscar la clase de avatar en el archivo style.css siguiendo el mismo proceso descrito en el Método 3. Una vez que encuentres esta clase, puedes crear un nuevo fragmento de WPCode y escribir los nuevos valores de alto y ancho del Gravatar.

Aprende más formas de mejorar tu sección de comentarios

¿Quieres llevar tus comentarios de WordPress al siguiente nivel? Consulta estas guías para personalizar tu sección de comentarios:

• Cómo limitar la longitud de los comentarios en WordPress (tutorial fácil)
• Cómo cambiar el texto de "Responder" en los comentarios de WordPress
• Cómo permitir que tus usuarios se suscriban a comentarios en WordPress
• Cómo paginar comentarios en WordPress (paso a paso)
• Cómo permitir que los usuarios den "Me gusta" o "No me gusta" a los comentarios en WordPress
• Cómo eliminar el campo de URL del sitio web del formulario de comentarios de WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo cambiar el tamaño de la imagen Gravatar en WordPress. También podrías querer aprender cómo estilizar el formulario de comentarios de WordPress o consultar nuestra lista de los mejores plugins de comentarios para 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.