如何在 WordPress 中添加作者框（無插件）

已發表: 2022-02-21

您想將 WordPress 作者框添加到您的網站嗎？

將作者框添加到您的網站可以讓讀者更多地了解您的博客文章和文章的作者。許多 WordPress 主題默認缺少此功能，因此很難自定義作者簡介框以滿足您網站的需求。

本文將向您展示如何在帶有和不帶有 WordPress 插件的情況下在 WordPress 中添加作者框。

什麼是 WordPress 作者框？

WordPress 作者框是位於您的 WordPress 帖子下方的一個小文本框。它為讀者提供有關作者是誰、他們做什麼以及在哪裡可以在線找到他們的信息。

通常，作者框將包括：

作者摘要或簡歷
個人資料圖片或 Gravatar
作者的帖子網址
社交媒體鏈接
鏈接到客座作者的網站

為什麼要在 WordPress 中使用作者框？

默認情況下，大多數 WordPress 主題將在博客文章中顯示作者姓名或作者元顯示。但他們通常不會顯示任何進一步的信息。

但是，揭示內容背後的作者有助於在讀者中建立信任和信譽。反過來，這將提高您網站的權威性。

在某些情況下，“關於我”頁面足以為用戶提供他們需要的信息。然而，並不是每個讀者都會訪問該頁面。

此外，如果您的網站有多個作者，則作者框更容易單獨顯示每個帖子背後的作者信息。

但這還不是全部。

自定義作者簡歷為作者提供了額外的動力來貢獻和與讀者互動。那是因為他們允許作者在他們的社交資料中添加鏈接，從而增加他們的受眾。

最後，在 WordPress 中添加作者框是建立可信度、權威、參與度和吸引更多作者提交內容的絕佳方式。

在 WordPress 中添加作者框的 3 種方法

正如我們之前提到的，自定義您的 WordPress 主題以包含作者框並不總是那麼簡單。這裡有 3 種方法來創建一個沒有插件和一個插件的 WordPress 作者框。

方法一：使用 SeedProd 添加作者信息框
方法 2：使用您的 WordPress 主題添加作者簡介
方法 3：添加沒有插件的 WordPress 作者框（手動）

方法一：使用 SeedProd 添加作者信息框

如果您的 WordPress 主題不支持作者框，並且您想自定義您的網站和作者信息的外觀，那麼這就是您的解決方案。

此方法使用 SeedProd WordPress 插件輕鬆添加自定義作者框並創建 WordPress 主題。

SeedProd 是具有拖放功能的最佳 WordPress 網站構建器。它使您無需編寫任何代碼即可創建自定義 WordPress 主題、佈局和登錄頁面。

借助數百個響應式模板，您可以快速入門。它還包括大量可自定義的內容元素，使您無需僱用開發人員即可自定義網站的每一寸。

其中一個強大的元素是作者框，它可以讓您根據您的網站設計定制您的作者簡介，並添加自定義鏈接和內容。

第 1 步。安裝 SeedProd 網站構建器插件

要開始使用，您首先需要獲得 SeedProd 許可證。

立即開始使用 SeedProd

注意：您需要 SeedProd Pro 或 Elite 許可證才能使用 Theme Builder 和 Author Box 塊。

將 SeedProd 下載到您的計算機後，您需要在 WordPress 網站上安裝並激活插件 .zip 文件。如果您需要幫助，這裡是安裝 WordPress 插件的指南。

一旦 SeedProd 在您的網站上上線，請轉到SeedProd » 設置頁面並輸入您的許可證詳細信息。

您可以在 SeedProd 網站上您帳戶區域的“下載”下找到您的插件許可證密鑰。

第 2 步。創建一個 WordPress 主題

下一步是轉到SeedProd » Theme Builder頁面並單擊“主題”按鈕。

這樣做會打開一個窗口，其中包含幾個預製的 WordPress 主題，可讓您快速入門。將鼠標懸停在您喜歡的任何主題上，然後單擊複選標記圖標將其導入您的網站。

從那裡，您將看到組成主題的各個模板部分的列表。例如，我們選擇的 Online Author 主題包括以下模板：

單頁
單個帖子
博客、檔案、搜索
主頁
側邊欄
頁腳
標題
全局 CSS

通常，您需要訪問文件管理器來訪問和編輯您的 WordPress 主題文件。但是使用 SeedProd，您可以在 WordPress 儀表板中看到它們，而無需離開您的網站。

更好的是，您可以在 SeedPod 的簡單可視化編輯器中編輯每個模板，而無需編寫代碼。因此，您可以通過指向、單擊、拖放來自定義整個 WordPress 主題。簡單的！

第 3 步。將作者框添加到單個帖子模板

要使用 SeedProd 將自定義作者框添加到您的 WordPress 主題，您首先需要將您的作者詳細信息添加到您的個人資料頁面。您可以按照方法 1中的步驟進行操作。

接下來，轉到SeedProd » Theme Builder並找到Single Post模板。從那裡，將鼠標懸停在它上面，然後單擊“編輯設計”鏈接。

這將在 SeedProd 的拖放構建器中打開您的 Single Post 模板。

SeedProd 的可視化編輯器具有簡單的佈局。左側是易於添加到設計中的塊和部分。然後，右側是預覽，可以實時查看更改。

您可以單擊預覽上的任意位置來編輯頁面佈局和塊。然後，在左側，您可以實時自定義每個塊的設置。

我們使用的主題目前在帖子內容下沒有作者框。我們需要使用 SeedProd 的模板標籤之一來添加一個。

模板標籤是單獨的塊，可讓您在設計的任何位置顯示動態 WordPress 內容。例如，我們的主題包括：

帖子標題
特色圖片
發布信息
發表評論

該信息自動來自您的 WordPress 數據庫，允許您將其添加到主題中的任何位置。

要將作者簡介添加到您的主題中，請在“模板標籤”標題下找到作者框塊並將其拖到您的帖子下。

然後您可以單擊該塊來編輯設置，例如：

顯示或隱藏個人資料圖片
顯示或隱藏顯示名稱
HTML 標記類型
包括網站或存檔帖子鏈接
顯示或隱藏作者的傳記

如果單擊“高級”選項卡，則作者框還有更多自定義選項。例如，在“樣式”部分，您可以更改字體、字體顏色和陰影。

在背景部分，您可以更改背景顏色、背景漸變並添加自定義背景圖像。

您還可以自定義間距、邊框，並為作者框提供自定義 CSS 類。

現在剩下的就是繼續自定義單個帖子佈局。

如果您需要一點幫助，這裡有一個關於如何使用 SeedProd 創建自定義 Single Post 模板的分步指南。它會引導您完成您需要的所有不同塊和設置以及如何編輯每個塊。

如果您對模板的外觀感到滿意，請單擊右上角的綠色保存按鈕。

第 4 步。自定義主題的其餘部分

您現在有 2 個選擇：

發布當前的 WordPress 主題設計
自定義其餘的主題模板

我們建議瀏覽其餘的主題模板，包括您的主頁、博客頁面、頁眉和頁腳，並調整它們以匹配您的品牌。

您需要做的就是返回SeedProd » Theme Builder ，然後單擊任何模板上的“編輯設計”鏈接。從那裡，您可以像使用“單個帖子”佈局一樣自定義模板。

第 5 步。發布您的 WordPress 主題

使用 SeedProd 製作您的 WordPress 主題和作者框很容易。轉到主題生成器頁面並將啟用 SeedProd 主題切換更改為“是”。

現在，您可以訪問 WordPress 網站上的任何帖子並查看新的自定義作者框。

方法 2：使用您的 WordPress 主題添加作者簡介

許多最好的 WordPress 主題都使用內置的用戶配置文件在每篇博客文章下方顯示一個作者框。通常，它將包括作者的個人資料圖片和傳記信息。

但首先，您需要檢查您的主題是否包含對作者框的支持。

您可以通過從 WordPress 管理面板轉到用戶 » 所有用戶來檢查。然後，將光標懸停在相關配置文件上，然後單擊“編輯”鏈接。

在以下屏幕上是有關該特定用戶的可編輯信息。如果您的 WordPress 主題支持作者框，則頁面下方應該有一個名為“傳記信息”的部分。

在該區域，您可以添加簡短的作者簡介，並包含指向社交網絡或作者網站的 HTML 鏈接。

如果他們有帳戶，您的主題將自動從 Gravatar 服務獲取作者的個人資料圖片。否則，它將顯示一個灰色的佔位符圖像。

添加作者信息後，單擊更新個人資料按鈕。

現在，您可以單擊該作者在您網站上的任何文章並實時查看他們的作者框。

方法 3：添加沒有插件的 WordPress 作者框（手動）

如果您想創建一個沒有插件的 WordPress 作者框，您需要向您的 WordPress 主題添加一個新功能。由於此方法涉及編輯您的主題文件，因此我們僅建議高級用戶使用。

注意：最好創建一個子主題來進行任何自定義主題更改。這樣，您就不會因為主題更新而失去修改的風險。

要添加沒有插件的 WordPress 作者框，請複制以下代碼片段並將其粘貼到您的 functions.php 文件中：

function wpb_author_info_box( $content ) {
 
global $post;
 
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
 
// Get author's display name
$display_name = get_the_author_meta( 'display_name', $post->post_author );
 
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
 
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
 
// Get author's website URL
$user_website = get_the_author_meta('url', $post->post_author);
 
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
 
if ( ! empty( $display_name ) )
 
$author_details = '<p class="author_name">About ' . $display_name . '</p>';
 
if ( ! empty( $user_description ) )
// Author avatar and bio
 
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
 
$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>'; 
 
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
 
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
 
} else {
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
 
// Pass all this info to post content
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
 
// Add our function to the post content filter
add_action( 'the_content', 'wpb_author_info_box' );
 
// Allow HTML in author bio section
remove_filter('pre_user_description', 'wp_filter_kses');

該功能獲取作者的信息並將其顯示在您網站上的 WordPress 帖子下方。

接下來，您需要設置作者框的樣式以匹配您的主題和品牌。以下是一些可用於入門的示例 CSS 代碼：

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}
 
.author_name{
font-size:16px;
font-weight: bold;
}
 
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}

要將該代碼添加到您的主題中，請單擊 WordPress 管理面板中的外觀 » 自定義。這樣做將打開 WordPress 主題定制器，您可以在其中直觀地定制主題的某些方面。