如何在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 "
  • "; echo "ID; echo "">"; echo get_avatar($author->ID); echo ""; echo '
    '; echo "ID; echo "">"; the_author_meta('display_name', $author->ID); echo ""; echo "
    "; echo "
  • "; } }

    通過添加此功能,您可以告訴WordPress創建一個可以顯示作者姓名和作者頭像的函數。 您只需更改以下行即可將頭像更改為userphoto插件設置:

    echo get_avatar($author->ID);

    並替換為:

    echo userphoto($author->ID);

    您可以通過使用所使用的結構,向此功能添加更多功能,例如顯示配置文件中的作者URL和其他信息。

    您還需要在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相同的頁面模板,然後在循環中添加此功能而不顯示內容:

      這將為您提供內容更加豐富的貢獻者頁面。 對於多作者博客,此技巧非常有用。

      現在這是我們如何使用它的示例:

      具有作者列表和其他信息的貢獻者頁面的示例

      如果要創建一個包含上面示例中顯示的信息的貢獻者頁面,則需要對原始功能進行一些更改。 我們有一個示例代碼,可以使您準確地獲得上圖中顯示的所有內容。

      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 "
    • "; echo "ID); echo "/">"; echo get_avatar($author->ID); echo ""; echo '
      '; echo "ID); echo "/">"; the_author_meta('display_name', $author->ID); echo ""; echo "
      "; echo "Website: ID); echo "/" target="_blank">"; the_author_meta('user_url', $author->ID); echo ""; echo "
      "; echo "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 Profile Page"; echo ""; echo "
      "; echo "
    • "; } }

      此代碼利用了User Photo插件。 使用我們在“個人資料”頁面中如何顯示作者的Twitter和Facebook文章中提到的技巧顯示twitter字段。

      例如,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;
      }

      如果願意,可以使用高級代碼作為指南來顯示更多信息。

      該功能的來源