首页 问答 正文

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

注册会员 / 悠然自学 / 2023-07-11/ 浏览 140 次

在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_scriptwp_enqueue_style 函数来加载 NProgress 库和自定义脚本。

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

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

大家谈论
    我的见解