Como Construir una Author Box en WordPress

julio 27, 2009 • Tutoriales, WordPress

Cuando se tiene un blog con multiples escritores ya sea a pago o como colaboradores, una buena forma de agradecer el contenido que aportan estos es mostrar los datos (blog, avatar, que hacen, quienes son) de los autores del blog en sus posts mediante una Author Box.

Una caracteristica que ya es casi un estandar en los themes premium, pero que pasa si tú no tienes un theme de este tipo y quieres hacer lo mismo, a continuación la forma de insertar una Author Box en tu theme WordPress:

Creando la Author Box

Sinceramente tengo que decir que aquí varia de acuerdo a la versión de WordPress que uses, debido a las Template Tags que van añadiendo con cada actualización, si usas una versión vieja de WP (2.7 para abajo) esta es la forma de hacerlo:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class="authortext">
<h4>Escrito por <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p>
</div>
</div>

Si en cambio estas al dia con tu instalación, vamos, tienes instalada la versión 2.8 para arriba, puedes utilizar el código que yo uso, de esta forma:

<div id="authorbox">
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '70' ); }?>
<div class=authortext">
<h4>Escrito por <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('display_name'); ?></a></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
</div>

Veran que sólo cambian las Template Tags, pero si no usas el método de acuerdo a tu instalación esto hará que desaparezca parte de tu blog al cortarse la ejecución de código en tu template.

Estilizando la Caja de Autor con CSS

Bueno ya esta puesto el armazón vamos a ponerle una bonita fachada d esta forma, el CSS que pondré es el que yo uso con Renovatio, pero ustedes pueden modificarlo a sus necesidades:

/* Estilos CSS para su Caja de Autor */
#authorbox{ background: #EFEFEF; border: 1px solid #CECFD0; width: 560px; margin: 0 auto; margin: 10px 0 10px 0; overflow:hidden; min-height: 115px; height: auto !important; height: 115px; }
#authorbox h4{ font-size: 16px; color: #191919; margin:0; padding: 10px 10px 5px 10px; }
.authortext{ padding: 0 20px 0 100px; }
#authorbox img{ margin: 10px; padding: 0px; float: left; border: 5px solid #ccc; }
#authorbox p{ color: #191919; margin: 0; padding: 0px 10px 10px 10px; }
#authorbox p a { color: #191919; }

Listo eso es todo, no obstante si quieres algo más completo echale un vistazo a la  Author Meta Tag de WP, y puedes implementar más información mediante parrafos dandoles una clase y luego alinearlos con CSS o separando los datos mediante la etiqueta &nbsb, por cierto el demo del resultado de este tutorial pueden verlo abajo de este post.

También te puede interesar:

• Ajustando el CSS de los nuevos comentarios de WordPress 2.7 (4)
• 3 tecnicas para hacer tu sidebar WordPress unica (6)
• ¿Como deberian ser los WordPress themes? (6)
• Titulos SEO en WordPress sin usar plugin (7)
• Resaltar comentarios del admin o autor en WordPress (5)

Escrito por Esteban Rojas

Blogger radicado en México, fundador de Kernel Web, autodidacta, fanático de WordPress, por el momento estudiando el bachillerato, luego ya veremos.

Compartelo

• 
• 
• 
• 

Etiquetas: CSS php Themes WordPress