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

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

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

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

第一步:

在 header.php 添加 css 文件

  1. <style id='mdp-rebar-inline-css'>#mdp-rebar-wrapper.rebar-position-left {
  2. 	width: calc(100vh + (8px / 2)) !important;
  3.     left: calc(8px / 2) !important;
  4.     top: calc(-8px / 2);
  5. 	}
  6. 
    
  7. 	#mdp-rebar-wrapper.rebar-position-right {
  8. 	width: calc(100vh + (8px / 2)) !important;
  9. 	left: unset !important;
  10.     right: calc(8px / 2);
  11.     top: 100vh;
  12. 	}
  13. 	#mdp-rebar-element {
  14. 	height: 2px;
  15. 	}
  16. </style>

第二步:

在 footer.php 添加 js 文件

  1. <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>
  2. <script defer src='//www.themecat.net/files/js/rebar.min.js' id='mdp-rebar-js'></script>

注意:请将 js 文件保存到本地,以免后期删除不可用!

第三步:

在主题自定义 css 调用代码

  1. /*
  2. * The style of Rebar
  3. */
  4. #mdp-rebar-wrapper {
  5. 	z-index:99999
  6. }
  7. #wpadminbar+#mdp-rebar-wrapper {
  8. 	margin-top:32px
  9. }
  10. @media screen and (max-width:782px) {
  11. 	#wpadminbar+#mdp-rebar-wrapper {
  12. 	margin-top:46px
  13. }
  14. }@media screen and (max-width:600px) {
  15. 	#wpadminbar+#mdp-rebar-wrapper {
  16. 	margin-top:0
  17. }
  18. }#mdp-rebar-element {
  19. 	z-index:99999
  20. }
  21. .style-gradient #mdp-rebar-element {
  22. 	background:#c92c2c;
  23. 	background:linear-gradient(to right,#c92c2c 0,#eae42c 50%,#3cad26 100%)
  24. }
  25. .style-rounded #mdp-rebar-element {
  26. 	border-top-right-radius:50px;
  27. 	border-bottom-right-radius:50px
  28. }
  29. .style-plastic #mdp-rebar-element {
  30. 	box-shadow:inset 0 2px 9px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.4)
  31. }
  32. .style-animated #mdp-rebar-element {
  33. 	position:relative
  34. }
  35. .style-animated #mdp-rebar-element:after {
  36. 	content:"";
  37. 	position:absolute;
  38. 	top:0;
  39. 	left:0;
  40. 	bottom:0;
  41. 	right:0;
  42. 	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);
  43. 	z-index:1;
  44. 	background-size:50px 50px;
  45. 	-webkit-animation:mdp-rebar-animated 2s linear infinite;
  46. 	animation:mdp-rebar-animated 2s linear infinite;
  47. 	overflow:hidden
  48. }
  49. @-webkit-keyframes mdp-rebar-animated {
  50. 	0% {
  51. 	background-position:0 0
  52. }
  53. 100% {
  54. 	background-position:50px 50px
  55. }
  56. }@keyframes mdp-rebar-animated {
  57. 	0% {
  58. 	background-position:0 0
  59. }
  60. 100% {
  61. 	background-position:50px 50px
  62. }
  63. }.style-ios7 #mdp-rebar-element {
  64. 	background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55)
  65. }
  66. .style-shine #mdp-rebar-element {
  67. 	position:relative
  68. }
  69. .style-shine #mdp-rebar-element:after {
  70. 	content:'';
  71. 	opacity:0;
  72. 	position:absolute;
  73. 	top:0;
  74. 	right:0;
  75. 	bottom:0;
  76. 	left:0;
  77. 	background:#fff;
  78. 	border-radius:3px;
  79. 	-webkit-animation:mdp-rebar-animate-shine 2s ease-out infinite;
  80. 	animation:mdp-rebar-animate-shine 2s ease-out infinite
  81. }
  82. @-webkit-keyframes mdp-rebar-animate-shine {
  83. 	0% {
  84. 	opacity:0;
  85. 	width:0
  86. }
  87. 50% {
  88. 	opacity:.5
  89. }
  90. 100% {
  91. 	opacity:0;
  92. 	width:95%
  93. }
  94. }@keyframes mdp-rebar-animate-shine {
  95. 	0% {
  96. 	opacity:0;
  97. 	width:0
  98. }
  99. 50% {
  100. 	opacity:.5
  101. }
  102. 100% {
  103. 	opacity:0;
  104. 	width:95%
  105. }
  106. }.style-glow #mdp-rebar-element {
  107. 	position:relative
  108. }
  109. .style-glow #mdp-rebar-element:after {
  110. 	content:'';
  111. 	position:absolute;
  112. 	top:0;
  113. 	right:0;
  114. 	bottom:0;
  115. 	left:0;
  116. 	box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset;
  117. 	-webkit-animation:mdp-rebar-animate-glow 1s ease-out infinite;
  118. 	animation:mdp-rebar-animate-glow 1s ease-out infinite
  119. }
  120. @-webkit-keyframes mdp-rebar-animate-glow {
  121. 	0% {
  122. 	box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
  123. }
  124. 50% {
  125. 	box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset
  126. }
  127. 100% {
  128. 	box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
  129. }
  130. }@keyframes mdp-rebar-animate-glow {
  131. 	0% {
  132. 	box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
  133. }
  134. 50% {
  135. 	box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset
  136. }
  137. 100% {
  138. 	box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
  139. }
  140. }.rebar-position-top {
  141. 	top:0
  142. }
  143. .rebar-position-bottom {
  144. 	bottom:0
  145. }
  146. .rebar-position-left {
  147. 	transform:rotate(90deg);
  148. 	transform-origin:left
  149. }
  150. .rebar-position-right {
  151. 	transform:rotate(90deg);
  152. 	transform-origin:right
  153. }

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/80454

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买