您是否注意到一些熱門網(wǎng)站如何在其文章頂部顯示閱讀進(jìn)度條指示器？

這個(gè)小欄向用戶顯示文章還有多少內(nèi)容需要滾動(dòng)，并鼓勵(lì)他們繼續(xù)閱讀。它可以幫助您網(wǎng)站上的訪問者繼續(xù)閱讀您的內(nèi)容并改善整體用戶體驗(yàn)。

在本文中，我們將向您展示如何在 wordpress 帖子中添加閱讀進(jìn)度條。

為什么以及何時(shí)應(yīng)該在 WordPress 中添加閱讀進(jìn)度欄

用戶在決定是留下還是離開之前只在網(wǎng)頁上花費(fèi)幾秒鐘。如果您發(fā)布長篇文章，保持用戶參與會(huì)變得更具挑戰(zhàn)性，因?yàn)樗鼈冃枰脩粝蛳聺L動(dòng)。

一些網(wǎng)站所有者添加內(nèi)聯(lián)相關(guān)帖子，而其他網(wǎng)站所有者則使用視頻或圖片庫來將用戶留在頁面上。

閱讀進(jìn)度條增加了一些用戶界面增強(qiáng)功能，鼓勵(lì)用戶向下滾動(dòng)。它還激勵(lì)用戶完成他們正在閱讀的文章。

許多受歡迎的網(wǎng)站喜歡使用閱讀進(jìn)度指示器來吸引讀者。但是，您還需要確保閱讀進(jìn)度指示器很微妙，并且不會(huì)分散對(duì)內(nèi)容本身的注意力。

話雖如此，讓我們看看如何輕松地為 WordPress 帖子添加閱讀進(jìn)度指示器。

視頻教程

https://www.youtube.com/embed/XP_K51EMV4E?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜歡書面說明，請(qǐng)繼續(xù)閱讀。

在 WordPress 帖子中添加閱讀進(jìn)度條

在博客文章和頁面中顯示閱讀進(jìn)度條的最簡單方法是通過像Worth The Read這樣的插件。

它是一個(gè)免費(fèi)的WordPress 插件，重量輕，有助于向您的網(wǎng)站添加閱讀進(jìn)度條。該插件提供了多種自定義選項(xiàng)，可讓您更改其樣式以適合您的網(wǎng)站主題。您甚至可以用它來顯示文章的閱讀時(shí)間。

您需要做的第一件事是安裝并激活值得閱讀插件。有關(guān)更多詳細(xì)信息，請(qǐng)參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。

激活后，您需要從 WordPress 管理面板訪問“值得一讀”?“進(jìn)度”頁面，然后轉(zhuǎn)到“功能”選項(xiàng)卡來設(shè)置進(jìn)度條指示器。

接下來，您可以選擇是否在帖子、頁面和主頁上顯示進(jìn)度條。還有一個(gè)選項(xiàng)可以在自定義帖子類型上顯示閱讀欄。

如果向下滾動(dòng)，您會(huì)發(fā)現(xiàn)更多自定義選項(xiàng)。

您可以通過啟用“包含評(píng)論”選項(xiàng)在進(jìn)度條的總長度中包含評(píng)論。如果您要添加評(píng)論，那么您還可以為評(píng)論進(jìn)度區(qū)域選擇不同的背景顏色。

該插件還允許您選擇閱讀進(jìn)度條的位置。默認(rèn)選項(xiàng)位于大多數(shù)網(wǎng)站使用的頂部。您可以將其更改為在頁面的右側(cè)、左側(cè)或底部顯示進(jìn)度條。

除此之外，還有更多自定義閱讀進(jìn)度條的選項(xiàng)。

例如，您可以將進(jìn)度條從右向左移動(dòng)、使用固定不透明度、為手機(jī)和平板電腦等觸摸設(shè)備啟用進(jìn)度條、啟用調(diào)試模式等等。

完成后，不要忘記單擊“保存更改”按鈕。

接下來，轉(zhuǎn)到“閱讀進(jìn)度”下的“樣式”選項(xiàng)卡，編輯閱讀進(jìn)度欄的外觀。

該插件允許您選擇進(jìn)度條的粗細(xì)并選擇前景色和背景色以匹配您的WordPress 主題。

背景色用于填充空白進(jìn)度條，前景色用于在用戶向下滾動(dòng)時(shí)顯示進(jìn)度。

它甚至允許您使用進(jìn)度條的透明背景。選中此選項(xiàng)將覆蓋背景顏色選項(xiàng)，并且當(dāng)用戶向下滾動(dòng)文章時(shí)僅顯示前景色。

編輯樣式后，不要忘記保存更改以存儲(chǔ)您的設(shè)置。

您現(xiàn)在可以訪問網(wǎng)站上的任何博客文章或登錄頁面，以查看正在運(yùn)行的進(jìn)度條。

我們希望這篇文章能幫助您在 WordPress 中添加閱讀進(jìn)度條。您可能還想查看我們的最佳 WooCommerce 插件列表以及如何選擇最佳的網(wǎng)頁設(shè)計(jì)軟件。