Wordpress 加载进度条
网站越来越完善，但是总想着为网站添加一个进度条，在顶部显示，不要求太复杂的效果，就是一条线，显示加载的过程就行。于是乎开始找点资料进行，总是发现插件版本的，而且还是 $15 美元一个，太不划算。无意之中找到一个 js 版本的，而且能够实时显示加载进度，而且简单，只要添加 js 引用和涉及一个简单的 Css 就可投入使用，放出代码：
1、首先下载 pace.js 文件，放入你的主题下的目录，例如 JS 目录下面；
2、在主题的 header.php 文件插入以下代码：
HTML
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/pace.min.js”></script>
CSS
/* Loading 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: #ff6e0c;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
-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: #ff6e0c;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
刷新页面就可以看见效果，进度条的高度、颜色，可以根据个人的喜好调整 Css。之前看教程有个方法是利用 Function.php 添加钩子调用 Js 的方法，可是总是报错，所以灵机一动，直接在网站头部文件调用 Js ，一样可以实现出来。至于 Function.php 的方法，以后有机会再调试好发出来。
Last Updated On Feb 14, 2023 At 08:32:12 PM
Author Box
名字：Sunny
注册：Jan 30, 2021
简介：技术菜鸟，拷贝、黏贴代码中 ……
注册：Jan 30, 2021
简介：技术菜鸟，拷贝、黏贴代码中 ……
