纯代码实现 WordPress 文章阅读进度条

PetitQ WordPress教程 2020-9-18 2.19K 0 0

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

用户在决定停留还是离开之前只花几秒钟在网页上。如果你发布长篇文章，保持用户参与度将变得更具挑战性，因为它们要求用户向下滚动。一些网站所有者添加与内联相关的帖子，其他一些网站所有者使用视频或图像画廊来保持用户在页面上。阅读进度条增加了一些用户界面增强功能，鼓励用户向下滚动。它还可以激励用户完成他们正在阅读的文章。许多受欢迎的网站（例如：The Daily Beast）都使用阅读进度指示器吸引读者。但是，你还需要确保阅读进度指示器很细微，并且不会破坏你网站上的用户体验。话虽如此，让我们看看如何轻松地为 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='//www.themecat.net/files/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
```
```
}
```

纯代码实现 WordPress 文章阅读进度条

已有 547 人购买

永久更新：
演示数据：
提取码：5088

立即购买

查看演示升级 VIP 立刻购买

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

纯代码实现 WordPress 文章阅读进度条

第一步：

第二步：

第三步：

纯代码实现 WordPress 文章阅读进度条

相关文章

WordPress 判断当前分类是否有子分类

WordPress 实现自动记录404死链并提交百度站长平台

WordPress完美解决文章ID不连续的方法

发表回复取消回复

热销模板

WordPress教程

第一步：

第二步：

第三步：

纯代码实现 WordPress 文章阅读进度条

相关文章

发表回复 取消回复

热销模板

发表回复取消回复