Perfiles de usuario y listas de autores después de cada entrada

Mostrar biografía e información sobre el autor en WordPress

En las webs y blogs donde los contenidos son publicados por más de un autor, es frecuente añadir al final de cada entrada una pequeña biografía con información pública sobre el usuario que ha escrito esa entrada, generalmente mostrando el nombre del autor, una foto, una pequeña descripción y algunos enlaces a su web personal y su cuenta de Twitter, Facebook, RSS, etc.

Mostrar esta información sobre el autor es una buena manera de dar credibilidad y personalidad a las noticias y de fomentar la participación, además de ayudar a la fidelización de nuestras visitas.

La gestión de usuarios en WordPress es muy completa e intuitiva. No solo podemos crear varios tipos de usuarios (administrador, editor, autor…) sinó que podemos contar con varios usuarios de un mismo tipo, por ejemplo, diferentes autores que contribuyen en una misma web.

Sin embargo, no existe ninguna opción en el área de administración que nos permita decidir si queremos mostrarla públicamente o no. Esto se deja a la elección del desarrollador y diseñador de cada tema.

De todas formas, no es complicado editar una plantilla para conseguir que se muestre la biografía pública del autor de la entrada sin tener que utilizar ningún plugin. WordPress ha ido incorporando una serie de etiquetas para hacer esto más fácil, por lo que al final solo tendremos que editar una o dos plantillas para conseguirlo.

1. Añadimos nuevos campos en el perfil del usuario

Lo primero que tendremos que hacer es añadir algunos campos en la ficha de cada usuario, es decir en las opciones del perfil. Por defecto, WordPress solo viene configurado con campos para añadir la dirección de correo del usuario, la página web, cuenta de AIM, mensajería de Yahoo, Jabber/Google Talk y una biografía (en Perfil > Acerca de ti > Información biográfica). No hay ningún sitio donde poder añadir otras cuentas más comunes como la de Twitter, Facebook, Skype, RSS, Flickr o LinkedIn, por ejemplo.

Actualización: En WordPress 3.6 se han eliminado los campos de contacto por defecto (AIM, YIM y Jabber) para instalaciones nuevas.

Para conseguir esto añadiremos una función al filtro “user_contactmethods” en el archivo de funciones (“functions.php“) del tema activo (o en un plugin de funciones, si queremos que nos sirva para otros temas que vayamos a instalar):

// Función para añadir campos con información 
// extra al perfil del usuario de WordPress.
add_filter( 'user_contactmethods', 'perfil_usuario_personalizado' );
function perfil_usuario_personalizado( $user_contact ) {
	$user_contact['perfil_twitter'] = __('Twitter'); 
	$user_contact['perfil_facebook'] = __('Facebook'); 
	$user_contact['perfil_rss'] = __('RSS'); 
	return $user_contact;
}

Podemos añadir tantos campos como queramos. Aquí hemos añadido tres campos: una para poder añadir la dirección de Twitter del autor, otro para la de Facebook y uno más para la URL de su canal RSS.

Si lo prefieres, puedes utilizar esta herramienta para generar el código anterior automáticamente: http://generatewp.com/user-contact-methods/

Con esto ya tenemos solucionado el tema del perfil del autor. Si vamos al perfil de nuestro usuario veremos que se han añadido estos tres bloques nuevos. Lo único que faltará hacer es que cada usuario rellene los nuevos campos con su información. No es necesario rellenarlos todos, se puede dejar en blanco cualquiera de ellos, ya que más adelante lo que haremos es confirmar que el campo tiene alguna información, antes de imprimirlo en pantalla.

Nuevos campos en el perfil de usuario de WordPress

Ya que estamos, si lo que queremos es además eliminar alguno de los campos que WordPress trae por defecto, podemos hacerlo de la misma forma, añadiendo algunas lineas a nuestra función:

// Función para añadir o eliminar información extra al perfil.
add_filter( 'user_contactmethods', 'perfil_usuario_personalizado' );
function perfil_usuario_personalizado( $user_contact ) {

	/* Añadimos campos al perfil: Twitter y Skype */
	$user_contact['perfil_twitter'] = __('Twitter'); 
	$user_contact['perfil_skype'] = __(' Skype'); 

	/* Eliminamos los campos AIM, Jabber y Yahoo IM del perfil */
	unset($user_contact['aim']);
	unset($user_contact['jabber']);
	unset($user_contact['yim']);

	return $user_contact;
}

Nota: con este método no se pueden eliminar los campos URL o biografía, solo AIM, Yahoo IM y Jabber/Google Talk.

2. Añadimos la información del perfil en la plantilla, al final de cada entrada

El siguiente paso se podría hacer incluyendo más código en nuestro archivo de funciones (es la solución que dan en muchos tutoriales y plugins), pero creo que es mucho mejor utilizar las etiquetas que WordPress proporciona e incluirlo directamente en la plantilla donde queremos que aparezca esta información (normalmente en “single.php”).

Además, el método que muchos plugins utilizan de filtrar “the_content” y añadir la biografía después, es más probable que de problemas, por ejemplo, en diseños más complejos que un simple blog, o si estamos utilizando “the_content” en nuestro tema en lugares poco frecuentes, además de en las entradas (por ejemplo, si nuestros archivos muestran toda la información en lugar de solo un resumen con “the_excerpt”, que es lo más habitual).

Como lo que queremos es que sea fácil de editar y no tener que añadir clases CSS y tanto código HTML dentro de las funciones, vamos a añadir la información del perfil del autor en la plantilla que se encarga de mostrar una entrada completa, o sea “single.php”, para poder añadir la biografía y los links a redes sociales debajo de cada entrada, después de la función “the_content”:

<!-- Información del autor: nombre, foto, biografía y links a redes sociales  -->
<div class="autor-biografia">
	<div class="autor-info">
		<?php echo get_avatar( get_the_author_meta('email'), '80' ); ?>
		<h3 class="autor-nombre">Autor: <?php the_author_link(); ?></h3>
		<p class="autor-descripcion"><?php the_author_meta('description'); ?></p>
		<ul class="autor-enlaces">
			<li class="autor_web">Web: <a href="<?php the_author_meta('user_url');?>"><?php the_author_meta('user_url');?></a></li><?php 
				
				// TWITTER			
				$perfil_twitter = get_the_author_meta( 'perfil_twitter' );
				if ( $perfil_twitter && $perfil_twitter != '' ) {
					echo '<li class="autor_tw">Twitter: <a href="' . esc_url($perfil_twitter) . '">' . esc_url($perfil_twitter) . '</a></li>';
				}
				
				// FACEBOOK
				$perfil_facebook = get_the_author_meta( 'perfil_facebook' );
				if ( $perfil_facebook && $perfil_facebook != '' ) {
					echo '<li class="autor_fb">Facebook: <a href="' . esc_url($perfil_facebook) . '">' . esc_url($perfil_facebook) . '</a></li>';
				}
	
				// RSS
				$perfil_rss = get_the_author_meta( 'perfil_rss' );
				if ( $perfil_rss && $perfil_rss != '' ) {
					echo '<li class="autor_rss">RSS: <a href="' . esc_url($perfil_rss) . '">' . esc_url($perfil_rss) . '</a></li>';
				} 
				?>
	
		</ul>
	</div><!-- .autor-info-->
</div><!-- .autor-biografia-->

Las etiquetas que se encargan de entregarnos la información del perfil son:

Si nuestros usuarios no tienen avatar o no saben como cambiarlo, aquí encontrarán información:
Cómo cambiar el avatar por defecto de WordPress

3. Y le damos un poco de estilo

Ahora solo nos queda darle un poco de estilo a la información que hemos añadido. Sin este último paso, la biografía y los enlaces ya se imprimirá correctamente en nuestra plantilla, pero la colocación de cada elemento dependerá de las reglas CSS de nuestro tema.

Para que no haya conflictos con otros estilos utilizados para el diseño general de nuestra web, es importante utilizar nombres de clases que ayuden a concretar, es decir, nada de utilizar clases demasiado generales como “bio”, “info”, “autor”, “facebook”, etc.

El siguiente código CSS lo deberíamos incluir en la hoja de estilos generales “style.css”, aunque funcionará igualmente si lo colocamos antes del código HTML anterior (todo depende de si queremos que nuestro código valide correctamente y siga los estándares):

/* Estilos para la biografía del autor (perfil del usuario) */
.autor-biografia { margin-top: 50px; background-color: #ddd; border: 1px solid #ccc; padding: 20px 35px; font-size: 12px; line-height: 16px; }
.autor-info { padding-left: 90px; }
.autor-info .avatar { float: left; margin-left: -100px; border: 1px solid #fff; }
.autor-biografia h3 { display: inline-block; margin: 0 0 10px; font-weight: bold; font-size: 18px; }
.autor-enlaces { margin: 20px; }
.autor-enlaces li { margin: 0; }
.autor-enlaces a { /* Añadir estilos para los enlaces de la lista */ }

Biografía del autor al final de las entradas

Lógicamente, cada uno puede editar a su gusto estos estilos. Por ejemplo, si queremos mejorarlo un poco más, podemos convertir los enlaces a redes sociales y RSS en iconos, para hacerlo un poco más atractivo.

Si en vez de enlaces de texto preferimos utilizar iconos para cada red social, habrá que hacer algunos ajustes en el código CSS anterior y añadir estas reglas:

.autor-enlaces { margin: 0; padding: 0; }
.autor-enlaces li { margin: 0 10px 0 0; display: inline-block; }
.autor-enlaces a { display: block; width: 35px; height: 35px; background-color: #a00; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.autor-enlaces .autor_web a { background: url('ruta-del-icono.png'); }
.autor-enlaces .autor_tw a { background: url('ruta-del-icono.png'); }
.autor-enlaces .autor_fb a { background: url('ruta-del-icono.png'); }
.autor-enlaces .autor_rss a { background: url('ruta-del-icono.png'); }

Aquí solo será necesario sustituir la ruta donde se encuentran los iconos que queremos utilizar, y probablemente el tamaño de las imágenes.

Como toque final, si queremos que la foto (el avatar del autor) en vez de cuadrado salga en un círculo, podemos añadir border redondeados a la imagen con “border-radius: 50%”.

Plugins, el camino fácil

Si todo esto te parece muy complicado y prefieres utilizar un plugin, no te va a ser difícil encontrar alguno que se adapte a tus necesidades. Es la manera más fácil de añadir funcionalidad en WordPress, pero la desventaja es que prácticamente no se aprende nada, y además estaremos limitados al diseño y desarrollo de su autor, por lo que puede que no encaje muy bien con el diseño de nuestra web.

Estos son algunos de los plugins que se encargan de añadir información sobre el autor:

  • Social Author Bio: Añade automáticamente a las entradas un bloque con la biografía del autor, junto con un avatar e iconos de redes sociales.
  • WP Biographia: Añade la biografía del usuario en la página de inicio, archivos, entradas e incluso en el feed RSS. También dispone de un widget para añadirlo al lateral (sidebar).
  • Author Box Reloaded: Añade información sobre el autor en cualquier blog, con opciones para configurar algunos detalles.
  • Author Box After Posts: Añade una caja con información sobre el autor después del contenido, incluyendo el avatar del usuario, nombre, contador de entradas, web personal, descripción y email.
  • WP About Author: Muestra una biografía con varias opciones de personalización después de las entradas.

Cómo hacer una lista con todos los autores (usuarios) de WordPress

Además de añadir la biografía del autor al final de cada entrada, cuando una web o un blog cuenta con varios autores, puede ser muy útil crear una página que muestre una lista completa de los usuarios que contribuyen a crear el contenido, e incluso facilitar la fidelización de nuestra visitas con enlaces al canal RSS de cada autor.

Esto se puede conseguir fácilmente gracias a la función wp_list_authors. Si no vamos a incluir muchas opciones (argumentos) a la función, podemos hacerlo así, en una sola línea:

<ul>
     <?php wp_list_authors('exclude_admin=0&show_fullname=1'); ?>
</ul>

Y si queremos ver las opciones que tenemos más ordenadas, podemos incluir primero todos los argumentos en una variable y después pasarla a la función “wp_list_authors”.

<?php   // Lista de autores
	$args = array(
	    'orderby'       => 'name', // Orden de los resultados
	    'order'         => 'ASC', // Dirección ascendente o descendente
	    'number'        => null, // Número máximo de usuarios que listar
	    'optioncount'   => false, // Mostrar la cantidad de entradas publicadas por cada usuario
	    'exclude_admin' => true, // Excluir al usuario administrador
	    'show_fullname' => false, // Mostar el nombre completo (nombres y apellidos) o solo el nombre público
	    'hide_empty'    => true, // Ocultar usuarios sin ninguna entrada publicada
	    'echo'          => true, // Mostrar los resultados
	    'feed'          => [empty string], // Texto del enlace al feed RSS de cada autor
	    'feed_image'    => [empty string], // Dirección del archivo de imagen
	    'feed_type'     => [empty string], // Tipo de feed (RSS, RSS2, Atom...)
	    'style'         => list, // Estilo del HTML generado: lista no ordenada (UL) o sin estilo
	    'html'          => true // Formato de salida del código: HTML o texto sin formato
    ); 
    wp_list_authors( $args );
?>

Podemos añadir esta función por ejemplo en el lateral (sidebar.php) o, si tenemos muchos autores, crear una plantilla de página nueva para utilizarla como base y poder personalizar mejor el aspecto de esta lista.

Mostrar la lista de autores en un desplegable con selección de usuario

Si lo que queremos es mostrar una lista desplegable de autores desde la que podamos seleccionar uno y ver todos los artículos o entradas que éste ha publicado, existe una función de WordPress poco conocida pero perfectamente documentada desde la versión 2.3 que nos permite hacer exactamente eso: wp_dropdown_users.

En este ejemplo creamos un bloque en el que incluímos un formulario con un desplegable para poder seleccionar el autor y un botón para enviar la información a través del método GET, es decir, pasando la cadena de texto a la URL:

<!-- Lista desplegable de autores -->
<div id="lista-autores">
	<h2><?php _e('Lista de autores:'); ?></h2>
	<form action="<?php bloginfo('url'); ?>" method="get">
		<?php wp_dropdown_users( array( 'name' => 'author' ) ); ?>
		<input type="submit" name="submit" value="Mostrar artículos" />
	</form>
</div>

Al seleccionar un autor y pulsar el botón “Mostrar artículos”, el sistema nos enviará a la página “http://www.ejemplo.com/author/nombre-del-autor/”. Esta página de contenidos por autor la podemos personalizar tanto como queramos añadiendo una plantilla “author.php” o incluso “author-$id.php” a nuestro tema que sustituya a “archive.php” (ver jerarquía de plantillas en WordPress).

Pasándole algunos argumentos (opciones) a la función, podemos ajustarla a nuestras necesidades. Por ejemplo, ordenar los autores de una determinada manera, incluir o excluir de la lista e incluso seleccionar el sitio en una instalación de WordPress multi-usuario para mostrar usuarios únicamente de ese blog.

Conclusión

WordPress nos da todas las facilidades posibles para que la gestión de usuarios no sea complicada de aplicar en nuestras plantillas. Aunque todos estos filtros y funciones no tienen por qué estar presentes por defecto en el tema que estemos utilizando, incluirlas es bastante fácil y nos permitirá crear plantillas más flexibles y con más posibilidades de personalización.

Comentarios

  1. Lo entendí todo perfectamente, muy útil.

  2. flordeseo

    TRE
    MEN
    DO

  3. Santiago

    Excelente tu propuesta, muchas gracias!!

  4. Suri

    ¡Muchas gracias por compartirlo! CRACK :)

  5. David

    GENIAL ;)

  6. Anaïs

    Me ha servido de mucho
    ¡Muchas gracias!

  7. Lorena Oróstegui

    Esto es justo lo que buscaba, muchas gracias!! :)

  8. Fliberty

    Que tal, tu tutorial está bueno, pero como le hago para mostrar los campos en un formulario que tengo personalizado en el front-page, me sale algo como Faceboo (hidden), muchas gracias…

  9. Fliberty

    Solucionado amigo, solo hay que crear los nuevos campos en el formulario y asignarle como name, en campo creado en el functions del theme.

  10. Roberto

    Buenas noches señor Daniel. Tengo un problema, ya casi estoy acabando mi página web pero no encuentro información en ningun foro para hacer que los usuarios puedan publicar post, un modelo que yo diseñe ( muy sencillo, fotos y descripcion ) y puedan modificarlo si desean posteriormente. El problema surge en que no quiero que tengan acceso a nada del administrador para que no modifiquen nada mas que sus post si lo creen necesario ya que podrá hacerlo cualquier usuario. Me puede dar su opinion ya sea con plugin o código. Muchas gracias por su tiempo y su consejo de antemano. Un saludo

  11. David

    Hola Daniel gracias por el tutorial.
    Tengo una pregunta, yo quiero mostrar estos formularios en la pagina que he creado en edit-profile.php “front-end”. Tienes alguna idea de como mostrarlos junto con los que vienen por defecto (nombre, email, url, etc..) gracias.

  12. Marcelo SEO

    Gran post. Muchas gracias Daniel por compartirlo. Me ha gustado mucho leerlo. Saludos!

  13. Jordan

    Quiero aprender… Ya me perdí, definitivamente me perdí.

  14. Julio Vásquez

    Muchas gracias por la información, muy útil, clara y entendible. Muy buen aporte!!, saludos.

  15. Muy buen post, enhorabuena.

  16. Súper útil! muchas gracias

  17. David Rojas

    Hermano excelente información, muy detallada.. Me fue bastante útil, continua así.. Éxitos :D

  18. Joan Guevara

    Excelente, porque lo único que por defecto permite WP es poner una especie de resumen.

  19. Javier

    Muy interesante. Lo probaré. Gracias ;)

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)