Как вывести список авторов с аватарами на одну страницу в WordPress

При работе над сайтом клиента мы осознали, что встроенной функции для вывода списка авторов на сайте не достаточно. Если вы, например, захотите создать более содержательную и полезную страницу с авторами — не выйдет.

В этой статье мы покажем вам как вывести список авторов с аватарами или их фотографиями, либо любую другую информацию на одну страницу в WordPress. Мануал предназначен для пользователей среднего уровня.

Для начала вам нужно создать пользовательский тип страницы для нашей задачи.

Затем необходимо открыть файл functions.php в папке вашей темы и добавить туда следующий код:

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>";
}
}

Добавляя эту функцию, вы сообщаете WordPress о том, что нужно создать функцию, которая будет выводить имя автора и его аватар. Можно изменить аватар на фотографию пользователя (выводимую с помощью плагина userphoto), просто изменив одну строку:

echo get_avatar($author->ID);

заменить на это:

echo userphoto($author->ID);

Можно добавить больше фишек в эту функцию, например вывод ссылки на сайта автора и другую информацию из профиля, придерживаясь вышеуказанной структуры.

Также нужно будет добавить следующие строки в вашу таблицу стилей (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;
}

После того, как вы закончили с добавлением функции, нужно будет ее вызвать в вашем шаблоне страницы. Открываем файл contributors.php или как там вы назвали файл 🙂 Придерживаемся того же шаблона, что у вас в page.php, только лишь замените контент следующей функцией:

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

Это действие выведет вам расширенный список авторов на блоге, что очень полезно на тех сайтах, где авторов больше одного.

Вот пример использования:

Если вы хотите оформить страницу как на скрине выше, необходимо будет внести несколько изменений в оригинальную функцию. У нас есть пример кода, который выдаст ровно такой же результат, как и на картинке выше.

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>";
}
}

Этот код использует плагин User Photo. Как добавить поля Twitter и Facebook мы уже рассказывали в одной из статей.

Стили для этого примера будут выглядеть так:

#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;
}