如何在WordPress贡献者页面中显示带有化身的作者列表

While working on a client’s website, we realized that the built-in function for listing authors was not enough. We showed you how to display all authors from your site, but that method was only good if you want a simple list to display in your sidebar. If you want to create a more content-rich and useful contributors page, then that function is useless.

在客户的网站上工作时，我们意识到列表作者的内置功能还不够。 我们向您展示了如何显示站点中的所有作者 ，但是只有当您希望在边栏中显示一个简单列表时，该方法才有用。 如果要创建内容更丰富，更有用的贡献者页面，则该功能无用。

In this article we will show you how you can create a contributors page which will display a list of authors with avatars or userphoto and any other information that you like. This tutorial is an intermediate level tutorial.

在本文中，我们将向您展示如何创建一个贡献者页面，该页面将显示带有化身或用户照片以及您喜欢的任何其他信息的作者列表。 本教程是中级教程。

First thing you need to do is create a custom page using this template.

您需要做的第一件事就是使用此模板创建自定义页面 。

Then you will need to open functions.php file in your themes folder and add the following code:

然后，您将需要打开主题文件夹中的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>";
}
}

By adding this function you are telling WordPress to create a function that will display author’s name, and author’s avatar. You can change the avatar to userphoto plugin setting by simply changing the following line:

通过添加此功能，您可以告诉WordPress创建一个可以显示作者姓名和作者头像的函数。 您只需更改以下行即可将头像更改为userphoto插件设置：

echo get_avatar($author->ID);

and replacing it with:

并替换为：

echo userphoto($author->ID);

You can add more features to this function such as displaying author URL and other information from the profile by following the structure used.

您可以通过使用所使用的结构来向此功能添加更多功能，例如显示配置文件中的作者URL和其他信息。

You would also need to add the following lines to your CSS file:

您还需要在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;
}

Once you are done adding the function, now you would need to call it in your page-template. Open the contributors.php file or whatever you name the file. Follow the same page template as your page.php and in the loop, just add this function instead of displaying the content:

添加完函数后，现在需要在页面模板中调用它。 打开contributors.php文件或任何您命名的文件。 遵循与page.php相同的页面模板，并在循环中添加此功能而不显示内容：

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

This will provide you with a more content-rich contributors page. This trick is excellent for Multi-Author blogs.

这将为您提供内容更加丰富的贡献者页面。 对于多作者博客，此技巧非常有用。

Now here is an example of how we used it:

现在这是我们如何使用它的示例：

If you want to have a contributors page with information like displayed in the example above, you will need to make a few changes to the original function. We have an example code that will get you exactly everything displayed in the image above.

如果要创建一个包含上面示例中显示的信息的贡献者页面，则需要对原始功能进行一些更改。 我们有一个示例代码，可以使您准确地获得上图中显示的所有内容。

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

This code is utilizing User Photo plugin. The twitter field is being displayed using the trick we mentioned in the article How to Display Author’s Twitter and Facebook in the Profile page.

该代码利用了User Photo插件 。 使用我们在“个人资料”页面中如何显示作者的Twitter和Facebook文章中提到的技巧显示twitter字段。

The CSS for example would look like:

例如，CSS如下所示：

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

You can display more information if you like by using the advanced code as your guide.

如果愿意，可以使用高级代码作为指南来显示更多信息。

Source of this Function

该功能的来源

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-display-an-author-list-with-avatars-in-wordpress-contributors-page/