Mientras trabajábamos en el sitio web de un cliente, nos dimos cuenta de que la función integrada para listar autores 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 colaboradores 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 fotos 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 tendrás que abrir funciones.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 muestre el nombre del autor y el avatar del autor. Puede cambiar la configuración del complemento de avatar a foto de usuario simplemente cambiando 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 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 contribuidors.php o el nombre que le dé al archivo. Siga la misma plantilla de página que su página.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 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 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 obtendrá 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 "; the_author_meta('display_name', $author->ID); echo "'s Profile Page"; echo "</a>"; echo "</div>"; echo "</li>"; } }
Este código está utilizando el complemento de foto 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.
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.