Cómo mostrar imágenes redondas de Gravatar en WordPress










  • ¿Quieres mostrar imágenes redondas de gravatar en tu sitio web de WordPress? Gravatars son avatares reconocidos mundialmente que se utilizan en la sección de comentarios de WordPress. De forma predeterminada, los Gravatars tienen forma cuadrada, pero se pueden cambiar a una forma redonda. La forma redonda se crea controlando el radio del borde de todos los Gravatars.

    El cambio de borde hará que las esquinas cuadradas se redondeen al rellenarlas. En teoría, puedes hacer cualquier forma si eres lo suficientemente creativo con el estilo CSS de WordPress. Los Gravatars son muy fáciles de configurar y deberían ser una de las primeras cosas que se configuran en un nuevo sitio web.

    Hoy, demostraré cómo mostrar imágenes gravatar redondas en WordPress mediante el diseño de CSS.

    ¿Por qué debería redondear las imágenes de Gravatar?

    No hay una respuesta correcta o una razón particular para redondear las imágenes de Gravatars en WordPress. Y eso es porque es simplemente una elección de diseño.

    No tendrá un impacto en ningún otro aspecto de su sitio web que no sea la estética.

    Depende de la preferencia del desarrollador web y también puede basarse en los comentarios de la comunidad. Como muchas elecciones de diseño, es simplemente una elección que se hace y se puede cambiar en cualquier momento.

    Los Gravatars tienen muchas opciones de personalización siempre que seas creativo. El tema es que no son muy sencillos ni intuitivos para principiantes. De hecho, no hay indicios de que se puedan personalizar en absoluto.

    Uno pensaría que una característica popular como Gravatars tendría una página de configuración fácil de usar, pero estaría equivocado en este caso. La mayoría de los aspectos de Gravatars deben cambiarse mediante el estilo y la edición de código.

    Por supuesto, su popularidad nunca ha disminuido por eso.

    Cómo mostrar imágenes redondas de Gravatar en WordPress

    Al diseñar CSS, puede personalizar casi todos los aspectos de su sitio web. Agregar código CSS a WordPress es fácil y es una de las habilidades más importantes que un desarrollador web puede tener en la plataforma.

    Si bien WordPress le permite crear un sitio web funcional sin escribir una sola línea de código, crear uno elegante es una historia diferente. La presentación visual de un tema solo puede llegar hasta cierto punto y, para muchos sitios web, no lo suficiente. En su lugar, debe personalizar el tema.

    De lo contrario, todos los sitios web que utilicen el mismo tema serían idénticos.

    CSS se utiliza para modificar el diseño de los objetos que aparecen en su sitio web. Lo que puede hacer con CSS se limita a cómo está codificado su tema. Algunos temas pueden tener mejores opciones de estilo que otros.

    Paso 1: Ubique el área de CSS adicional

    Agregar CSS personalizado a WordPress es un proceso extremadamente rápido. En el panel de administración de la izquierda, haga clic en Apariencia y seleccione la opción Personalizar.

    Haga clic en Apariencia y seleccione la opción Personalizar.

    Seleccione la opción CSS adicional en la parte inferior izquierda.

    Seleccione la opción CSS adicional.

    Aquí puede agregar CSS personalizado a su sitio web de WordPress. Si inserta un código que dañaría su sitio web, se le advertirá y no se le permitirá publicar el código, pero tenga en cuenta que algunos errores pueden pasar desapercibidos y causar problemas.

    Dicho esto, es extremadamente raro que surjan problemas.

    Paso 2: Agregar CSS personalizado

    Copie y pegue el siguiente código en el cuadro de texto disponible. Puede notar que dice avatar en lugar de gravatar, pero ambos serán alterados: 

    .avatar {

    borde-radio: 50%;


    -moz-border-radius: 50%;


    -webkit-border-radio: 50%;


    }

    Siéntete libre de editar este código a tu gusto. CSS es muy fácil de manipular siempre y cuando entiendas el lenguaje . Y lo mejor es que puedes ver los cambios en tiempo real. Por lo tanto, puede asegurarse de que todo se vea correcto antes de que se active.

    Haga clic en el botón «Publicar» cuando haya terminado.

    Haga clic en el botón "Publicar".

    Ahora puede visitar su sitio web y ver los cambios en sus Gravatars. Siéntete libre de jugar con el código para crear otras formas.

    Antes y después de.

    Felicitaciones, ha cambiado con éxito la forma de su gravatar en WordPress. Puede hacer muchos cambios cosméticos más pequeños en su sitio web con CSS, así que asegúrese de probarlos.

    Nota: si este método no tiene el efecto deseado, entonces tu tema es el culpable. Es probable que tengas que agregar código a los archivos de tu tema para que funcione. Lo que necesita agregar es diferente para cada tema. Este puede ser un buen momento para instalar un nuevo tema que esté mejor codificado.

    ¿Qué pasa si solo quiero que la imagen del autor sea redondeada?

    La solución anterior es una solución única, pero algunos sitios web pueden querer imágenes específicas, como el autor, redondeadas. En este caso, puede lograrlo con CSS al designar un rol de usuario específico, pero el código puede ser complicado.

    En cambio, una solución mucho más fácil es usar un complemento y tengo el perfecto para el trabajo.

    Imagen de perfil de usuario

    Imagen de perfil de usuario

    El complemento Imágenes de perfil de usuario tiene que ver con los perfiles de usuario. Agrega una variedad de características que los usuarios pueden aprovechar. Cada rol de usuario tendrá diferentes opciones disponibles y el administrador del sitio puede agregar o eliminar funciones de roles específicos.

    Al crear o editar biografías de autores existentes en la parte inferior de las publicaciones, puede cambiar la imagen a un borde redondeado. El complemento es una excelente adición y puede brindar a los usuarios más opciones de personalización en general.

    Nota: este complemento no redondeará las imágenes de Gravatar del autor en la sección de comentarios de WordPress.

    Cuidado al cambiar de tema

    Si es la primera vez que agrega CSS personalizado a su sitio web, es posible que no sepa que el área de CSS adicional es específica del tema.

    Esto significa que si cambia su tema, el código que agregó ya no funcionará ni aparecerá. El ejemplo anterior es genérico para trabajar en la mayoría de los temas modernos. Sin embargo, aún deberá agregarlo nuevamente a su nuevo tema si cambia.

    En muchos casos, algunos CSS no funcionarán en otros temas porque requieren elementos que pueden no existir o pueden tener un nombre diferente. En estos casos, tendrás que estudiar tu nuevo tema y descubrir el nombre propio de los elementos.

    Una buena manera de hacerlo es utilizar las herramientas de inspección de su navegador web. Estos pueden ayudarlo a identificar todos los nombres de elementos en uso en una página.

    De lo contrario, tendrá que revisar todo el código en el back-end de su sitio web.

    El diseño de su sitio web depende de usted

    Hay innumerables guías de diseño de sitios web y ninguna de ellas es perfecta. Las opciones de diseño del sitio web dependen completamente de los desarrolladores web, pero siempre debe escuchar los comentarios de sus visitantes.

    Tú eres el que crea, mientras que ellos son los que experimentan y, a veces, la experiencia no es divertida. Por lo tanto, es necesario realizar mejoras periódicamente.

    Cada sitio web, grande o pequeño, será rediseñado en algún momento. Algunos sitios web lo harán bien desde el principio, mientras que otros no y eso está bien. Lo importante es solucionarlo y abordar los comentarios lo más rápido posible.

    Un sitio web o negocio que no escuche las críticas y aborde los comentarios no durará mucho.

    ¿Por qué quería imágenes redondas de Gravatars en su sitio web de WordPress? ¿Hay otras formas que le gustaría usar?