如何在wordpress主题中添加页面加载进度条？

在WordPress主题中添加页面加载进度条，可以使用NProgress库。以下是添加页面加载进度条的步骤：

1. 在主题的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 库和自定义脚本。

2. 在主题的根目录下创建一个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来监听页面加载事件，并在加载前显示进度条，加载完成后隐藏进度条。可以根据需要修改进度条的样式。

3. 创建一个名为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主题中就已经成功添加了页面加载进度条。