Dar estilo a la información sobre el autor de una entrada al final de ésta

Habitualmente encontramos sites donde al final del post se muestra una caja con información sobre el autor: su imagen (Gravatar), su nombre, una pequeña reseña biográfica… así como, por ejemplo, la cantidad de artículos que ese autor haya publicado en el site.

Hoy veremos la forma de mostrar todo ello, y proporcionaremos algunos estilos en CSS que nos ayuden a crear los nuestros propios.

Marcelo escribió hace un tiempo sobre el tag fundamental que nos traerá las informaciones de la base de datos, es decir, de la pantalla de información sobre el autor que podemos editar en la Administración de WordPress una vez estamos registrados en el site, y donde podemos rellenar los campos de “Biografía”, “URL”, “Gravatar”, e-mail, etc.

Hoy trataremos pues la parte del CSS para tener el conjunto en una estructura que será fácilmente modificable. Empecemos:

<div id="info-autor">
	<div id="imagen-autor">
		<a href="**Web del Autor**">**Gravatar del Autor**</a>
	</div>
	<div id="bio-del-autor">
		<h4>Escrito por <a href="**Web del Autor**">**Nombre del Autor**</a></h4>
		<p>**Descripción del Autor**</p>
	</div>
</div><!--Infos Autor-->

En el código vemos los distintos elementos que deberemos transformar en PHP para que sean efectivos.

Añadamos pues el PHP necesario:

<div id="info-autor">
	<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="bio-autor">
		<h4>Escrito por <?php the_author_link(); ?></h4>
		<p><?php the_author_meta('description'); ?></p>
	</div>
</div><!--Info Autor-->

Y preparemos ahora el CSS que dará formato al resultado final :

div#author-info {
	background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: auto;
}
div#author-info div#author-image {
	float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
}

Tan sencillo como esto.

Repasemos todos los tags de PHP que hemos utilizado:

<?php the_author_meta('user_url'); ?>

Sirve para extraer varias porciones de información acerca del usuario (autor).

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>

Sirve para extraer la imagen del autor, en función del Gravatar asociado a su cuenta de correo electrónico (que debe coincidir con la registrada en WordPress).

<?php the_author_link(); ?>

Imprime el nombre del autor, automáticamente enlazado a su web (la que haya indicado en su perfil).

<?php the_author_meta('description'); ?>

Muestra la principal información biográfica.

Esperemos que uséis todos estos trucos y creéis unos estupendos sites multi-autor con WordPress.

Comentarios
  1. hanss1982

    No se por qué no me funciona lo de el estilo css. Lo pego en mi hoja de estilo css y no me funciona.

    Agradezco si me asesoran que estaré haciendo mal.

    Muchas gracias

    Escrito el19/02/2010
  2. Hola Hanss, me acabo de dar cuenta de que la id del ejemplo en el HTML es distinta de la del CSS… sorry !! en ambos sitios debe ser, lógicamente, la misma, prueba de pastear en tu css los estilos así :

    #info-autor{ blah blah }

    en vez de #autor-info.

    Escrito el19/02/2010

DEJA TU COMENTARIO