学习折腾

WordPress添加页面加载进度条(PACE.JS)

今天给博客加了一个好看的插件 PACE.JS 加载条,你们可以刷新下看页面顶部,有一条蓝色的加载线。

下面记录一下该文章来自:Zhaoyue.me添加教程:

一、下载 PACE.JS 上传到你的 媒体

(为何要上传到媒体库呢,因为用的主题是niRvana,作者一直维护更新,所以我没有上传到主题里去,这个是防止修改主题后,作者更新了我这边还得二次添加,麻烦。)

二、打开 WPJAM 插件 → 样式定制 → 前台定制 添加 JS 引用代码样式 代码

(WPJAM是水煮鱼大神的一款Wordpress优化插件,属于必装插件,后台→插件→插件安装→搜索 就可以找到。)

/*Js引用*/
<script src="你上传的位置/PACE.JS"></script>
/*加载条*/
.pace {-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-该文章来自:Zhaoyue.meselect:none;user-select:none;}
.pace-inactive {display:none;}
.pace .pace-progress {background:#20a0ff;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px;}

然后就完成了,是不是简单?

如果你不喜欢这个加载条样式,还该文章来自:Zhaoyue.me可以去官网选择其他加载条样式:http://github.hubspot.com/pace/docs/welcome/

0 条回应