Cómo mostrar una lista de autores con avatares en la página de colaborador de WordPress

Mientras trabajaba en el sitio web de un cliente, nos dimos cuenta de que la función incorporada para enumerar autores no era suficiente. Le mostramos cómo ver todos los autores de su sitio, pero ese método solo era válido si desea que aparezca una lista simple en la barra lateral. Si desea crear una página de colaborador más rica en contenido y útil, esta función es inútil.

En este artículo, le mostraremos cómo crear una página de colaborador que mostrará una lista de autores con avatares o fotos de los usuarios y cualquier otra información que desee. Este tutorial es un nivel intermedio tutorial.

Lo primero que debe hacer es crear una página personalizada con esta plantilla.

Luego, deberá abrir el archivo functions.php en la carpeta de temas y agregar el siguiente código:

function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

foreach($authors as $author) {
echo "<li>";
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

Al agregar esta función, le está diciendo a WordPress que cree una función que mostrará el nombre del autor y el avatar del autor. Puede cambiar el avatar a la configuración del plugin de foto de usuario simplemente editando la siguiente línea:

echo get_avatar($author->ID);

y reemplazándolo con:

echo userphoto($author->ID);

Puede agregar más funciones a esta función, como mostrar la URL del autor y otra información del perfil siguiendo la estructura utilizada.

También debe agregar las siguientes líneas a su archivo CSS:

#authorlist li {
clear: left;
float: left;
margin: 0 0 5px 0;
}

#authorlist img.photo {
width: 40px;
height: 40px;
float: left;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
float: left;
}

Una vez que haya terminado de agregar la función, ahora debe llamarla en su plantilla de página. Abra el archivo contributors.php o el nombre que le dé al archivo. Siga la misma plantilla de página que su page.php y, en el bucle, agregue esta función en lugar de mostrar el contenido:

<div id="authorlist"><ul><?php contributors(); ?></ul></div>

Esto le proporcionará una página de colaborador más rica en contenido. Este truco es excelente para blogs de varios autores.

Ahora, aquí hay un ejemplo de cómo lo usamos:

Si desea tener una página de colaborador con información como la que se muestra en el ejemplo anterior, deberá realizar algunos cambios en la función original. Tenemos un código de muestra que le permitirá ver exactamente todo lo que se muestra en la imagen de arriba.

function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' ORDER BY display_name");

foreach ($authors as $author ) {

echo "<li>";
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "<br />";
echo "Website: <a href="";
the_author_meta('user_url', $author->ID);
echo "/" target="_blank">";
the_author_meta('user_url', $author->ID);
echo "</a>";
echo "<br />";
echo "Twitter: <a href="http://twitter.com/";
the_author_meta('twitter', $author->ID);
echo "" target="_blank">";
the_author_meta('twitter', $author->ID);
echo "</a>";
echo "<br />";
echo "<a href="".get_bloginfo('url')."/author/";
the_author_meta('user_nicename', $author->ID);
echo "/">Visit&nbsp;";
the_author_meta('display_name', $author->ID);
echo "'s Profile Page";
echo "</a>";
echo "</div>";
echo "</li>";
}
}

Este código utiliza el plugin Fotos de usuario. El campo de Twitter se muestra usando el truco que mencionamos en el artículo Cómo mostrar el Twitter y Facebook del autor en la página de perfil.

CSS, por ejemplo, se vería así:

#authorlist ul{
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
#authorlist li {
margin: 0 0 5px 0;
list-style: none;
height: 90px;
padding: 15px 0 15px 0;
border-bottom: 1px solid #ececec;
}

#authorlist img.photo {
width: 80px;
height: 80px;
float: left;
margin: 0 15px 0 0;
padding: 3px;
border: 1px solid #ececec;
}

#authorlist div.authname {
margin: 20px 0 0 10px;
}

Puede ver más información si lo desea utilizando el código avanzado como guía.

Fuente de esta función