CSS

Ξ 10 comentarios

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

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

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.

toolsImplementos 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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

10 Comentarios

  • [...] El enlace al completo manual confeccionado en el sitio CLH dándole clic a la siguiente dirección: Crear un cuadro de información en WordPress. [...]

  • Hola que tal, primero que nada felicitarlos por el excelente trabajo que realizan.
    Y ahora unas dudas que tengo jeje, he agregado el codigo htlm y php en el archivo single.php , hasta ahi todo bien aparece la info y todo, y el codigo css dentro del archivo style.css, el problema es que aun no tiene estilo se queda en simple html, entonces supongo que el problema es el modo que inserto el css, tu que opinas Xabadu??

  • @Adrianmb: Si la estructura te aparece bien, pero no hay estilos, el problema está en el CSS. Ojo con que no estés sobreescribiendo id’s o clases que ya existan.

    Saludos!

  • Ya encontre el error, era que en el html tenia <div id=”cuadro-info”> y en el css div#info-autor{}, por lo que cambie a <div id=”info-autor”> y listo. Lo habia copiado directo como se encuentra aqui ;)

  • Buenas, la verdad es que me estoy iniciando en wordpress y me gustaria saber en que parte va cada codigo que pusiste, gracias :D

  • muy buen aporte para todos los que usamos WP.
    los dejo invitados a que coonozcan mi web.
    FELICITACIONES!!!

  • Gran Post, una duda, ¿se puede hacer esto mismo en Blogger?, de antemano muchas gracias

  • no lo puedo creer que sea lo maximo

  • cool

  • Hi i am a 24 year old man looking for any job in mining that u can offer me,i have N1-N3 in mining,my cell phone number is 0730121459,i am looking forward to ur response.
    [url=http://www.beauty-jewelry.nl/bulgari-serpenti-tubogas-watch-yellow-gold-single-helix-with-diamonds-sp35c6gdg1t-replica-p567/]bvlgari serpenti watch steel replica[/url]



Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos