閱讀進度條是改善網站使用者體驗的好方法，它為讀者提供了文章進度的視覺指示器。
如果您想向您的網站新增一個，有大量免費或負擔得起的外掛可幫助您新增進度條並將其設計與您網站的其餘部分相匹配。
在這篇文章中，我們收集了8個熱門選項，其中6個是完全免費的。
下面，我們將分享每個外掛的詳細資訊，並簡要介紹進度條的工作原理以及它們為何對您的網站有益。
什麼是閱讀進度條？
閱讀進度條的功能幾乎與名稱所說的完全一樣——它可以讓您網站的訪問者看到他們在您的文章內容中取得了多大的進步。
通常，您會將水平條貼上到頁面的頂部或底部。當使用者滾動瀏覽文章時，該欄將“填滿”以指示他們與內容結尾的距離。
一些外掛還讓您可以選擇在內容的左側或右側建立垂直進度條。在這些情況下，它看起來幾乎像一個滾動條。但是，關鍵區別在於進度條將基於實際內容的長度，而瀏覽器滾動條基於頁面的全長。
以下是網站使用閱讀進度條的典型方式的兩個真實示例……
HubSpot新增了一個橙色進度條，直接顯示在其固定頂部選單欄下方：
HubSpot的閱讀進度條示例
Thrive Themes有一個綠色的閱讀進度條，它也出現在固定選單欄下方：
Thrive Themes中的閱讀進度條示例
但是，您可以根據您的站點嘗試不同的進度條位置。
為什麼要在WordPress中新增閱讀進度條？
在較高的層次上，閱讀進度條是提高網站可用性和使用者體驗的一種方式，它可以對重要指標產生更直接的影響，例如頁面停留時間和跳出率。
首先，讓我們談談一般的使用者體驗。
大多數人想知道他們在投入時間參與您的文章之前會進入什麼領域。是他們可以在任務之間閱讀的5分鐘文章，還是需要認真關注的20分鐘長文章？
進度條可以讓讀者在開始閱讀時對您的文章有什麼期望。為了幫助解決這個問題，一些網站除了進度條之外還新增了估計閱讀時間，下面的幾個外掛都支援。
一旦您的訪問者開始閱讀，進度條也可以鼓勵他們完成文章。例如，如果讀者看到他們已經完成了80%的內容，他們會被鼓勵完成最後 20% 的內容，因為他們已經完成了大部分文章。
使用者體驗的這些改進可以對兩個關鍵指標產生積極影響：
- 停留時間——通過鼓勵讀者在開始閱讀後完成一篇文章，您可以增加他們在頁面上花費的時間。
- 跳出率——通過增加訪問者在您的頁面上花費的時間，您將增加訪問者繼續與您的網站互動的機會（可能通過閱讀另一篇文章），這有助於降低您的跳出率。
如果您將進度條與其他提升使用者體驗的策略（例如高質量的導航結構和智慧使用分頁）結合起來，您可以為訪問者創造一個非常好的、引人入勝的體驗。
8個最佳閱讀進度條WordPress外掛
現在，讓我們進入8個最佳進度條WordPress外掛，以幫助您為您的網站新增閱讀進度條。
雖然您可以找到通用進度條外掛，讓您可以為任何內容建立自定義進度條，但本文特別關注根據頁面內容長度新增閱讀進度指示器的外掛。
在定價方面，其中6個外掛是完全免費的，而其餘2個外掛價格合理，並增加了一些額外的靈活性，這是您在大多數免費選項中找不到的。
最重要的是，所有這些外掛都應該適用於幾乎任何WordPress主題。
Read Meter
Read Meter
Read Meter是Brainstorm Force的一個閱讀進度條外掛，Brainstorm Force是流行的Astra WordPress主題背後的同一個團隊（這也是我們最快的WordPress主題列表）。
該外掛可讓您自動新增一個貼在頁面頂部或底部的閱讀進度條。您還可以選擇顯示文章的預計閱讀時間以及進度條。
這是您使用Read Meter可以獲得的所有內容：
- 頂部或底部放置– 在使用者螢幕的頂部或底部顯示進度條。
- 文章型別定位– 您可以選擇僅新增某些文章型別（包括自定義文章型別）的閱讀進度。例如，您可以將其顯示在部落格文章上，但不能顯示在頁面上。
- 閱讀時間——自動將預計閱讀時間新增到文章的各個部分（例如標題下方）或使用簡碼手動放置。
- 可自定義的顏色——您可以自定義每個元素的顏色和樣式，使其與您的網站相匹配。
價格：Read Meter是100%免費的。
Reading progressbar
Reading progressbar
與Read Meter一起，Reading progressbar是WordPress.org上另一個最受歡迎的進度條外掛之一。然而，與Read Meter不同的是，此外掛不提供新增預計閱讀時間的選項——它專門用於進度條。
但是，它確實為您提供了Read Meter所不提供的額外定位靈活性。例如，除了文章型別定位之外，您還可以將進度條定位到特定模板。
以下是閱讀進度條的所有內容：
- 靈活的定位——您可以自動將進度條貼上到頁面的頂部或底部。或者，還有一個自定義定位選項，可讓您將其貼上到任何CSS元素上。例如，如果您有一個固定頂部選單欄，您可以將其貼上在標題導航選單下方，而不是一直貼上在頁面頂部（如上面的HubSpot示例）。
- 可定製的設計– 更改進度條的高度和顏色以匹配您的網站。
- 定位選項——您只能在某些模板和/或文章型別上顯示進度條。
價格：Reading progressbar外掛100%免費。
Worth the Read
Worth the Read
Worth the Read是最可定製的進度條WordPress外掛之一，如果您發現以前的外掛過於侷限，它是一個很好的選擇。
它包括大多數其他外掛不提供的一些獨特的放置和定位選項，以及其他一些獨特的功能。如果願意，您還可以選擇新增估計的閱讀時間。
以下是值得一讀的所有內容：
- 水平或垂直定位選項——包括螢幕頂部或底部的水平進度條或螢幕左側或右側的垂直進度條。垂直選項是獨一無二的，因為大多數其他外掛不支援它。
- 文章型別定位– 僅在某些文章型別上包含您的閱讀進度條。
- 裝置定位– 您可以選擇關閉移動裝置和平板電腦（或桌上型電腦）的進度條。
- 評論進度– 您可以選擇在閱讀進度中包含評論，如果您有包含有用資訊的活躍評論部分，這可能會很好。
- RTL支援——它是少數幾個可以讓您更改為RTL的外掛之一，這對於使用RTL語言的網站非常有用。
- 樣式選項——自定義顏色、厚度、不透明度等。如果您啟用了評論，您甚至可以使用單獨的顏色來指示評論部分何時開始在進度條上。
- 預計閱讀時間——如果您啟用閱讀時間，您可以自定義其功能並使用簡碼自動或手動放置。
價格：Worth the Read是100%免費的。
Catch Scroll Progress Bar
Catch Scroll Progress Bar
Catch Scroll Progress Bar是另一個輕量級選項，用於向您的站點新增基本進度條。
它使事情變得非常簡單，只需放置和設定進度條樣式所需的最少選項。
以下是使用Catch滾動進度條獲得的所有內容：
- 頂部或底部位置– 將進度條貼上到頁面的頂部或底部。
- 文章型別定位– 僅將您的進度條新增到某些文章型別。
- 模板定位——在這些文章型別中，僅在某些模板上顯示。例如，您可以將其新增到單個文章，但不能新增到存檔頁面。
- 顏色和樣式選項——自定義進度條的顏色、不透明度和高度。
價格：Catch Scroll Progress Bar是100%免費的。
WP Reading Progress
WP Reading Progress
WP Reading Progress是另一個免費的進度條WordPress外掛，可在WordPress.org上找到。
與之前的外掛一樣，它只為您提供自定義閱讀進度條所需的最少設定。但對於大多數人來說，這就是你所需要的，這使它成為另一個可靠的選擇。
這是您將通過WP Reading Progress獲得的所有內容：
- 靈活的定位– 自動將欄貼上到頁面的頂部或底部。或者，您可以手動將其貼上到任何CSS選擇器。
- 文章型別定位– 僅在某些文章型別上包含進度條。還有一個選項可以在存檔頁面上啟用/禁用。
- 樣式自定義——您可以自定義進度條的顏色和粗細。但是，您只能選擇一種顏色，並且沒有不透明度選項。
價格：WP Reading Progress是100%免費的。
Reading Time
Reading Time是此列表中第一個僅提供高階版本的閱讀進度外掛。
但是，它仍然相當實惠，並通過Envato的CodeCanyon市場提供終身更新。
您可能需要考慮閱讀時間而不是免費替代品，主要有兩個原因：
- 8種以上的預設樣式——您可以獲得一些獨特的樣式選項，例如在進度條內使用垂直條而不是實心填充（如上圖所示）。
- 高階定位規則——除了定位文章型別和模板之外，您還可以通過非常具體的規則（例如使用者角色、URL、裝置等）來定位進度條。
您還可以獲得外掛所期望的所有“標準”功能：
- 靈活的定位——除了自動頂部或底部放置，您還可以使用自定義定位將進度條貼上到任何CSS選擇器。
- 樣式選項——除了8種以上的預設樣式之外，您還可以獲得自定義進度條顏色和高度的常規選項。
價格：Reading Time費用為15美元，附帶單個站點的終身更新和6個月的支援。
Reading Position Indicator
Reading Position Indicator
Reading Position Indicator是WordPress.org上的另一個輕量級免費進度條外掛。
它不會為您提供大量設定，但一個獨特的選項是它允許您為閱讀進度條使用自定義漸變（除了純色）。
這是閱讀位置指示器所獲得的一切：
- 頂部或底部位置– 沒有CSS選擇器定位，但您可以新增偏移量。
- 文章型別定位– 將您的進度條定位到特定的文章型別。
- 樣式自定義選項——從純色或漸變色樣式中進行選擇。您還可以調整進度條的粗細。
價格：Reading Position Indicator是100%免費的。
ReBar
ReBar
ReBar是另一個高階閱讀進度條 WordPress 外掛，通過Envato的CodeCanyon市場銷售。
與Reading Time一樣，以下是它提供的一些獨特功能，可能值得花錢：
- 8種以上的預設樣式——您可以獲得許多超越純色填充的獨特樣式，例如塑料、漸變、iOS樣式等。
- 高階定位規則——除了定位文章型別之外，您還可以通過非常具體的規則（例如使用者角色、URL、裝置等）來定位進度條。
- 無限滾動支援——ReBar仍然適用於無限滾動佈局，這使其成為這些網站的絕佳選擇。您可以基於 CSS 選擇器定義滾動區域，它將為無限滾動中的每個文章生成一個唯一的進度條。
以下是其他一些值得注意的功能：
- 水平和垂直樣式——在頁面頂部或底部放置一個水平進度條，或者在頁面左側或右側放置一個垂直進度條。
- 可自定義的樣式——除了8種以上的預設樣式，您還可以自定義進度條的顏色和高度/寬度。
- RTL支援——您可以翻譯RTL語言的進度條。
價格：ReBar售價15美元，附帶單個站點的終身更新和6個月的支援。
小結
這總結了我們收集的8個最佳閱讀進度條WordPress外掛。
對於新增基本進度條的最簡單選項，您可以考慮使用Read Meter或Reading progressbar等外掛。
另一方面，如果您想免費獲得最大的可定製性，您可能希望從Worth the Read開始，因為它包含許多其他外掛不提供的獨特選項和功能。
如果您想超越進度條的純色填充顏色，您可能還需要考慮CodeCanyon的高階選項——Reading Time或ReBar。同樣，這些外掛最獨特的細節是它們都帶有8種以上的預設樣式和更高階的定位選項。
每個外掛在風格和功能方面都有自己獨特的風格，因此值得一試，以找到適合您網站的選項。
評論留言