Es 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?
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
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
-
#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;
-
}
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
-
<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-->
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:
-
<?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.
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.
-
<?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.
-
<?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
-
<p>See all posts by <?php the_author_posts_link(); ?> </p>
Mostrar c煤antos art铆culos realiz贸 un autor
-
<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
-
<p><?php the_author(); ?>'s AIM address is <?php the_author_meta('aim'); ?></p>
Fuente: Line 25
Artículos relacionados
- Gu铆a de Tags para dise帽ar tu template de WordPress
- Wordpress: Destacar con estilo los comentarios del autor del post
- Javascript: API para obtener informaci贸n sobre el nivel de bater铆a
- Firefox 3 te muestra cu谩ntas visitas tuvo tu blog de WordPress
- BuddyPress y Movable Type te permiten crear tu propia red social
S谩bado, 31 de Julio de 2010 a las 11.28
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
Jueves, 26 de Agosto de 2010 a las 07.00
Sencillo y genial
Viernes, 10 de Septiembre de 2010 a las 07.27
[...] 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 [...]
Jueves, 11 de Noviembre de 2010 a las 19.02
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.