wordpress主题自由添加顶端页面加载进度条

实现效果：

pace.js

pace.js是一个非常先进的JavaScript插件，可以实时监听页面的数据加载，包括Ajax请求，显示页面加载进度，并且能够定制样式，功能强大。

一、下载并上传pace.js到你的网站服务器目录

首先下载：pace.js
把下载好的pace.min.js放至到你需要更改的主题的主题~\assets\js目录中.
(注意文件权限需要跟此目录下其余文件保持一致，下同！切记，切记！)

二、 修改主题模板的函数：

将如下代码放置到函数模板functions.php的最后位置：

wp_enqueue_script( ‘pace.min’, get_theme_file_uri( ‘/assets/js/pace.min.js’ ), array( ‘jquery’ ), ‘1.0’, true );

(注意以上代码中pace.min以及/assets/js/pace.min.js,如需要更改文件名称则需要修改相对应的部分)
你可以直接在wordpress的仪表盘中修改，也可以直接后台修改文件，备份是必不可少的步骤，切记！

三、 添加样式代码到主题中

将如下样式应用到css样式中

对于无操作经验用户，您可以到主题设置中找到例如“自定义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: #3690cf; /*此为HEX十六进制颜色码,您可以通过调节此处来更改颜色*/
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;/*此为高度2px的线条，如果您觉得不够粗，可以调节此处*/
}