Es común que cuando tenemos múltiples autores escribiendo en un sitio, querramos mostrar la información del responsable de cada artículo para que los usuarios puedan conocer quien está detrás de cada cosa que se escribe. Si bien en CLH en un principio optamos por no mostrar la información, y luego hacer una pequeña referencia al comienzo de cada artículo, eventualmente hemos llegado al punto de incluirlo (principalmente por Dexter, que quiere ser famoso 🙁 )

En la búsqueda de alternativas, dimos con varios plugins que ayudan a automatizar la tarea, pero nada que nos satisfaciera por completo en cuanto a diseño y personalización. Luego de analizar el tema más a fondo fue posible darse cuenta que armar un cuadro de información desde cero no es una tarea compleja, y si entrega una gran flexibilidad para el armado, por lo que echamos manos a la obra y hoy, en un sencillo y rápido tutorial, les enseñaremos el proceso paso a paso.

El detalle, como siempre, después del salto.

Cómo crear un cuadro de información de autores en WordPress

Antes de todo, como siempre:

Detalles del tutorial

• Tiempo aproximado de implementación: 10 minutos.
• Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).
• Conocimientos previos requeridos: Entendimiento de HTML, CSS, PHP y las funciones de WordPress.

Implementos necesarios:

• Un sitio con WordPress.

Procedimiento:

La implementación de un cuadro de información de autores, cuenta con varias partes:

• Código HTML para crear el cuadro.
• Código CSS para estilizarlo.
• Código PHP para insertar las funciones de WordPress.

Así que vamos, a implementar:

Código HTML

Con esto armaremos la estructura de nuestro cuadro de información de autores, el esqueleto por ponerlo de alguna forma. En el, incluiremos principalmente 3 cosas:

1. Imagen del autor.
2. Información del autor (nombre y sitio Web).
3. Bio del autor.

Para verlo de forma más gráfica, armaremos algo de la siguiente forma:

Como podemos ver, no es demasiado complejo. Desarmando esa imagen es posible apreciar que necesitamos un Div para el cuadro completo que debe contener a su vez 2 Div’s: Uno para la imagen del autor y una para la bio e información del autor. Así que viendo esto en código, sería algo de la siguiente forma:

<div id="cuadro-info">
   <div id="imagen-autor">
        Aqui iría la imagen del autor
   </div>
   <div id="info-bio-autor">
       Aquí iría la información y bio del autor
   </div>
</div>

Vamos viendo. En el código anterior está claro que irá contenido dentro de cada Div, por lo que rellenarlo es bastante sencillo. Podríamos agregar una etiqueta para imágenes y luego abajo escribir el texto que querramos que aparezca. Sin embargo, ¿qué pasa si tenemos múltiples autores?, o más bien ¿cómo le decimos a WordPress que incluya la información del autor del artículo y no de otra persona?. Ahí es donde entran las funciones de WordPress.

Código PHP

Afortunadamente, WordPress trae funciones incorporadas que nos permiten referenciar de manera muy sencilla la información de un autor en particular y relacionarla al artículo desde donde se está haciendo la llamada. Así, si Dexter escribe un artículo, aparece el cuadro con la información de Dexter, pero si el artículo lo escribe Topher, aparecerá su información, ya que WP sabe diferenciar de acuerdo a la ID de cada artículo y recupera los datos en base a eso.

Así que, listando, la información que debemos rescatar es:

• Imagen del autor.
• Su nombre o pseudónimo.
• Un enlace a su sitio Web.
• Su bio.

Si se fijan, los 3 últimos parámetros están incluidos en el perfil de cada autor en WordPress, por lo que es sumamente sencillo recuperarlos. Ahora, el primero, correspondiente a la imagen es un poco más complejo, ya que el perfil en si no está asociado a ninguna imagen.

¿La solución?, WordPress incluye una función que nos permite referenciar el gravatar asociado a la cuenta de correo del autor. Así que si el autor tiene un gravatar, este será mostrado en el cuadro.

O sea, en base al listado anterior, llamaremos a las siguientes funciones de WordPress:

• get_avatar( ), entregando como parámetro la función the_author_meta y como parámetro a esta última user_email.
• the_author_link( ), sin parámetros.
• the_author_meta( ) , entregando como parámetro user_url.
• the_author_meta( ), entregando como parámetro description.

Donde:

La función get_avatar nos permite recuperar el gravatar asociado a una cuenta de correo. Por eso pasamos como parámetro el correo electrónico del autor del artículo.

La función the_author_link nos entrega el nombre o pseudónimo del autor, enlazado a una enumeración de todos los artículos que ha escrito en el sitio.

La función the_author_meta nos entrega información relacionada al autor del artículo, dependiendo del parámetro enviado, por eso al enviar user_url nos entrega el sitio Web asociado a la cuenta del autor, y si enviamos description nos entrega la bio que está en su perfil.

Así que con eso, el código quedaría de la siguiente forma (incluyendo el HTML anterior):

<div id="cuadro-info">
   <div id="imagen-autor">
     <a href="<?php the_author_meta('user_url'); ?>">
    <?php echo get_avatar( get_the_author_meta('user_email'), '80', '' );
      ?>
     </a>
   </div>
   <div id="info-bio-autor">
       <h4>Escrito por <?php the_author_link(); ?></h4>
       <p><?php the_author_meta('description'); ?></p>
   </div>
</div>

Como pueden ver, hicimos uso de las funciones destacadas anteriormente para rescatar el gravatar del autor, su nombre, sitio Web y bio del perfil.

Ahora, si se fijan, hay un parámetro que incluimos en la función get_avatar que no indicamos anteriormente, el cual tiene un valor de 80. Este parámetro corresponde al tamaño de la imagen. Como los avatars son cuadrados, este valor se toma como ancho y alto de la imagen, la cual en este caso será de 80 pixeles.

Con eso ya tenemos nuestro cuadro armado en estructura y con la información del autor mostrándose, pero probablemente si lo vemos en el navegador, se verá desordenado y bastante horrible, ya que no hemos estilizado nada. Eso, precisamente, será nuestro próximo paso:

Código CSS

Mediante CSS vamos a encargarnos de posicionar los elementos dentro de cada bloque y de estilizar para hacerlo más agradable a la vista. El código que entregamos aquí es referencial, de acuerdo a lo que utilizamos para los cuadros de este sitio, así que siéntanse libres de modificar de acuerdo al estilo de su sitio:

div#info-autor {
 background: #f7f7fa; padding: 10px;
 margin: 0 0 15px 0;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 overflow: auto;
}
div#info-autor div#imagen-autor {
 float: left;
 margin: 0 10px 5px 0;
 border: 3px solid #626263;
}
div#info-autor div#imagen-autor a img{
 border: none;
}
div#info-autor p{
 text-align: justify;
 font-style: italic;
}
div#info-autor h4{
 font-weight: bold;
 padding-bottom: 5px;
 color: #403f3a;
 letter-spacing: -1px;
 line-height: 1em;
 font-size: 18px;
}

Algunos detalles a tener en consideración:

• La propiedad border-radius (-moz-border-radius para Firefox y -webkit-border-radius para navegadores basados en Webkit), corresponde a CSS3, por lo que navegadores más antiguos o algunos modernos que no soporten CSS3 por completo (IE) no desplegarán correctamente el efecto. ¿Qué efecto se preguntarán?, esquinas redondeadas para los bloques.
• Los últimos 2 bloques de código (para párrafos y para encabezados h4) los incluímos para que el estilo fuera distinto al que por defecto tiene la hoja de estilo en otros sectores del sitio. Sin embargo, esto es opcional.

Y con esos ajustes de CSS tenemos terminado nuestro cuadro de información de autores. ¿Se preguntan como queda el resultado? Fácil de ver, siguiendo más abajo, luego de la calificación del tutorial pueden verlo completamente implementado.

Nuevamente, los parámetros tanto de estilo como de estructura, son los que utilizamos acá. Si quieren armarlo de forma distinta, o posicionar y estilizar de manera más acorde a su sitio, no tengan miedo en jugar con el código. Esa es la base, pero todo lo que se puede lograr depende de cada uno 🙂

Por ahora, les recordamos que como siempre este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.