无插件为wordpress网站顶部添加进度条【WP系列教程之九】

有时候你是否看到在点击别人网站完成加载之前网站顶部有进度条在跑呢，你是否也想让你的网站拥有此特效呢。

进度条样式

这些特效呢，有的是使用js来完成的，在加载到代码是显示一个条出来，然后控制这个条的宽度，有的是通过CSS来实现的，今天就把代码贴出来，用来无插件为wordpress网站顶部添加彩色进度条，话不多说，代码如下：

js+CSS实现方法：

1.下载pace.min.js文件，

立即下载

2.将pace.min.js放到主题根目录js目录中。

3.打开主题函数模板functions.php，将以下代码加入并保存：

PS：注意修改为对应的js文件路径

wp_enqueue_script('pace.min', get_theme_file_uri('/js/pace.min.js'), array('jquery'),'1.0',true);

4.将样式代码，添加到主题style.css最后:

/** 进度条样式**/
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.pace-inactive {
opacity: 0;
filter: alpha(opacity=0);
}
.pace .pace-progress {
background: #ff0000;
position: fixed;
z-index: 2000;
top: 0;
rightright: 100%;
width: 100%;
height: 3px;
}