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 (4)

  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

  2. JoseM dice:

    Sencillo y genial

  3. Como crear una secci贸n de 鈥淎cerca del autor鈥 en Wordpress | Omeyas Web dice:

    […] como poner un secci贸n muy original de Acerca del autor. La informaci贸n la he sacado este post de El Webmaster, aunque he adaptado el CSS a mi […]

  4. Victor dice:

    Estimado…esta super bueno el tuto, pero tengo un peque帽o problema, estoy usando el plugin user-photo para subir la imagen del autor, pero con el codigo que realizaste en este tutorial no me funca, no muestra la imagen.

Deja tu opinión

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