Cómo alterar los tamaños de imagen predeterminados de Gravatar en el cuadro de biografía del autor de WordPress










  • La imagen de Gravatar es el gráfico que se muestra en la biografía de un autor o se usa en la sección de comentarios de WordPress. Este es un sistema predeterminado que se agrega y vincula la imagen de una persona a otros sitios alrededor del mundo.

    Es como tener un inicio de sesión para mostrar la imagen de su biografía, ya sea que esté dejando un comentario o agregado como colaborador de un blog. Si agrega un nuevo usuario a WordPress y usa su dirección de correo electrónico asociada con Gravatar, extraerá automáticamente la imagen.

    Aunque esta imagen es estacionaria en lo que respecta al tamaño, puede modificarse para adaptarse a prácticamente cualquier esquema de diseño. Todo lo que se necesita es un poco de codificación.

    En este tutorial, le mostraré cómo hacer los ajustes menores a la imagen de Gravatar para el cuadro de biografía del autor y la sección de comentarios. No se preocupe, la codificación no es demasiado compleja. De hecho, es tan simple como cambiar un número.

    ¿Qué hace la imagen de Gravatar y por qué se usa?

    Un Gravatar es esencialmente un método mundial de ser reconocido. Su imagen, o «avatar», se guarda y luego se distribuye cada vez que interactúa con un sitio compatible con la función. De forma predeterminada, WordPress usa Gravatar para acceder a esas imágenes de usuario.

    Esto significa que su imagen de avatar será reconocida en cualquier sitio web en el que comente o escriba que use WordPress.

    Algunas personas usan la imagen para promocionar una marca o promocionarse a sí mismos. Como se utiliza el mismo gráfico al crear o comentar, se convierte en un símbolo más reconocido entre otros usuarios.

    Dado que Gravatar permitirá a los usuarios guardar sitios web en el perfil, ofrece potencial para la comercialización. Si otro usuario tiene curiosidad sobre el autor o comentarista, puede ver el sitio web agregado.

    Cuando alguien se registra con WordPress.com o a través de Gravatar.com , su dirección de correo electrónico se agrega al sistema. Cada vez que se utiliza esa dirección para crear un perfil en WordPress como autor, se accede inmediatamente a la imagen gravatar.

    El proceso de acceso a la imagen es similar cuando los usuarios de WordPress dejan un comentario.

    Cambiar el tamaño de la imagen en la sección de comentarios

    Para acceder al archivo para cambiar el tamaño de la imagen del comentario, necesitará acceso a un buen programa FTP. Sugeriría descargar FileZilla . Es un sistema gratuito que es fácil de usar y está disponible para computadoras Windows, Mac y Linux.

    Para modificar la imagen de Gravatar en los comentarios:

    Abra su programa FTP y acceda a la carpeta raíz del sitio web.

    acceder a la carpeta raíz

    Accede al directorio del tema que estás usando en WordPress.
    Se encuentra en:

    /wp-content/themes/

    acceder al tema del directorio
    NOTA: si no está seguro de qué tema está usando, abra el área «Apariencia» en el panel de administración de WordPress. La primera pantalla le mostrará cuál tiene actualmente activo.

    Busque el archivo comments.php.

    archivo comentarios.php

    Cree una copia del archivo y guárdela en un lugar seguro.
    Sugeriría colocarlo en su escritorio para que sea fácil de encontrar si lo necesita. Siempre es una buena idea crear una copia de seguridad de cualquier archivo que planee editar.

    Edite el archivo. Si está utilizando FileZilla, lo haría haciendo clic con el botón derecho en el archivo y seleccionando «Editar».

    editar archivo
    NOTA : Si su software FTP le solicita que elija un programa, seleccione su editor de texto. Por ejemplo, los usuarios de computadoras con Windows pueden querer usar el Bloc de notas.

    En el código del archivo, buscarás: avatar_size. A la derecha de esto, habrá un número. Esta es la dimensión de la imagen de Gravatar que usa WordPress. Cambie este número por el que desee. Por ejemplo, cambiaría esto a «45» si desea que la imagen tenga 45 por 45 píxeles. El código se verá similar a esto:

    [ht_message mstyle=”info” title=”” ” show_icon=”” id=”” class=”” style=”” ]’short_ping’ => true,


    ‘avatar_size’ => 45,


    ) );


    ?>[/ht_mensaje]

    tamaño del gravatar

    Guarde los cambios. Es posible que deba volver a cargar el archivo en su servidor si está utilizando programas FTP.

    guardar cambios

    Si la imagen no cambia después de realizar los ajustes anteriores, significa que su archivo CSS probablemente esté impidiendo que se lleve a cabo. Algunos archivos CSS de temas toman el control de muchas partes de WordPress.

    Si este es el caso, usted:

    Edite el archivo style.css en la carpeta del tema. Se puede acceder a esto de la misma manera que abrió el archivo de comentarios.

    editar estilo.css

    NOTA : No olvide crear una copia de seguridad. Es mejor prevenir que lamentar.

    Busque una sección de código que contenga .avatar.

    Si su tema controla la imagen, tendrá alto, ancho o incluso ambos. Deberá realizar los ajustes correspondientes en este archivo. Entonces, la codificación sería similar a:

    [ht_message mstyle=”info” title=”” ” show_icon=”” id=”” class=”” style=”” ].comment-author .avatar {


    height: 45px;


    ancho: 45px;


    }[/ht_mensaje]

    Guarde sus cambios y vuelva a cargar su sitio web. La imagen de Gravatar ahora debería mostrarse correctamente.

    Recuerde, la única parte de la codificación en cualquiera de los dos ejemplos anteriores es el número de tamaño. Esto se muestra en píxeles y puede ser más grande o más pequeño según sus necesidades. No habrá otros ajustes en el código que deba hacer.

    También tenga en cuenta que las imágenes que aumentan de tamaño comenzarán a distorsionarse y pixelarse. Esto se debe a cómo se manejan las imágenes como JPG en Internet. Comenzará a perder detalles cuanto más grandes sean estos gráficos.

    Cambiar el Gravatar en el cuadro de biografía del autor

    Hacer cambios en la imagen de la biografía de un autor lleva un poco más de tiempo, solo porque tienes que encontrar el código. Este bit de información no siempre está en el mismo lugar. Algunos temas lo colocarán en varios archivos según la persona que cree la plantilla. Es posible que desee comenzar a buscar en single.php o functions.php.

    Por ejemplo, el tema de WordPress TwentySixteen usará un archivo separado llamado «biography.php».

    En el archivo, está buscando código que contenga get_avatar . Esto puede ser un poco complicado porque cada programador de temas hace las cosas de manera diferente. Sin embargo, todos los temas tendrán un número que acompaña al código para el tamaño de la imagen. Por ejemplo, el código en el tema TwentySixteen se verá así:

    [ht_message mstyle=”info” title=”” ” show_icon=”” id=”” class=”” style=”” ]$author_bio_avatar_size = apply_filters( ‘twentysixteen_author_bio_avatar_size’ , 32 );


    echo get_avatar( get_the_author_meta( ‘user_email’ ), $author_bio_avatar_size );[/ht_message]

    Observe el » 32 » en la cadena anterior. Ese es el tamaño que desea cambiar.

    Una forma rápida de hojear un archivo es usar el comando «buscar». Por ejemplo, la mayoría de las aplicaciones le permitirán presionar CTRL+F para buscar texto en computadoras con Windows. Las Mac usarían Comando+F para buscar. En cualquier caso, escriba avatar y el sistema le mostrará todas las instancias de la palabra en todo el archivo.

    Usando el editor de WordPress

    Algunos de los cambios anteriores se pueden hacer directamente desde WordPress. Si no tiene acceso a FTP o no puede acceder a la carpeta raíz del sitio web, puede abrir la herramienta Editor en el panel de administración.

    La única razón por la que no abrí con esta función al principio es porque es más difícil hacer una copia de seguridad del archivo. Si algo salió mal, es más difícil de arreglar para los principiantes.

    Para abrir la herramienta de edición:

    Vaya al área Apariencia de WordPress.

    ir a apariencia

    Haga clic en el enlace Editor debajo de Apariencia.

    haga clic en el enlace del editor

    A la derecha, verá un cuadro desplegable para seleccionar el tema. Elija el que desea editar y haga clic en «Seleccionar».

    Verá que tiene acceso a una variedad de archivos como comments.php y otros. Una vez que seleccione un archivo y edite la codificación, haga clic en el botón «Actualizar archivo» en la parte inferior izquierda.

    actualizar archivo

    Uso del Administrador de archivos para cambiar el Gravatar

    FileZilla y el Editor de WordPress son buenas formas de cambiar el gravatar, pero ¿qué pasa con el Administrador de archivos? Si tiene cPanel , la herramienta Administrador de archivos es una excelente alternativa si no desea instalar otro programa o necesita buscar más en los archivos de WordPress fuera del editor.

    File Manager le da acceso a todos los recursos del sitio a través de su navegador web. Es bastante flexible y es uno de mis métodos preferidos para realizar ediciones en el sitio.

    Cambiar el cuadro de biografía del autor

    Algunos complementos le permitirán instalar cuadros biográficos personalizados para los autores de publicaciones. Muchos tendrán la capacidad de cambiar el gravatar directamente. Sin embargo, le mostraré cómo hacerlo sin un complemento.

    Para este ejemplo, estoy usando el tema TwentySixteen que viene con WordPress. Si no lo tiene, siempre puede instalarlo de forma gratuita accediendo a su área Apariencia del panel de administración.

    NOTA: No todos los temas están estructurados de la misma manera. Este tutorial simplemente le da una idea de dónde buscar y cómo hacer cambios.

    Acceda a la herramienta Administrador de archivos desde el panel de control de cPanel. Alternativamente, puede usar programas FTP como FileZilla .

    Administrador de archivos

    Acceda a su directorio de WordPress haciendo clic en la carpeta «public_html». Esta es la raíz de su sitio web. Si tiene WordPress instalado en otro lugar, deberá acceder a ese directorio en particular. Sin embargo, la mayoría de ustedes simplemente necesitará acceder a public_html .

    Público_Html

    Haga clic en el directorio «wp-content» de su sitio web.

    Carpeta de contenido de WP

    Haga clic en el directorio «Temas» para acceder a sus archivos. Aquí es donde se almacenan todos sus temas. Incluso aquellos que no tienes activados son accesibles desde esta área.

    Carpeta de temas

    Encuentre su tema y haga clic en su directorio. Para este tutorial, estoy accediendo a TwentySixteen.

    Escoge un tema

    Aquí es donde se pone difícil. No todos los temas van a tener este siguiente paso. Esto se debe a que cada desarrollador tiene una forma diferente de codificar diseños para WordPress. En este tutorial, estoy usando TwentySixteen, por lo que accederé al directorio «template-parts» para encontrar el cuadro de biografía del autor.

    Partes de la plantilla

    Resalte el archivo «biography.php» haciendo clic en él una vez y haga clic en el botón Editar.

    Editar biografía

    En la pantalla de edición, verá la codificación php real para la biografía del autor. Busque el comando «avatar_size» dentro del código. Una vez que lo encuentre, habrá un número a la derecha. Estas son las dimensiones al cuadrado en píxeles.

    En este ejemplo, puede ver que mi versión de TwentySixteen usa «42». Esto significa que el gravatar en el cuadro de biografía del autor es cuadrado de 42 por 42 píxeles. Cambie este número al tamaño que desee. Para este tutorial, lo haré un poco más pequeño y lo configuraré en «32».

    Cambiar el tamaño del avatar del autor

    Después de cambiar el número, haga clic en el botón «Guardar cambios» en la parte superior derecha. Ahora, su tema está configurado para usar el nuevo tamaño de gravatar en el cuadro de biografía.

    Guardar cambios

    Si el gravatar aún no cambia en el sitio, es posible que deba editar el tamaño en el archivo » style.css » dentro del tema. En el caso de TwentySixteen, tendré que editar este archivo css.

    Edite el archivo style.css desde el directorio principal de su tema.

    Editar estilo CSS

    Busque la codificación relacionada con » .author-avatar » en el archivo CSS. En esta área, encontrará «alto» y «ancho» con el mismo número en píxeles. Como puede ver, mi versión de TwentySixteen usa «42px» en ambos campos. Esto significa que son 42 píxeles.

    Cambie ambos números para reflejar el tamaño que desea. Este número debe coincidir con el que usó anteriormente en el archivo biograph.php si desea evitar distorsiones en sus gráficos. Como usé «32» anteriormente, también necesito hacer estos 32px.

    Cambio de avatar de autor

    Una vez que haya terminado de editar el código, haga clic en el botón «Guardar cambios» en la parte superior derecha como lo hizo antes.

    Guardar cambios de estilo CSS

    Cambiar la sección de comentarios Gravatar

    A continuación, echemos un vistazo a cómo cambiar el gravatar para la sección de comentarios. Esto se hace de manera similar al cuadro de biografía del autor anterior.

    En el directorio principal de su tema, edite el archivo «comentarios.php».

    Editar archivo de comentarios

    Busque el código relacionado con «avatar_size». Cambie el número junto a este comando para modificar el tamaño del gravatar. Como antes, estoy cambiando el mío a 32 para este tutorial.

    Editar tamaño de Gravatar

    Haga clic en el botón «Guardar cambios» en la parte superior derecha y su sección de comentarios estará lista.

    Guardar archivo de comentarios

    Después de una actualización del tema…

    ¿Qué sucede si su tema se actualiza? Lamentablemente, la codificación puede sobrescribirse cuando aparece una nueva versión del tema. Esta es la razón por la que muchas personas usarán temas secundarios en WordPress . Le da la opción de guardar sus modificaciones en el código. Sin embargo, un tema hijo no tendrá el beneficio de obtener los ajustes actualizados del desarrollador.

    Sugeriría guardar los archivos por separado en su computadora como una forma de respaldo. Por ejemplo, puede copiar y pegar el código completo del archivo comments.php en el Bloc de notas y guardarlo como un archivo .txt. Cuando sale una actualización del tema, puede pasar el contenido del archivo .txt nuevamente a su tema.

    Solo asegúrese de comparar su copia con la actualización. Es posible que deba incluir ajustes en la nueva versión.

    Editar el Gravatar le brinda la capacidad de hacer que la imagen se ajuste perfectamente a sus ideas de diseño. Simplemente cambiando uno o dos números, puede hacer que el gráfico sea tan grande o tan pequeño como desee. Después de todo, la personalización es solo una de las principales razones por las que a tanta gente le encanta usar WordPress.

    ¿Qué tipo de complementos personalizados ha realizado en su sitio web? ¿Cuántos de sus autores son conocidos mundialmente por su Gravatar?