CoreNext主题美化 - 顶部添加滚动进度条百分比

在博客浏览文章的时候无法看到文章浏览了多少了，这个时候我们就需要一个进度条来展示。好软猫给大家带来了比较常见的顶部美化彩色进度条，跟着教程来就可以实现用户浏览时实时看到浏览进度百分比了。

效果截图

js文件

放置到wp-content/themes/CoreNext-Child/js

123云盘

来源：123盘 | 提取码:q6wM

立即下载

CSS文件

将以下PHP代码放到：主题设置-插入代码-CSS代码

/*顶部滚动条_好软猫[www.haoruanmao.com]*/
#percentageCounter{
  position:fixed; 
  left:0; 
  top:0; 
  height:3px; 
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
}

PHP代码放置

将以下PHP代码放到：主题设置-插入代码-页脚代码

将以下PHP代码放到：主题设置-插入代码-页头代码

<!--顶部彩色进度条_好软猫[www.haoruanmao.com]-->
<div id="percentageCounter"></div>

来源：云亿企