Cuadro de autor en generatepress

Cómo añadir un cuadro de autor a GeneratePress

El theme GeneratePress no tiene de serie la opción de añadir un cuadro de autor al final de los posts. Mucha gente instala un plugin para añadir esta funcionalidad a WordPress. No obstante, a través de Elements de GeneratePress añadir información del autor de un post es muy sencillo. A continuación te cuento los pasos a seguir.

Tener la ficha de usuario al día

Esto significa que en el apartado de usuarios de WordPress debemos tener la información actualizada. Sobre todo el nombre y la descripción. Además es altamente recomendable tener una imagen de usuario a través del sistema gravatar.

Creemos un hook a través de la sección Elements

Una vez creado el nuevo hook podemos añadir el siguiente código. Este código incorpora el avatar, el nombre y la descripción del autor. Además podríamos añadir otros campos relacionados con las redes sociales. Si lo ves interesante sólo me lo tienes que decir y ampliaría el post.

<div class="caja-autor">

   <?php 
      global $post;
       $author_id = $post->post_author;
   ?>
	
   <div class="grid-10 tablet-grid-10 mobile-grid-100 first-column">
      <div class="avatar"><?php echo get_avatar( get_the_author_meta( $author_id ));?></div>
   </div>

   <div class="grid-90 tablet-grid-90 mobile-grid-100 second-column">
     <h5 class="author-title"><?php printf( 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>
   </div>

</div>

En este trozo de código hemos añadido la clase de columnas que viene por defecto con GeneratePress. Lo hemos hecho para separar con dos columnas el contenido. En una ponemos la imagen (en este caso he decidido que ocupe el 10% del ancho total), y en la otra columna ponemos el nombre del autor y la descripción (en este caso hemos decidido que ocupe el 90% de ancho de la caja del bloque). Puedes encontrar más información sobre columnas de GeneratePress pulsando este enlace.

Después de este primer paso debemos marcar la opción de ejecutar php y decidir donde queremos que se muestre. En este caso me gustaría que se muestras entre el post y los comentarios, con una caja entre estos dos elementos. Así en el desplegable escogemos before_comments_container.

A continuación tendremos que ir a la pestaña display rules (reglas de visualización) y decidir donde queremos que aparezca la caja de autor creada. En mi caso quiero que se muestre al final de cada entrada. Por lo tanto tendré que seleccionar a Locations, entrada.

Modificamos el aspecto visual de la caja de autor a través de CSS.

Ya está todo funcionando y todo esta correcto. Ahora podemos modificar la apariencia estética de la caja creada. En mi caso he añadido el siguiente código CSS.

/*Personalización caja autor*/

.caja-autor {
   display: flex;
   background-color: #ffffff;
   padding: 40px;
}

.avatar {
   width: 100%;
   border-radius: 100%;
}

.author-title{
   font-weight: 600;
   font-size: 18px;
}

Recuerda que puedes jugar con los estilos CSS y darle el aspecto que tú desees. Por ejemplo añadiendo un color de fondo diferente, modificando tamaños de las letras …

Video tutorial de cómo añadir un cuadro de autor a GeneratePress

Alternativas si no se muetra la imagen

A veces hay problemas para que se vea correctamente la imagen de autor. En estos casos podéis probar de subsituir la siguiente línia:

<div class="avatar"><?php echo get_avatar( get_the_author_meta( $author_id ));?></div>

Por esta:

<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'user_email' ));?></div>

A ver que tal!

10 comentarios en «Cómo añadir un cuadro de autor a GeneratePress»

  1. Hola, he seguido los pasos tal cual y todo está bien salvo que no se ve la foto de autor que tengo configurada en mi perfil. ¿Sabes si hay que tocar algo en el código para que muestre la imagen de gravatar?

    Gracias.

    Responder
  2. Poniendo la linea que me has pasado si sale la imagen perfectamente.

    Lo que molaría mucho sería poder poner los enlaces a las redes sociales (como comentas en el post).

    Yo ya estaba tirando de plugin para hacerlo, pero la verdad prefiero hacerlo así.

    Muchas gracias por tu ayuda!

    Responder
    • Hola Ricardo,

      Tendrías que añadir un poco más de código. Básicamente imagenes de los iconos y enlaces a las redes correspondiente. Puedes ver un ejemplo en .

      Un saludo

      Responder

Responder a Guillem Cancelar la respuesta

Identifícate