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

Mientras trabajaba en el sitio web de un cliente, nos dimos cuenta de que la función incorporada para enumerar a los autores no era suficiente. Le mostramos cómo mostrar todos los autores de su sitio, pero ese método solo fue bueno si desea que se muestre una lista simple en su barra lateral. Si desea crear una página de contribuyentes más rica en contenido y útil, entonces esa función es inútil.

En este artículo, le mostraremos cómo puede crear una página de contribuyentes que mostrará una lista de autores con avatares o foto de usuario 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.

Entonces necesitarás abrir functions.php archivo en su carpeta de temas y agregue 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. Puedes cambiar el avatar a foto de usuario plugin ajuste simplemente cambiando la siguiente línea:

echo get_avatar($author->ID);

y reemplazándolo con:

echo userphoto($author->ID);

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

También necesitaría 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 deberá 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, simplemente 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 colaboradores con más 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 colaboradores 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 ejemplo que le permitirá obtener 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 Foto de usuario plugin. El campo de Twitter se muestra utilizando el truco que mencionamos en el artículo Cómo mostrar el Twitter del autor en la página de perfil.

El 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 mostrar más información si lo desea utilizando el código avanzado como guía.

Fuente de esta función