En este artículo, exploraremos cómo implementar el Cuadro de Autor en el tema GeneratePress, tanto en su versión gratuita como premium, en un sitio web de WordPress.

El Cuadro de Autor es una valiosa herramienta que nos permite mostrar información relevante sobre el autor de una publicación, lo cual es especialmente importante para mejorar las señales de Experiencia, Autoridad y Fiabilidad (Expertise, Authoritativeness, Trustworthiness) de Quality Raters de Google que utiliza Google para mejorar su algoritmo de búsqueda.

Antes de sumergirnos en los detalles de cómo agregar el Cuadro de Autor en GeneratePress Theme, es importante comprender por qué es tan relevante. Las señales EEAT mencionadas anteriormente son cruciales para el posicionamiento de su sitio web en los resultados de búsqueda de Google. La información del autor proporciona a Google una mayor comprensión de quién está detrás del contenido y por qué se debe confiar en esa persona.

Además de los aspectos técnicos de SEO, el Cuadro de Autor también humaniza su sitio web. Permite a los lectores conocer al creador detrás del contenido y establece una conexión más personal con ellos. La credibilidad y autenticidad de su blog se ven reforzadas con la inclusión de una biografía del autor.

Antes de agregar el cuadro de autor en WordPress activa tu gravatar

Antes de que la biografía del autor aparezca en el sitio de WordPress, es importante familiarizarse con Gravatar y la información biográfica.

Gravatar es un reconocido avatar a nivel mundial y forma parte de WordPress, siendo mantenido y respaldado por Automattic.

Para configurar Gravatar, simplemente debe seguir estos pasos:

1. Acceda al Panel de WordPress.
2. Visite el Menú de Usuarios.
3. Edite su perfil de usuario.
4. Vaya a la sección «Acerca de ti» y seleccione «Imagen de perfil».
5. Haga clic en «Puede cambiar su imagen de perfil en Gravatar».
6. Será redirigido al sitio web de Gravatar, donde puede iniciar sesión o registrarse con las credenciales de WordPress.com.
7. Autorice su cuenta de WordPress con Gravatar.
8. A continuación, diríjase a la sección «Agregar una nueva imagen» y cargue su foto.
9. Califique su Gravatar eligiendo entre las opciones G, PG, R y X.
10. ¡Listo! Su perfil de Gravatar está configurado. Vuelva a la sección «Acerca de ti» en WordPress y verá su foto de perfil.

Una vez configurado, su imagen de perfil de Gravatar se mostrará al comentar en sitios de WordPress, en la biografía del autor y en los foros de WordPress, funcionando para todos sus perfiles en la plataforma. Es importante tener en cuenta que tanto Gravatar como la información biográfica son utilizados por el sitio web de WordPress en ciertos casos, lo que ayuda a enriquecer la experiencia del lector y aumentar la credibilidad del contenido y del autor.

Implementación del Cuadro de Autor en GeneratePress Theme

Para implementar el Cuadro de Autor, hay dos métodos principales que podemos seguir: el uso de complementos o el método de Hooks en la versión Premium del tema.

Existen varios complementos disponibles en el repositorio de WordPress que pueden ayudarnos a agregar fácilmente el Cuadro de Autor a nuestras publicaciones. Algunas opciones populares son:

• Cuadro de Autor Simple (Simple Author Box): Este es un complemento sencillo pero efectivo que nos permite personalizar el diseño de la caja de autor y agregar hasta 30 perfiles de redes sociales.

• Starbox: La Caja de Autor para Humanos (Starbox Author): Este complemento es altamente recomendado por el equipo de soporte de GeneratePress para los usuarios de la versión Premium.

• La caja elegante para autor (Molongui Authorship): Este plugin incluye una única plantilla en la versión gratuita, pero siete diseños más en la premium. Lo que más me gusta de Molongui Authorship es que se puede modificar su aspecto desde el personalizado de la plantilla de tu web. Por supuesto, permite personalizar todos sus elementos (nombre, avatar, descripción, botones sociales) y también el diseño (fondo, borde, sombra, etc).

A destacar de esta opción que con ayuda de algún plugin simple de Hooks puedes añadirlo en cualquier tema.

En la versión Premium del tema GeneratePress, podemos optar por utilizar el método de Hooks para agregar el Cuadro de Autor sin necesidad de instalar un complemento adicional. A continuación, se describen los pasos para hacerlo:

Activar el Módulo de Elementos:

Primero, necesitamos acceder al Módulo de Elementos en GeneratePress para poder utilizar Hooks.

Luego, debemos agregar un nuevo gancho en los elementos de GeneratePress.

Elegimos el tipo de elemento como HOOK . Asigne el nuevo título como cuadro de autor.

Utilizar el Código PHP:

Pegue el código PHP proporcionado para agregar el Cuadro de Autor.

Ahora es cuando podemos añadir nuestro código al Hook para crear nuestro cuadro de autor, yo te voy a proporcionar tres básicos con sus correspondientes CSS para que solo tengas que copiar y pegar. Solo tienes que elegir uno de los tres o modificarlos a tu gusto.

Primer Código:

<div class="author-box">
    <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
    
    <div class="author-summary">
    
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        <div class="author-links">
 
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
 
        </div>
 
    </div>
 
</div>

Segundo Código:

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </h5>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
       </div>
    </div>
</div>

Tercer código:

En este código he ampliado la caja con varias cosas:

• He añadido enlaces con iconos a las redes sociales
• He modificado el aspecto y la posición de la foto

<div class="author-box">
    <div class="avatar-container">
        <div class="avatar">
            <?php echo get_avatar( get_the_author_meta( 'ID' ), 150 ); ?>
        </div>
    </div>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </h5>
    </div>
    <div class="author-summary">
        <div class="author-description"><?php echo wpautop( get_the_author_meta( 'description' ) ); ?></div>
    </div>
    <div class="author-links">
        <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="Read more"><i class="fas fa-ellipsis-h"></i></a>
        <a href="https://twitter.com/tuperfil" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="https://www.linkedin.com/in/tuperfil/" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
    </div>
</div>

Como ves es muy fácil modificarlo para crear tu caja de autor personalizada.

Una vez copiado y pegado el código PHP tienes que bajar y rellenar los datos como te indico en la foto. El lugar donde mostrarlo, después del contenido (after_content), marcar la casilla de Ejecutar PHP y darle como prioridad 20.

Después has de asignar en que publicaciones quieres mostrarla, normalmente en los posts.

Personalizar con CSS:

Puede utilizar CSS para dar estilo al Cuadro de Autor y ajustarlo al diseño de su tema.

Ahora llega el CSS con todas sus variante, puedes poner sombras, imágenes cuadradas o en círculo, dentro o fuera de la caja. Imaginación al poder….

Código CSS opción 1:

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

Código CSS para segunda opción:

.autor-box {
	relleno: 3%;
	parte inferior del relleno: 10px;
	margen superior: 30px;
	tamaño de fuente: 0,9 em;
	color de fondo: #fff;
	pantalla: -webkit-caja;
	pantalla: -ms-flexbox;
	pantalla: flexible;
	-webkit-box-align: centro;
	-ms-flex-alinear: centro;
	alinear elementos: centro;
        sombra de caja: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.autor-box .avatar {
	ancho: 250px;
	altura: automático;
	borde-radio: 100%;
	margen derecho: 30px;
}
h5.autor-título {
	margen inferior: 0,1 em;
	peso de fuente: 600;
}
.autor-descripción {
	altura de línea: 1.6em
}
.autor-enlaces a {
	margen superior: -1,5em;
	tamaño de fuente: 2em;
	altura de línea: 2em;
	flotador izquierdo;
}
@media (ancho máximo: 768px) {
	.autor-box {
		relleno: 20px;
		relleno inferior: 25px;
		margen superior: 60px;
		dirección de flexión: columna;
		alineación de texto: centro;
	}
	.autor-box .avatar {
		margen derecho: 0;
		ancho: 100%;
		margen superior: -25px;
	}
	.autor-box .avatar img {
		ancho máximo: 100px;
	}
	.autor-enlaces a {
		flotante: ninguno;
		alinear-auto: centro;
	}
	.autor-descripción {
		margen inferior: -0.1em;
	}
}

Código CSS para personalizar la 3º opción:

.author-box {
    position: relative;
    padding: 3%;
    margin-top: 50px;
    font-size: 0.9em;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.author-box .avatar-container {
    position: absolute;
    top: -25px;
    left: 5%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); /* Agregamos sombra a la imagen */
}

.author-box .avatar {
    width: 100%;
    height: 100%;
}

.author-box .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.author-box .author-info {
    flex-grow: 1;
    flex-basis: 100%;
    margin-top: 110px;
}

.author-box .author-summary {
    margin-bottom: 20px;
}

.author-box .author-links {
    margin-top: 10px;
}

.author-box .author-links a {
    font-size: 2em;
    line-height: 2em;
    margin-right: 10px;
    color: #333;
}

.author-box .author-links a:hover {
    color: #007bff;
}

@media (max-width: 768px) {
    .author-box {
        padding: 20px;
        padding-bottom: 25px;
        margin-top: 60px;
        flex-direction: column;
        text-align: center;
    }
    .author-box .avatar-container {
        width: 100px;
        height: 100px;
        margin-top: -25px;
    }
    .author-box .avatar img {
        max-width: 100%;
    }
    .author-box .author-info {
        margin-left: 0;
    }
    .author-box .author-links a {
        float: none;
        display: block;
    }
    .author-description {
        margin-bottom: -0.1em;
    }
}

¿Donde colocar el CSS de la caja de autor personalizada?

Tienes varias opciones, desde hacerlo en tu archivo style.css de tu tema hijo, GeneratePress Child a la más sencilla y menos peligrosa, añadirlo en la parte de personalización de CSS adicional.

Qué encontrarás en Apariencia>Apariencia>CSS Adicional

Pegas y le das a publicar y te olvidas, tambien desde alli puedes hacer cambios y verlos en vivo sin perder mucho tiempo.

Opinión personal

Creo que es una buena opción para darle un aire diferente a tu web y mejorar el EEAT como comentábamos al principio sin necesidad de añadir más plugins que hacen más lento y pesado tu wordpress. Pero como en todo esto va ha gustos así que tu decides.