WordPress实现文章阅读进度条

前言

wp是有插件可以显示阅读进度条的，但是我特别不喜欢安装插件（目前我wp就两个插件），我也推荐大家能用代码就用代码，尽量少用插件。

教程

在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>

在主题自定义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}