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

Mientras trabajábamos en el sitio web de un cliente, nos dimos cuenta de que la función incorporada para los autores de listas no era suficiente. Le mostramos cómo mostrar todos los autores de su sitio, pero ese método solo era 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 colaboradores 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 debes hacer es crear una página personalizada usando esta plantilla.

Entonces necesitarás abrir funciones.php Archivo en su carpeta de temas y agregue el siguiente código:

 contribuyentes de funciones () global $ wpdb; $ authors = $ wpdb-> get_results ("SELECT ID, user_nicename from $ wpdb-> users ORDER BY display_name"); foreach ($ autores como $ autor) echo "
"; echo" ID; echo "\"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID; echo "\"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo" "; echo"
"; 

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 la configuración de avatar a plugin de foto de usuario simplemente cambiando la siguiente línea:

echo get_avatar ($ autor-> ID);

y reemplazándolo con:

echo userphoto ($ autor-> 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 deberías agregar las siguientes líneas a tu archivo CSS:

 #authorlist li claro: izquierda; flotador izquierdo; margen: 0 0 5px 0;  #authorlist img.photo width: 40px; altura: 40px; flotador izquierdo;  #authorlist div.authname margen: 20px 0 0 10px; flotador izquierdo;  

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 como se llame el archivo. Siga la misma plantilla de página que su page.php y en el bucle, solo agregue esta función en lugar de mostrar el contenido:

Esto le proporcionará una página de contribuyentes más ricos en contenido. Este truco es excelente para blogs Multi-Autor..

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 dará exactamente todo lo que se muestra en la imagen de arriba.

contribuyentes de funciones () global $ wpdb; $ author = $ wpdb-> get_results ("SELECT ID, user_nicename from $ wpdb-> users WHERE display_name 'admin' ORDER BY display_name"); foreach ($ autores como $ autor) echo "
"; echo" ID); echo "/ \"> "; echo get_avatar ($ author-> ID); echo" "; echo ''; echo" ID); echo "/ \"> "; the_author_meta ('display_name', $ author-> ID); echo" "; echo"
"; echo" Sitio web: ID); echo "/ \" target = "_ blank"> "; the_author_meta ('user_url', $ author-> ID); echo" "; echo"
"; echo" en Twitter: ID); echo "\" target = "_ blank"> "; the_author_meta ('twitter', $ author-> ID); echo" "; echo"
"; echo" ID); echo "/ \"> Visit "; the_author_meta ('display_name', $ author-> ID); echo" 's Página de Perfil "; echo" "; echo" "; echo"
";

Este código está utilizando el plugin de Foto de Usuario. El campo de Twitter se muestra mediante el truco que mencionamos en el artículo Cómo mostrar el Twitter y el Facebook del autor en la página de perfil.

El CSS por ejemplo se vería así:

#authorlist ul estilo de lista: ninguno; ancho: 600px; margen: 0; relleno: 0;  #authorlist li margin: 0 0 5px 0; estilo de lista: ninguno; altura: 90px; relleno: 15px 0 15px 0; borde inferior: 1px sólido #ecec;  #authorlist img.photo width: 80px; altura: 80px; flotador izquierdo; margen: 0 15px 0 0; relleno: 3px; borde: 1px sólido #ececec;  #authorlist div.authname margen: 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