Categories 教程

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

在一个客户的网站上工作的时候，我们意识到内置的功能是不够的。 我们向您展示了如何显示来自您网站的所有作者，但是如果您希望在您的侧边栏中显示一个简单的列表，那么这种方法就不错。 如果你想创建一个内容丰富和有用的贡献者页面，那么这个功能是没有用的。

在这篇文章中，我们将向您展示如何创建一个贡献者页面，该页面将显示具有化身或userphoto的作者列表以及您喜欢的任何其他信息。 本教程是一个 中级水平 教程。

首先你需要做的是使用这个模板创建一个自定义页面。

那么你将需要打开 的functions.php 文件在您的主题文件夹中，并添加以下代码： 

函数贡献者（）{
 全局$ wpdb;

 $ authors = $ wpdb-> get_results（“SELECT ID，user_nicename from $ wpdb-> users ORDER BY display_name”）;

 foreach（$作者为$ author）{
 回声“
  • “;
    回声“ID;
    回声“”>“;
    echo get_avatar（$ author-> ID）;
    回声“”;
    回声“;
    回声“ID;
    回声“”>“;
    the_author_meta（’display_name’，$ author-> ID）;
    回声“”;
    回声“”;
    回声“

    • “;
    }
    }

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

    echo get_avatar（$ author-> ID）;

    并替换为： 

    echo userphoto（$ author-> ID）;

    您可以按照所使用的结构添加更多功能，例如显示作者URL和其他信息。

    您还需要将以下行添加到您的CSS文件中： 

    #authorlist李{
 清楚：离开;
 向左飘浮;
 保证金：0 0 5px 0;
 }

 #authorlist img.photo {
 宽度：40px;
 height：40px;
 向左飘浮;
 }

 #authorlist div.authname {
 margin：20px 0 0 10px;
 向左飘浮;
 }

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

    

    

    这将为您提供更多内容丰富的贡献者页面。 这个技巧非常适合多作者博客。 
    

    下面是我们如何使用它的一个例子： 
    

    作者列表和其他信息的贡献者页面的示例 
    

    如果你想有一个贡献者页面，上面的例子中显示的信息，你将需要做一些原始功能的变化。 我们有一个示例代码，可以让您完全看到上图中显示的所有内容。 
    

    函数贡献者（）{
 全局$ wpdb;

 $ author = $ wpdb-> get_results（“SELECT ID，user_nicename from $ wpdb-> users WHERE display_name'admin'ORDER BY display_name”）;

 foreach（$作者为$ author）{

 回声“ 
    

  • “; 
    回声“ID）; 
    回声“/”>“; 
    echo get_avatar（$ author-> ID）; 
    回声“”; 
    回声“; 
    回声“ID）; 
    回声“/”>“; 
    the_author_meta（’display_name’，$ author-> ID）; 
    回声“”; 
    回声“ 
    “; 
    回声“网站：ID）; 
    echo“/”target =’_ blank’>“; 
    the_author_meta（’user_url’，$ author-> ID）; 
    回声“”; 
    回声“ 
    “; 
    回声“Twitter：ID）; 
    echo“”target =’_ blank’>“; 
    the_author_meta（’twitter’，$ author-> ID）; 
    回声“”; 
    回声“ 
    “; 
    回声“ID）; 
    回声“/”>访问“; 
    the_author_meta（’display_name’，$ author-> ID）; 
    回声“的个人资料页面”; 
    回声“”; 
    回声“”; 
    回声“ 
    • 

    “; 
    } 
    } 
    

    此代码正在使用用户照片插件。  Twitter领域正在使用我们在文章中如何显示作者的Twitter和Facebook文章中提到的技巧显示。 
    

    CSS例如看起来像： 
    

    #authorlist ul {
 list-style：none;
 宽度：600px;
 保证金：0;
 填充：0;
 }
 #authorlist李{
 保证金：0 0 5px 0;
 list-style：none;
 身高：90px;
 填充：15px 0 15px 0;
 border-bottom：1px solid #ececec;
 }

 #authorlist img.photo {
 宽度：80px;
 身高：80px;
 向左飘浮;
 保证金：0 15px 0 0;
 padding：3px;
 border：1px solid #ececec;
 }

 #authorlist div.authname {
 margin：20px 0 0 10px;
 } 
    

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

    这个函数的来源