如何在 GeneratePress 主題中添加作者框。 [2021]

您知道您可以在 Generatepress 主題中添加作者框而無需安裝額外的插件嗎？

因此，為了幫助博客作者，我準備了一份詳細指南，介紹如何使用 Generatepress 主題的元素功能添加作者框。

我知道你們很多人問為什麼不在 WordPress 中添加一個作者框插件，讓工作更簡單。 因為安裝額外的插件可能會影響您的網站速度。 最好使用一些自定義 HTML 和 CSS 代碼來使用原生 Generatepress 元素功能生成作者框。

注意：只有在 WordPress 網站上安裝了 Generatepress 高級插件時，才能使用此技巧。

為什麼您的網站上需要作者框？

在博客文章末尾添加作者框有助於您的讀者和搜索引擎（如 Google、Bing）了解文章背後的人。

它在讀者和作者之間建立了良好的關係和信任，也有助於在互聯網社區中建立權威。

你知道EAT 算法嗎？ 要在 Google 中排名靠前，您需要通過建立其專業知識、權威和可信度來創建品牌——這正是 EAT 所代表的。 Author Box 是實現這一目標的第一步。

在 generatePress 主題中添加作者框的步驟。

在您的 Generatepress 主題中添加作者框之前，您需要在 WordPress 中進行一些基本設置。

1.添加個人資料照片和作者描述

轉到WordPress 儀表板並單擊用戶部分。 現在單擊用戶名下方的編輯按鈕。

現在向下滾動，您將看到一個名為“關於您自己”的選項。 在“傳記信息”中寫下您的作者描述並在其下方設置您的個人資料圖片。

注意：您還可以使用一個簡單的技巧在“作者”框中添加指向“關於我們”頁面的鏈接。 在傳記信息中以這種格式粘貼鏈接。

<a href="https://key2blogging.co/about-us/">關於我們頁面</a>

這樣， 您可以輕鬆地在作者框中添加帶有鏈接的錨文本 生成新聞主題。

如果您尚未添加 Gravatar，則可以通過單擊以下鏈接來完成此操作，如此處所示。

它會將您重定向到Gravatar 網站，您必須使用 WordPress 中提到的電子郵件地址創建一個帳戶，然後在那裡上傳您的個人資料圖片。 它會自動將個人資料照片提取到您的 WordPress 帳戶。

2.激活元素模塊

要激活元素模塊，請轉到外觀 > GeneratePress > 元素 > 激活

如果您已經這樣做了，那麼您可以跳到第三步。

3.創建一個新的鉤子元素

現在單擊外觀部分，您將看到一個名為“元素”的選項，單擊它。 現在單擊“添加新元素”並選擇Hook 。

4、設置標題為“作者框”，粘貼HTML代碼

您必須將標題設置為作者框並將以下 HTML 代碼粘貼到代碼編輯器中。

複製下面的代碼

<div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. Setup Hook 設置

粘貼代碼後，您必須設置 Hook 設置。 在 Hook 選項中選擇“ generate after content ”，然後單擊“ Execute PHP ”並將優先級設置為“ 20 ”。

6.設置顯示規則

現在單擊設置右側的顯示規則。 現在在位置選擇“所有單數”並在排除選項卡中選擇“首頁”。

現在您已經完成了 Hook 設置。 所以，點擊發布按鈕。

7.添加CSS代碼

現在您必須使用 CSS 代碼設計您的作者框。 因此，要做到這一點，請轉到外觀>>自定義>>附加 CSS並粘貼以下代碼，然後點擊發布按鈕。

複製 CSS 代碼：

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

恭喜，您已成功在 Generatepress 主題中添加了作者框，無需任何插件。

視頻指南：

注意：如果您使用的是 Generatepress 主題的免費版本，那麼您必須使用插件添加作者框。

結論

現在我們已經介紹了在 WordPress 的 Generatepress 主題中添加作者框的分步過程。 如果您有任何疑問，請在評論部分詢問我，或在Twitter 上聯繫我。

如果您喜歡本指南，請與您的博客社區分享並感謝您的努力。 謝謝你。

另請閱讀：Blogger 的 10 個有用的 chrome 擴展