Como crear una sección de autor en Wordpress

Publicado en 10. Dic, 2009 por Luis Lopez Garay in Blogging, Tutoriales

Aprende como crear una Sección de Autor en Wordpress usando código PHP y CSS. Aunque también te muestro un plugin muy útil para ahorrarte escribir o copiar y pegar código sin saber a lo que le tiras (no hay riesgo alguno pero me gusta dramatizar). El tutorial fue creado por Chris Spooner y lo vengo a exponer acá con ánimos de que lo seguirán y crearan su sección de autor.

Tengo que suponer dos cosas, la primera es que si visitas blogs como este y como otros te darás cuenta de que muchos traen hasta abajo o debajo de la descripción general del articulo, un espacio donde se muestra la foto, información biográfica y algún vinculo de utilidad sobre el autor de dicho articulo. También supongo que si estas aquí es porque quieres tener algo similar en tu blog. Pues hoy te tengo dos maneras de crear la llamada “Sección de Información del Autor” también llamada en gringo “Author Information Section”. La primer manera es siguiendo un fácil tutorial (copy paste de código y algunas modificaciones propias al gusto) que nuestro amigo Chris Spooner de Line25 y Spoon Graphics (si no han visitado esos blogs no son nada) compartió hace un tiempo y que apenas descubro, nos coloca trozos de código para que fácilmente coloquemos una sección así en el espacio que nos plazca. La otra manera es algo mas fácil, basta con bajar un plugin para Wordpress que simplemente añade una sección donde pongas su código y listo, lo tendrás sin esfuerzo alguno. Te invito a revisar las dos maneras y a que crees tu propia sección.

Para que esto funcione tienes que llenar los campos correspondientes en tu perfil, el perfil se encuentra en tu panel de administración en la esquina superior-derecha.

Esto es para que las llamadas PHP que hace esta sección tenga algo que mostrar, lo que se muestra regularmente es el Gravatar (imagen de gravatar.com que se muestra según tu dirección de correo electrónico, si no tienes una ve a gravatar.com, regístrate con tu email y sube tu imagen, ese email tendrás que ponerlo en tu información de contacto), el Sitio Web como enlace bajo tu nombre, la biografía y si es posible tu correo u otra información.

Tutorial de Chris Spooner

Este tutorial es muy fácil de seguir y queda bien de hecho, yo lo use y se puede ver hasta abajo del articulo, sin embargo no me salió como pensaba, todo esta en el CSS para que se vea bien.

Así es como el autor hizo que quedara, aunque claro se puede cambiar.

Paso 1 – El CSS o Estilo

Primero lo primero, se suponía que primero teníamos que maquetar el HTML pero me parece imperativo empezar con el CSS, dirígete a tu panel de administración y localiza Apariencia > Editor, ahí fíjate del lado derecho hasta abajo dice en negritas “Estilos”, ahí busca Hoja de Estilos (Style.CSS) y añade la siguiente línea de código donde mas te guste.

#main 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;
}
	#main div#author-info div#author-image {
		float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
	}

Para explicarlo mejor vamos de arriba a abajo, el primer estilo se lo aplica al contenedor (DIV) de la información, este crea un recuadro del tamaño del ancho del espacio para el articulo, primero le pone un fondo de color #eaeaec el cual es una especie de gris claro como el de la imagen de arriba, aunque puedes poner el que mejor le fije a tu blog, luego se de la un borde redondeado con un borde de ocho pixeles. Después tenemos el estilo aplicando a la imagen del autor contenida, el cual lo alinea a la izquierda y se le da un borde grueso (5 pixeles) con un color #DCDCE1.

Paso 2 – Poner el código en los Artículos

Sin duda en estilo no basta, aun no hemos puesto el contenedor en la mejor parte de nuestro articulo, tengo entendido que se puede colocar arriba del contenido (abajo del titulo, antes de que el lector lea el articulo) y abajo del articulo (cuando el lector llega al final del articulo) según tus necesidades de muestreo, a continuación busca en el editor de apariencia donde agregaste el código CSS un lugar donde dice Plantillas, ahí veras muchos archivos, entre ellos Entrada Individual (Single.php), dale click a ese archivo y busca una línea que dice <?php the_content(); ?>, ahí tu decides si lo pones arriba de esa línea o abajo de esa línea, yo y la mayoría lo tienen debajo de esa línea para que se muestre al final del articulo, el código que tienes que insertar es:

<div id="author-info">
    <div id="author-image">
    	<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
    </div>
    <div id="author-bio">
        <h4>Written by <?php the_author_link(); ?></h4>
        <p><?php the_author_meta('description'); ?></p>
    </div>
</div><!--Author Info-->

Para esto tratare de ser claro, todo el codigo encerrado en un DIV previamente estilizado en CSS como un recuadro de color gris claro de fondo y con bordes ligeramente redondeados, nos dice primero un pequeño contenedor donde irá la imagen o Gravatar del autor añadiendo un enlace con una llamada PHP que hace referencia a la pagina web del autor, y como imagen se busca un Gravatar correspondiente al correo electrónico del autor, y el tamaño del Gravatar se estableció como 80, cosa que se puede cambiar. Así que si alguien da clic en la imagen del autor sera llevado directamente a la pagina web del autor.

Ahora vamos con las etiquetas que se usaron, una por una y su función:

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

Esta etiqueta despliega la pagina web o URL del perfil del autor de la entrada en la que estés, ideal para meter en enlaces o Gravatars.

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

Esta etiqueta obtiene buscando en la base de datos de Gravatar, la imagen correspondiente a la cuenta del autor según su correo electrónico, y la despliega del tamaño que desees, en este caso es 80 pixeles de lado.

<?php the_author_link(); ?>

Ahora, este etiqueta muestra tanto el nombre del autor tanto como enlaza a la pagina web de este.

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

Lo ultimo en nuestra sección fue mostrar la descripción del autor, lo cual no es mas que la biografía que escribe un usuario en su perfil, mostrado en una imagen mas arriba, es la etiqueta mas importante, así se conoce al autor detrás del gran articulo.

Llevando la idea mas allá

Pues si no mal recuerdo hay muchas etiquetas sobre el autor en el maravilloso y vasto “Codex de Wordpress” que se pueden usar para expander esta sección a tu modo muy personal, se pueden añadir botones, mas enlaces o algo que salga de tu creatividad propia de ti.

Algunas etiquetas extra que se pueden usar aquí son:

Desplegar todos los artículos del autor

<p>Ver todos los articulos de <?php the_author_posts_link(); ?> </p>

Desplegar la cuenta de articulos del autor

<p><?php the_author(); ?> ha escrito <?php the_author_posts(); ?> articulos en <?php bloginfo('name'); ?></p>

Enlazar a la direccion de AIM, Jabber o Yahoo.

<p><?php the_author(); ?>'s AIM address is <?php the_author_meta('aim'); ?></p>

Leer mas etiquetas en el codex de Wordpress:

http://codex.wordpress.org/Template_Tags/the_author_meta

Ahora vamos con el siguiente método, mas fácil y rápido que el anterior.

Método del Plugin “Author Exposed”

Bien ahora me encontré este plugin muy citado en otros blogs dedicados a escribir sobre estas cosas y me parecio interesante compartirlo, les muestro una pequeña captura que muestra el autor y la mia en los laboratorios:

Imagen de Laboratorios Pixel No Disponible

Segun entiendo ahora es para colocar un enlace con tu nombre y si le dan clic sale una ventanita con esta información, no me parece increible pero suele ser útil, el enlace de descarga esta a continuacion.

Como pueden notar es fácil, fue fácil y sera fácil, solo es cuestión de que te sea util, ya que personas que tienen blogs multi autor puede que les sirva, personas que quieren darse a conocer ante sus lectores puede que lo usen.

Entradas Relacionadas:

1. Como crear una Revista con Adobe InDesign
2. Como crear Subtítulos de la manera más primitiva con el Bloc de Notas en Windows
3. Recursos y Tutoriales para crear un Theme de Wordpress
4. Crear un botón con Hover en Photoshop + CSS
5. Como Insertar Adsense en Cualquier Parte de un Articulo (post) y/o Ahorrar Tiempo Escribiendo