在WordPress主题中添加页面加载进度条,可以使用NProgress库。以下是添加页面加载进度条的步骤:
functions.php
文件中添加以下代码,用于 enqueue NProgress 库和自定义脚本:function enqueue_nprogress() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'nprogress', get_template_directory_uri() . '/js/nprogress.js', array( 'jquery' ), '0.2.0', true );
wp_enqueue_style( 'nprogress-style', get_template_directory_uri() . '/css/nprogress.css', array(), '0.2.0', 'all' );
wp_enqueue_script( 'custom-nprogress', get_template_directory_uri() . '/js/custom-nprogress.js', array( 'jquery', 'nprogress' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_nprogress' );
上面代码的核心是使用 wp_enqueue_script
和 wp_enqueue_style
函数来加载 NProgress 库和自定义脚本。
js
文件夹,并在其中创建一个名为nprogress.js
的文件。在nprogress.js
文件中,添加以下代码:(function($) {
$(document).ready(function() {
NProgress.configure({ showSpinner: false }); // 隐藏加载动画
$(window).on('beforeunload', function() {
NProgress.start(); // 页面开始加载时显示进度条
});
$(window).on('load', function() {
NProgress.done(); // 页面加载完成后隐藏进度条
});
});
})(jQuery);
上面的脚本使用了jQuery来监听页面加载事件,并在加载前显示进度条,加载完成后隐藏进度条。可以根据需要修改进度条的样式。
nprogress.css
的文件,在主题的根目录下的css
文件夹中,并添加以下代码:/* 样式可以根据自己的需求进行修改 */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
上述代码中的样式可以根据个人喜好进行更改。
完成上述步骤后,在WordPress主题中就已经成功添加了页面加载进度条。