如何在 Divi 中顯示估計的閱讀時間和字數（使用 ReadingTime.js）

有些人（包括我）很欣賞博文的長度，或者更重要的是，閱讀需要多少時間。 一個很好的方法是在博客文章的頂部顯示估計的閱讀時間和/或字數。 您可以在諸如 medium.com 之類的流行博客上看到此功能。 它不必具有侵入性或分散用戶參與內容的注意力。 但它可以為那些花費大量時間在網絡上吞噬內容的人增加一個很好的用戶體驗提升。

在本教程中，我們將向您展示一種快速簡便的方法，為您的 Divi 博客文章添加估計的閱讀時間和字數。 我們將要使用的 readingTime.js 庫簡單、輕量，並且易於在您的 Divi 站點上實現。 此外，您可以更好地控制閱讀時間和字數位置的風格和位置。 所有這一切都無需依賴另一個插件！

我們將使用 Divi Theme Builder 將估計的閱讀時間和字數添加到博客文章模板中。 因此，一旦將其添加到模板中，閱讀時間和字數就會很好地顯示在整個網站的所有帖子上。

讓我們開始吧。

搶先看

這是我們將添加到 Divi 中的帖子模板的閱讀時間和字數的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

如何上傳模板

轉到 Divi 主題生成器

要上傳模板，請導航到 WordPress 網站後端的 Divi Theme Builder。

上傳網站模板

然後，在右上角，您會看到一個帶有兩個箭頭的圖標。 單擊該圖標。

導航到導入選項卡，上傳您可以在本文中下載的 JSON 文件，然後單擊“導入 Divi 主題生成器模板”。

保存 Divi 主題生成器更改

上傳文件後，您會注意到一個新模板，其中包含已分配給所有帖子的新正文區域。 一旦您希望激活模板，請立即保存 Divi Theme Builder 更改。

讓我們進入教程，這樣我們就可以學習從頭開始構建這個東西，好嗎？

如何在 Divi 中顯示估計閱讀時間和字數

你需要什麼開始

首先，您需要執行以下操作：

1. 導航到 Divi 主題生成器
2. 單擊頁面右上角的便攜性圖標。
3. 在可移植性彈出窗口中選擇導入選項卡。
4. 選擇/導入 Divi 商業顧問帖子模板文件（在此處下載）。
5. 單擊導入按鈕

之後，您將有一個可以編輯的帖子模板。

將文本/HTML 添加到帖子模板

要編輯帖子模板，請單擊自定義正文區域上的編輯圖標。

在帖子佈局編輯器中，在佈局頂部包含帖子元數據的行下方添加一個新的單列行。

完成後，將文本模塊添加到新行。

在文本模塊設置中，將以下 HTML 粘貼到正文中（使用文本選項卡）：

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

需要記住的重要一點是，帶有“eta”類的 span 標籤最終會顯示帖子內容的估計閱讀時間。 而帶有“word-count”類的 span 標籤將顯示帖子內容的字數。

設計閱讀時間文本

在設計選項卡下，更新文本樣式如下：

• 文字字體： Poppins
• 文字字體粗細：粗體
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字文字大小：14px（桌面），12px（手機）
• 文字字母間距：2px
• 文本對齊：居中

樣式行

文本設置完成後，打開該行的設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

在高級選項卡中，更新位置：

• 位置：絕對
• 位置：左下角

添加代碼

要添加必要的代碼以生成估計的閱讀時間和字數，首先，在文本模塊下添加一個代碼模塊。

我們將使用帶有一些自定義代碼的 readingtime.js 庫來定位我們的帖子內容區域、閱讀時間目標類eta和字數目標類word-count 。

將以下代碼粘貼到代碼塊中，確保將代碼包裝在腳本標籤中：

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

關於守則

目標類et_pb_post_content用於指定 Divi 中保存帖子內容的帖子內容區域，以便代碼知道它需要計算和估計閱讀時間的文本。 例如，如果您使用body作為目標，則代碼將計算整個頁面上的所有內容/文本，而不僅僅是文章的內容。

readingTimeTarget被分配給eta類，它對應於我們添加到文本模塊中的span標籤的類。 並且wordCountTarget被分配給我們添加到文本模塊中的另一個span標籤的word-count類。

此外，隨時更新每分鐘的字數值（當前為 275）以表示您認為應該是什麼。 這當然會影響顯示的閱讀時間。 根據我的研究，成年人平均每分鐘閱讀 300 個單詞。 此外，您還可以隨時更新語言值。 例如，如果您希望文本以法語顯示，您可以將 'en' 替換為 'fr'）。 有關更多信息，您可以查看 github 上的文檔。

保存模板佈局和主題生成器。

然後，導航到 Divi > 主題選項 > 集成。

然後將庫添加到帶有腳本標籤的標題區域：

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

它應該是這樣的……

最後結果

現在您需要做的就是訪問您網站上的實時博客帖子，以查看帖子內容頂部的估計閱讀時間和字數。

最後的想法

將帖子估計閱讀時間和字數添加到您的 Divi 博客帖子中非常容易。 此外，您可以選擇要在帖子模板上顯示元素的位置，並使用內置的 Divi 設計設置為其設置樣式。 希望這會派上用場！

我期待在評論中收到您的來信。

乾杯!