Tutorial: crear una barra con los datos del autor

Si nuestro blog es unipersonal, es probable que no nos interese el siguiente tutorial. Pero si tenemos un en blog multipersonal, ya sea con una cantidad determinada de colaboradores  o abierto todo aquel que quiera colaborar (como éste), puede ser una buena idea mostrar de forma dinámica los datos del autor de la entrada actualizados al día.

Seguramente existe más de un plugin para realizar esto o algo por el estilo, pero como soy un fanático del hágalo usted mismo les voy a mostrar cómo hacerlo por código utilizando las mismas funciones de Wordpress.

Cabe aclarar que más allá del código php y html, seguramente cada uno necesitará adaptar un poco los estilos css a su theme. De todas formas sobre utilizar el theme por defecto de wordpress 2.9.2. La idea por supuesto es que tengan alguna idea de html, php y css, pero sino copiar y pegar el código final también vale. Comencemos entonces con el código:

Creemos primero el div que va a contener todo:

<!--div contenedor -->
<div id="author-data" >
</div>

Vamos a comenzar mostrando el gravatar del autor. Para eso vamos a utilizar la función «get_avatar()» que recibe el id del usuario y el ancho en pixeles del avatar, y retorna el código html listo para insertar. A su vez para obtener el id del autor usaremos la función «get_the_author_meta()» que nos servirá para obtener casi cualquier información acerca del mismo, recibe como parámetro el dato a recuperar. Una vez obtenido el código lo imprimimos:

echo get_avatar(get_the_author_meta('ID'),80);

Ahora lo segundo seria agregar un título con un enlace al sitio web del autor, para eso utilizaremos la función «the_author_link()» que imprime el nombre publico del autor como link a su sitio.

<h4>Acerca de <?php the_author_link(); ?>:</h4>

Si pensamos en el SEO y preferimos que el enlace sea nofollow (o sea que los bots como el de Google no lo considere). Podriamos hacer lo siguiente:

<h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>;" <?php the_author(); ?></a>/h4>

Como verán usamos la función «the_author()» que imprime el nombre publico del author y la función «the_author_meta()» para obtener el link de su web.

Ahora utilicemos nuevamente la función «the_author_meta()» pero para obtener su descripción:

<p><?php the_author_meta('user_description'); ?>
</p>

Si por cuestiones de diseño quisiéramos recortarla a no mas de una x cantidad de caracteres podemos usar la función «substr()» de php. Recibe la cadena a recortar, el punto de inicio y la cantidad de caracteres. Para recuperar la descripción usamos «get_the_author_meta()», como ya habrán deducido, cuando lo usamos con get_ adelante recuperamos el valor y cuando lo usamos sin el, directamente lo imprimimos. Por ejemplo si quisiéramos recortar la descripción a 140 caracteres:

<p>
<?php
//Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
echo substr( get_the_author_meta('user_description') , 0 , 140 );
?>
</p>

Ahora la idea va a ser mostrar la cantidad de post del autor (una pavada que hacemos con la función «the_author_posts()») pero que a su vez funcione como un link a la pagina con los post del author. Esta página en un blog con permalinks «bonitos» tendría la siguiente forma tu-dominio.com/author/el-autor/. Pero como dependiendo de la configuración, esto puede cambiar, vamos a obtener primero el link a la página con los posts del autor.

Para nuestra tarea vamos a hacer uso de la función «get_author_posts_url()» que recibe el id del autor y devuelve el link que mostramos. Para obtener el id, volvemos a usar la función «get_the_author_meta()»:

get_author_posts_url(get_the_author_meta('ID'));

Ya el link armado para mostrar todo lo que queríamos queda así:

<p>
Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" < <?php the_author_posts() ?> posts </a>
</p>

Para finalizar los datos a mostrar nos queda un detalle mas, los comentarios realizados por el autor. Dado que no existe (o más bien, yo no conozco) una función para obtener directamente la cantidad de comentarios de un autor, vamos a crear una, basándonos en el sql que Fernando me facilito tan amablemente hace un tiempo,que a su vez esta basado en el del plugin wordpress-plugin-nofollow-free:

//La idea es que esta función reciba el id del autor y devuelva la cantidad de comentarios que realizó.
function get_the_author_comments($author_id){
/*Obtenemos algunos datos del autor que vamos a necesitar*/
$nick = get_the_author_meta( 'nickname' , $author_id);
$username = get_the_author_meta( 'user_login' , $author_id);
$displayname = get_the_author_meta( 'display_name' , $author_id);
$email = get_the_author_meta( 'user_email' , $author_id);
/*Usamos el objeto global $wpdb (algo así como una interfaz de wp para acceder a la base de datos)*/
global $wpdb;
/*
Armamos un sql para que cuente la cantidad de registros (o sea comentarios) cuando
el id de usuario sea igual que el del autor, o cuando su email coincida con el campo comment_author_email o cuando su nombre de usuario o su nombre publico o su nickname coincidan con el campo comment_author.
*/
$sql = "SELECT COUNT(*) AS contador FROM " . $wpdb->comments . " WHERE " .
" user_id = $author_id " .
" or comment_author_email = '$email' " .
" or comment_author IN ('" . $displayname . "','" . $username . "','" . $nick . "')";
//retornamos el resultado
return  $wpdb->get_var($sql);
}

Debido al hecho de que si los comentarios del blog son abiertos al que quiera comentar, nos vamos a encontrar con un mismo usuario que comenta con 2 email y nombres distintos o 2 usuarios que comentan con el mismo nombre; el resultado de la función no siempre va a ser exacto. Pero dentro de todo funciona bastante bien.

Ahora vamos a insertarla en el archivo functions.php de nuestro theme para poder utilizarla. En nuestro código vamos a utilizarla así (insertándola en el mismo párrafo que la de los posts del autor):

<p>
Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" &gt; &lt;?php the_author_posts() ?&gt; posts &lt;/a&gt; | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
</p>

Todo nuestro código insertado dentro del div contenedor y puesto en forma de función por una cuestión de practicidad queda así:

<!--div contenedor -->
<div><?php
//le pongo show_author_data por ponerle un nombre
function show_author_data(){ ?>
<!--div contenedor -->
<div>
<?php echo get_avatar(get_the_author_meta('ID'),80); ?>
<h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>" ><?php the_author(); ?></a></h4>
<p>
<?php
//Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
echo substr( get_the_author_meta('user_description') , 0 , 140 );
?>
</p>
<p>
Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" > <?php the_author_posts() ?> posts </a> | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
</p>
</div>
<?php } ?>
</div>

Si al colocar ambas funciones en su archivo functions.php empiezan a saltarles errores diciendo que las cabeceras no se han podido enviar, lo mas probable es que hayan dejado saltos de línea o espacios por fuera de las etiquetas de php.

Por último vamos a agregar a la hoja de estilos de nuestro theme algunos retoques para embellecer nuestra barrita (por lo menos para que en Kubrick se vea bien):

#author-data {
color: #000000; /* o sea negro */
font-size: 14px;
background: #cccccc;
width: 100%;
margin: 10px 0px;
padding: 3px;
float: left;
/*si ponen lo siguiente su css no va a validar */
border-radius: 5px; /*para opera*/
moz-border-radius: 5px; /*para firefox */
webkit-border-radius: 5px; /*para safari y chrome*/
khtml-border-radius: 5px; /* para konkeror */
box-shadow: 2px 2px 5px #000000; /*para opera*/
-moz-box-shadow: 2px 2px 5px #000000;/*para firefox*/
-webkit-box-shadow: 2px 2px 5px #000000;/*para safari y chrome*/
-khtml-box-shadow: 2px 2px 5px #000000;/*para konkeror*/
}
#author-data .avatar {
margin: 4px;
float: left;
}
#author-data h4 {
font-size: 17px;
margin: 3px;
}
#author-data p {
margin: 0px;
padding: 4px;
}

En lo personal inserte la barrita arriba del título (llamando a la función show_author_data), pero cada uno colóquela donde quiera (siempre y cuando sea adentro del bucle).

Mi barrita en Kubrick se ve así (no se ve el gravatar porque al momento de tomar la captura me encuentro offline):

Para que funcione en Twenty Ten (el tema por defecto en wp 3.0) hay que armar una estructura un poco más compleja en cuanto a divs y css:

function show_author_data(){ ?>
<!--div contenedor -->
<div>
<div><?php echo get_avatar(get_the_author_meta('ID'),80); ?></div>
<div>
<h4>Acerca de <a rel="nofollow" title="web del autor" href="<?php the_author_meta('user_url'); ?>" ><?php the_author(); ?></a></h4>
<p>
<?php
//Con esto imprimimos los primeros 140 caracteres (a lo twitter) de la descripción
echo substr( get_the_author_meta('user_description') , 0 , 140 );
?>
</p>
<p>
Ha publicado <a title="otros posts del autor" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" > <?php the_author_posts() ?> posts </a> | Ha realizado <?php echo get_the_author_comments(get_the_author_meta('ID')); ?> comentarios
</p>
</div>
</div>
<?php } ?>

Y los css:

#author-data {
color: #000000; /* o sea negro */
font-size: 14px;
background: #cccccc;
margin: 10px 0;
padding: 3px;
float: left;
clear: both;
width: 100%;
/*si ponen lo siguiente su css no va a validar */
border-radius: 5px; /*para opera*/
moz-border-radius: 5px; /*para firefox */
webkit-border-radius: 5px; /*para safari y chrome*/
khtml-border-radius: 5px; /* para konkeror */
box-shadow: 2px 2px 5px #000000; /*para opera*/
-moz-box-shadow: 2px 2px 5px #000000;/*para firefox*/
-webkit-box-shadow: 2px 2px 5px #000000;/*para safari y chrome*/
-khtml-box-shadow: 2px 2px 5px #000000;/*para konkeror*/
}
#author-data #author-gravatar {
margin: 4px;
float: left;
margin: 4px -104px 4px 4px;
}
#author-data #author-info {
float: left;
margin: 0 0 0 104px;
}
#author-info h4 {
font-size: 17px;
margin: 2px;
padding: 0;
}
#author-info p {
margin: 2px;
padding: 4px;
}

El resultado es el siguiente:

Palabras Finales

Espero que algún valiente haya llegado hasta acá. La idea del tutorial no era tanto hacer la barrita en si, sino colaborar a que de a poco muchos empiecen a perderle el miedo al código y no sean tan plugin dependientes.

Además tenía tiempo queriendo colaborar con algún post para esta bodega de conocimiento que es AyudaWordpress. Espero les sea útil.

PD: para el que no entendió un pomo pero igual quiere la barrita acá la tiene en forma de plugin(eso si, en versión súper minimalista, no esperen panel de control, opciones, ni nada por el estilo).

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)