你是否注意到某些热门网站在其文章顶部如何显示阅读进度条指示器？这个小条向用户显示了还剩下多少文章可以滚动，并鼓励他们继续阅读。在本文中，将向你展示如何在WordPress帖子中添加阅读进度栏。

为什么以及何时应该在WordPress中添加阅读进度栏

用户在决定停留还是离开之前只花几秒钟在网页上。如果你发布长篇文章，保持用户参与度将变得更具挑战性，因为它们要求用户向下滚动。

一些网站所有者添加与内联相关的帖子，其他一些网站所有者使用视频或图像画廊来保持用户在页面上。

阅读进度条增加了一些用户界面增强功能，鼓励用户向下滚动。它还可以激励用户完成他们正在阅读的文章。

许多受欢迎的网站（例如：The Daily Beast）都使用阅读进度指示器吸引读者。但是，你还需要确保阅读进度指示器很细微，并且不会破坏你网站上的用户体验。

话虽如此，让我们看看如何轻松地为WordPress帖子添加阅读进度指示器。

在WordPress帖子中添加阅读进度栏

你需要做的第一件事是安装并激活Worth The Read插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，你需要访问设置 » Worth The Read页面来设置进度条指示器。

首先，你需要通过选中“启用”选项来启用阅读进度栏。之后，你需要选择显示进度条的位置。

默认选项位于顶部，大多数网站都使用该选项。你可以对其进行更改以在页面的右侧，左侧或底部显示进度条。

该插件可让你选择进度条的前景色和背景色以匹配WordPress主题。背景颜色用于填充空白进度条，而前景颜色用于在用户向下滚动时显示进度。

你还可以通过选中“包含评论”选项将评论添加到进度条的总长度中。如果要包含评论，则还可以为评论进度区域选择其他背景颜色。

页面上的最后一个选项允许你为进度栏使用透明背景。选中此选项将覆盖背景颜色选项，并且当用户向下滚动文章时，仅显示前景色。

不要忘记单击“保存更改”按钮来存储你的设置。

就是这样，你现在可以访问网站上的任何帖子，以查看进度条。

阅读进度条指示器仅适用于单个帖子。当前，它不支持页面和自定义帖子类型。

另外还有一款付费版ReBar插件也可实现此功能。

ReBar 是一个有用的WordPress插件，用于在阅读博客文章期间改善用户体验。该插件将进度条添加到页面的顶部或底部。当你阅读帖子或滚动页面时，“阅读进度栏”将充满颜色或精美的渐变。对于长篇文章和文章，此类指标非常有用，可帮助读者了解距完成文章还有多远。

当然，由于WordPress久而久之的数据库增大，加上很多朋友不喜欢安装太多插件到网站，我个人不推荐使用。通过添加下面的代码也可以实现这一功能！

第一步：

在header.php添加css文件

<style id='mdp-rebar-inline-css'>#mdp-rebar-wrapper.rebar-position-left {
	width: calc(100vh + (8px / 2)) !important;
    left: calc(8px / 2) !important;
    top: calc(-8px / 2);
	}
			
	#mdp-rebar-wrapper.rebar-position-right {
	width: calc(100vh + (8px / 2)) !important;
	left: unset !important;
    right: calc(8px / 2);
    top: 100vh;
	}

	#mdp-rebar-element {
	height: 2px;
	}
</style>

第二步：

在footer.php添加js文件

<script id='mdp-rebar-js-extra'>var mdpRebarWP = {"color":"rgba(253, 44, 86, 0.8)","shadow":"1","position":"position-top","height":"2","style":"style-default","contentSelector":""};</script>
<script defer src='//chenlifeng.com/wp-byfiles/js/rebar.min.js' id='mdp-rebar-js'></script>

注意：请将js文件保存到本地，以免后期删除不可用！

第三步：

在主题自定义css调用代码

/*
* The style of Rebar
*/
#mdp-rebar-wrapper{z-index:99999}#wpadminbar+#mdp-rebar-wrapper{margin-top:32px}@media screen and (max-width:782px){#wpadminbar+#mdp-rebar-wrapper{margin-top:46px}}@media screen and (max-width:600px){#wpadminbar+#mdp-rebar-wrapper{margin-top:0}}#mdp-rebar-element{z-index:99999}.style-gradient #mdp-rebar-element{background:#c92c2c;background:linear-gradient(to right,#c92c2c 0,#eae42c 50%,#3cad26 100%)}.style-rounded #mdp-rebar-element{border-top-right-radius:50px;border-bottom-right-radius:50px}.style-plastic #mdp-rebar-element{box-shadow:inset 0 2px 9px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.4)}.style-animated #mdp-rebar-element{position:relative}.style-animated #mdp-rebar-element:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);z-index:1;background-size:50px 50px;-webkit-animation:mdp-rebar-animated 2s linear infinite;animation:mdp-rebar-animated 2s linear infinite;overflow:hidden}@-webkit-keyframes mdp-rebar-animated{0%{background-position:0 0}100%{background-position:50px 50px}}@keyframes mdp-rebar-animated{0%{background-position:0 0}100%{background-position:50px 50px}}.style-ios7 #mdp-rebar-element{background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55)}.style-shine #mdp-rebar-element{position:relative}.style-shine #mdp-rebar-element:after{content:'';opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:3px;-webkit-animation:mdp-rebar-animate-shine 2s ease-out infinite;animation:mdp-rebar-animate-shine 2s ease-out infinite}@-webkit-keyframes mdp-rebar-animate-shine{0%{opacity:0;width:0}50%{opacity:.5}100%{opacity:0;width:95%}}@keyframes mdp-rebar-animate-shine{0%{opacity:0;width:0}50%{opacity:.5}100%{opacity:0;width:95%}}.style-glow #mdp-rebar-element{position:relative}.style-glow #mdp-rebar-element:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset;-webkit-animation:mdp-rebar-animate-glow 1s ease-out infinite;animation:mdp-rebar-animate-glow 1s ease-out infinite}@-webkit-keyframes mdp-rebar-animate-glow{0%{box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset}50%{box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset}100%{box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset}}@keyframes mdp-rebar-animate-glow{0%{box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset}50%{box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset}100%{box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset}}.rebar-position-top{top:0}.rebar-position-bottom{bottom:0}.rebar-position-left{transform:rotate(90deg);transform-origin:left}.rebar-position-right{transform:rotate(90deg);transform-origin:right}

Ps：网友的小调整

有网友已经设法实现了一个运行良好的滚动进度条（是从 w3schools 复制的一个）。但他的问题是，在用户开始滚动之前，他希望进度条不是从 0 而是从 10%（宽度）开始。最初看起来不错，但在开始滚动后，它会重置为 0，当向上滚动时，它会滚动回值 0。

HTML

CSS

.progress-container {
  width: 80%;
  height: 30px;
  background-image: linear-gradient(to right, #4DE8E8, #D3C6FF);
  opacity: 0.7;
  position: fixed;
  left: 10%;
  top: 130px;
  border-radius: 50px;
  z-index: 1;
}

.progress-bar {
  height: 18px;
  background: white;
  left: 2%;
  width: 10%;
  border-radius: 50px;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.test {
  height: 1000px;
}

JavaScript + jQuery 3.3.1

window.onscroll = function() {myFunction()};

  function myFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 96;
    document.getElementById("myBar").style.width = scrolled + "%";
  };

是用小提琴来说明了他的意思：https://jsfiddle.net/z3s4hqvj

这时就可以试试这个小调整。

window.onscroll = function() {myFunction()};

function myFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 96;
    if(scrolled>10){
   		document.getElementById("myBar").style.width = scrolled + "%";
    }
};

希望本文能帮助你在WordPress中添加阅读进度条指示器。

查看演示