Micaela 2 de Diciembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

WordPress: Como crear una sección de “Acerca del autor” en tu blog

wpaboutauthorEs común encontrar una sección de "Acerca del autor" al final de los artículos de un blog, especialmente en aquellos en los que escriben muchas personas.

Utilizando una mezcla de etiquetas template de WordPress, una sección de información puede convertirse fácilmente en una bonita sección sobre al autor ¿Quieres hacer una?

1

Una sección del autor típica, se muestra debajo de sus posts, por lo que colocaremos nuestro código en el archivo single.php de WordPress. El objetivo es mostrar el nombre del autor, enlazarlo a su sitio personal, mostrar su foto de perfil y una pequeña biografía.

Ingresar la información del usuario

La mayoría de esta información se inserta en la sección Usuarios del panel de administración WordPress. Crea el usuario y rellena los campos pertinentes. Selecciona la opción adecuada de cómo debe mostrarse el nombre, introduce  la dirección web del usuario, y completa la información biográfica.

Escribir el HTML

  1. <div id="author-info">
  2.     <div id="author-image">
  3.         <a href="**Author Website**">**Author Gravatar**</a>
  4.     </div>   
  5.     <div id="author-bio">
  6.         <h4>Written by <a href="**Author Website**">**Author Name**</a></h4>
  7.         <p>**Author Description**</p>
  8.     </div>
  9. </div><!--Author Info-->

Abre tu archivo single.php (lo encontrarás entre los archivos de tu theme) y escribe el código HTML inicial. Toda la información del autor estará contenida en el div "author-info". Dentro de éste, hay un div que contiene la imagen (en este caso, tomada de Gravatar) vinculada, seguido de un div que contiene la información principal del autor, como el nombre del auto y el párrafo en espera de la información biográfica.

Ahora, el CSS

  1. #main div#author-info {
  2.     background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
  3.     -moz-border-radius: 8px;
  4.     -webkit-border-radius: 8px;
  5.     border-radius: 8px;
  6.     overflow: auto;
  7. }
  8.     #main div#author-info div#author-image {
  9.         float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
  10.     }

Con el HTML en su lugar, el estilo CSS se puede escribir para poner todo en su lugar. Aquí, al div author- info se le da estilo con un fondo gris, algo de relleno alrededor de los bordes y un margen inferior. Un toque de border radius redondea las esquinas y la imagen del autor se coloca a la izquierda.

Añadiendo los tags

  1. <div id="author-info">
  2.     <div id="author-image">
  3.         <a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
  4.     </div>   
  5.     <div id="author-bio">
  6.         <h4>Written by <?php the_author_link(); ?></h4>
  7.         <p><?php the_author_meta('description'); ?></p>
  8.     </div>
  9. </div><!--Author Info-->

La funcionalidad dinámica puede ser añadida al archivo del theme con el uso de las etiquetas template de WordPress. Aquí está lo que se utiliza:

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

La etiqueta template the_author_meta() se puede usar para obtener varios snippets de información sobre el usuario, en este caso se utiliza para encontrar la URL del autor.

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

La etiqueta get_avatar() se utiliza para obtener el gravatar del autor, y la etiqueta get_the_author_meta('user_email') es utilizada para tomar el lugar del email del usuario en los parámetros.

  1. <?php the_author_link(); ?>

La etiqueta the_author_link() se usa simplemente para incorporar el nombre del autor, y automáticamente lo enlazará a la URL de su sitio web.

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

Finalmente, la etiqueta the_author_meta() es implementada una vez más, esta vez con el parámetro para obtener la descripción del usuario, también conocida como información biográfica.

Llevando la idea un poco más allá

Con la gran cantidad de etiquetas templates disponibles en WordPress, es fácil llevar las cosas a otro nivel y añadir nuevas funcionalidades. ¿Porqué no considerar las siguientes ideas para tu tema?

Mostrar todos los artículos por autor

  1. <p>See all posts by  <?php the_author_posts_link(); ?> </p>

Mostrar cúantos artículos realizó un autor

  1. <p><?php the_author(); ?> has written <?php the_author_posts(); ?> posts on <?php bloginfo('name'); ?></p>

Enlazar a la dirección de AIM del autor

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

Fuente: Line 25

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. ADOLFO RAY dice:

    EXCELENTE POST, MUY FÁCIL DE COMPRAR PARA LOS QUE SOMOS NOVATOS. ME GUSTARIA QUE PUBLICARAS COMO HACER UNA CAJA DE COMENTARIOS "AMIGABLE"(COMO ESTA QUE TIENES EN TU BLOG).NO HE ENCONTRADO INFORMACION AL RESPECTO DE FORMA SIMPLE COMO EL ESTILO DE TU BLOG.GRACIAS

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión