¿Quiere cambiar el tamaño de las imágenes de Gravatar en su 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 imágenes de Gravatar en un cierto tamaño, pero algunos propietarios de sitios web pueden preferir imágenes más grandes o más pequeñas.
En este artículo, le mostraremos cómo cambiar el tamaño de las imágenes de Gravatar en su tema de WordPress.
¿Qué es Gravatar?
Gravatar son las siglas de Avatar Reconocido Globalmente. Es un servicio web creado y administrado por la compañía 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 agregan un Gravatar al lado de cada comentario de usuario. Algunos también muestran un Gravatar en el cuadro de biografía del autor. Cuando un usuario no tiene una cuenta de Gravatar, en su lugar se muestra la imagen predeterminada de Gravatar.
Dado que el tamaño de las imágenes de Gravatar lo define su tema, deberá editar los archivos de su tema para cambiar esta configuración en su sitio web de WordPress.
Si no está familiarizado con la edición del código de sus archivos de WordPress, le recomendamos que primero haga una copia de seguridad de su sitio web y consulte nuestra guía para principiantes sobre cómo pegar fragmentos de código en WordPress.
También le gustaría ver nuestra guía para principiantes sobre cómo usar FTP para acceder a sus archivos de WordPress.
Dicho esto, echemos un vistazo a cómo puede cambiar el tamaño de la imagen de Gravatar en su sitio de WordPress. Puede usar la lista a continuación para ir a la sección que más le interese.
- Cómo cambiar el tamaño de Gravatar para los comentarios de WordPress
- Cómo mostrar imágenes redondas de Gravatar
- Cómo cambiar el tamaño de Gravatar para las biografías del autor
Cómo cambiar el tamaño de Gravatar para los comentarios de WordPress
Lo primero que debe hacer es conectarse a su sitio web mediante el software FTP y luego ir a / wp-content / themes /. Luego abre la carpeta del tema que estás usando actualmente.
Alternativamente, si su empresa de alojamiento de WordPress ofrece un Administrador de archivos, entonces puede editar este archivo usando la interfaz web en su cPanel.
Una vez allí, debes abrir el archivo comments.php ubicado en tu carpeta de temas. A continuación, debe encontrar el siguiente código: avatar_size
Estará dentro del wp_list_comments
función.
<?php wp_list_comments( array( 'avatar_size' => 60, 'style' => 'ol', 'short_ping' => true, ) ); ?>
Simplemente cambie el tamaño a las dimensiones que desee. En la captura de pantalla anterior, cambiaría 60 por otro número. Los gravatars son cuadrados, por lo que el valor que establezca será el mismo para el ancho y el alto.
Continúe y guarde sus cambios. Si está utilizando FTP, cargue los cambios en su servidor.
Ahora abra una publicación que tenga comentarios para ver si sus 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 usando el tema Twenty Twenty-One predeterminado.
Si el tamaño de la imagen de Gravatar no cambió, podría deberse a su caché. Primero, consulte nuestra guía sobre cómo solucionar que WordPress no se actualice de inmediato.
Si aún no cambia, podría deberse a que el CSS de su tema está anulando la configuración en comments.php. La mejor forma de comprobarlo es utilizar la herramienta Inspeccionar en su navegador.
Simplemente haga clic derecho en Gravatar en su navegador y haga clic en Inspeccionar.
Esto dividirá la pantalla de su navegador en dos partes. En la parte inferior de la pantalla, verá el HTML y CSS de la página.
Debe observar la altura y el ancho de la imagen de Gravatar para ver si refleja el valor que estableció. Cuando el código al que apunta el mouse resalta el Gravatar, debería poder ver el tamaño en el 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 su tema está anulando el tamaño de imagen predeterminado.
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.
Debe abrir el archivo style.css en la carpeta de su tema y buscar avatar. Probablemente encontrará una clase de CSS comment-author .avatar
que contienen un código como este:
.comment-author .avatar { height: 42px; position: relative; top: 0.25em; width: 42px; }
Continúe y cambie el ancho y el alto para que coincidan con el valor que estableció anteriormente en el archivo comments.php.
Eso es todo. Ha cambiado con éxito el tamaño de la imagen de Gravatar en sus comentarios de WordPress.
Ahora puede que se pregunte por qué empezamos cambiando avatar_size
en el archivo comments.php cuando simplemente puede anular el tamaño de la imagen usando CSS. Hay dos razones.
Primero, para evitar imágenes borrosas. Si usa CSS para hacer que la imagen parezca más grande de lo que realmente es, entonces se verá borrosa.
En segundo lugar, para tiempos de carga más rápidos. Si usa CSS para hacer que la imagen parezca más pequeña, su sitio web aún necesita cargar la imagen más grande. Al cambiar el tamaño en comments.php, hace que la imagen real sea más pequeña y se cargue más rápido.
Cómo mostrar imágenes redondas de Gravatar
Es posible que haya notado que las imágenes de Gravatar en Themelocal son redondas y desea hacer lo mismo en su propio sitio. Algunos temas, como Twenty Twenty-One y Astra, muestran Gravatars redondos de forma predeterminada.
Si su tema muestra Gravatars cuadrados de forma predeterminada, puede crear el mismo efecto mediante el código. Usaremos la propiedad border-radius de CSS3.
Lo primero que debe hacer es editar el archivo style.css de su tema usando un programa FTP. Alternativamente, puede agregar el CSS yendo a Apariencia »Personalizar» CSS adicional en su administrador de WordPress.
A continuación, desea agregar 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í hay capturas de pantalla de antes y después de nuestro sitio de demostración utilizando el tema Twenty Twenty.
Sin embargo, si esto no funciona en su tema, entonces probablemente haya algún complemento o la función de su tema jugando con las clases predeterminadas utilizadas para Gravatar en WordPress.
Para saber qué clase de CSS están usando las imágenes de Gravatar en su tema, debe abrir una publicación de blog que tenga comentarios. Desplácese hacia abajo hasta la sección de comentarios y haga clic con el botón derecho en la imagen de Gravatar para seleccionar Inspeccionar.
Esto dividirá la pantalla de su navegador en dos partes. En la parte inferior de la pantalla, verá el HTML y CSS de la página. Debe pasar el cursor sobre el código hasta que se resalte la imagen de Gravatar y luego buscar la clase CSS de la imagen.
Si la clase es algo diferente a ‘avatar’, utilícelo en lugar de .avatar en el código CSS anterior.
Cómo cambiar el tamaño de Gravatar para las biografías del autor
Algunos temas de WordPress también usan Gravatar para cuadros de biografía de autor. Es posible que primero deba escribir algo en el campo Información biográfica del perfil del usuario. Obtenga más información en nuestra guía sobre cómo agregar un cuadro de información de autor en las publicaciones de WordPress.
Puede cambiar el tamaño predeterminado de Gravatar aquí de una manera muy similar a la plantilla de comentarios.
Primero, debe ubicar el archivo de tema que agrega la biografía. Necesita buscar el código en los archivos de plantilla del tema. get_avatar
.
El tema Twenty Twenty-One predeterminado usa el archivo de parte de la plantilla llamado author-bio.php. En otros temas, podría estar en el archivo single.php, functions.php o en otro lugar.
Aquí está el código en el archivo author-bio.php de Twenty Twenty-One:
<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>"> <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>
Solo tendrás que cambiar el número 85 por el que quieras.
En otros temas, el código puede verse así:
get_avatar( get_the_author_meta( 'user_email' ), 85);
Después de cambiar el tamaño, actualice la página para ver si se actualizó el tamaño. De lo contrario, deberá buscar la clase de 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 disminuir el tamaño de Gravatar de 85 a 60 píxeles cuando se usa el tema predeterminado Twenty Twenty-One.
Esperamos que este tutorial le haya ayudado a aprender a cambiar el tamaño de la imagen de Gravatar en WordPress.
Es posible que también desee aprender a crear una dirección de correo electrónico comercial gratuita o consultar nuestra lista de los mejores servicios de alojamiento de WordPress.