首页 Wordpress WordPress 加载Javascript和CSS的方法

WordPress 加载Javascript和CSS的方法

GavinWu 2022年03月24日 8:03 Wordpress 439 Views

我们知道正常一个网页加载Javascript和CSS,一般的方法是在head中通过下面的方法来加载

1
2
<script type="text/javascript" src="js文件路径"></script>
<link rel="stylesheet" type="text/css" href="css文件路径">

但在wordpress中有更加高效的加载方式,在function.php里进行动态的加载。官方文档很多内容,包括register注册和enqueue队列两种,通过wordprss官方文档里的解释有非常多,复杂难明。没有直接了当的说明什么时候用什么。但我在官方主题的引用方法里得出结论:
1、CSS,官方主题里直接用的enqueue队列方式;
2、Javascript,建议直接使用enqueue队列方式。
总之,不知道的话就使用队列加载。
贴上我的加载实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//加载样式表和jquery库
function mytheme_scripts() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), $theme_version );//加载主样式表
    wp_enqueue_style(  'font-awesome' , get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );//加载font-awesome
        //全局加载js脚本
    wp_enqueue_script( 'min-script', get_template_directory_uri() . '/js/jquery.min.js', array( 'jquery' ) );//加载本地JS库,如果要加载远程库,替换成具体网址
    //页面、文章页面等加载灯箱效果
    if ( is_singular() ) {
    wp_enqueue_style( 'fancybox-style',  'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');//灯箱
    wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'); 
     }
      // 评论回复样式表.
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本
    wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

wp_enqueue_script和wp_register_script分别什么时候使用

网上通用的说法是:当我们有一个脚本, 它会在多个地方被引用, 我们就应该先使用wp_register_script进行注册, 然后通过wp_enqueue_script进行引用, 这样做可以有效的对脚本进行统一管理, 避免硬编码, 这就好比我们使用枚举来替代魔法数一样. 万一我们需要修改脚本路径的时候, 只需要在wp_register_script注册的函数中修改一次, 而不需要在wp_enqueue_script进行多次修改。
而且分别加载,不需要的时候不加载,能有增加加载速度的作用。
我们看看官方主题是如何加载的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function twenty_twenty_one_scripts() {
    // 兼容IE加载不同的样式表
    global $is_IE, $wp_scripts;
    if ( $is_IE ) {
        // 如果是IE就加载下面的样式表
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
    } else {
        // 如果不是IE就加载标准的样式表
        wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
    }
    // 加载RTL 样式表.
    wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );

    // 加载Print styles.
    wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

    // 评论回复样式表.
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本
        wp_enqueue_script( 'comment-reply' );
    }
    // Register the IE11 polyfill file.
    wp_register_script(
        'twenty-twenty-one-ie11-polyfills-asset',
        get_template_directory_uri() . '/assets/js/polyfills.js',
        array(),
        wp_get_theme()->get( 'Version' ),
        true
    );

    // Register the IE11 polyfill loader.
    wp_register_script(
        'twenty-twenty-one-ie11-polyfills',
        null,
        array(),
        wp_get_theme()->get( 'Version' ),
        true
    );
    wp_add_inline_script(
        'twenty-twenty-one-ie11-polyfills',
        wp_get_script_polyfill(
            $wp_scripts,
            array(
                'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
            )
        )
    );
    // 加载菜单脚本.
    if ( has_nav_menu( 'primary' ) ) {
        wp_enqueue_script(
            'twenty-twenty-one-primary-navigation-script',
            get_template_directory_uri() . '/assets/js/primary-navigation.js',
            array( 'twenty-twenty-one-ie11-polyfills' ),
            wp_get_theme()->get( 'Version' ),
            true
        );
    }
    // Responsive embeds script.
    wp_enqueue_script(
        'twenty-twenty-one-responsive-embeds-script',
        get_template_directory_uri() . '/assets/js/responsive-embeds.js',
        array( 'twenty-twenty-one-ie11-polyfills' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );

从上面的代码我们可以看出来,全局性的css和Javascript他都是直接使用wp_enqueue_scripts来加载,单独注册再列队的也有,所以个人认为可以只使用wp_enqueue_scripts来加载Javascript并不会影响使用。当然如果你先使用wp_register_script注册, 再使用wp_enqueue_script进行引入,那一定是正确的。

引用文档:
1、https://blog.csdn.net/qq_39482708/article/details/122519611
2、https://developer.wordpress.org/reference/functions/wp_enqueue_script/

相关文章

  • 暂无相关文章
七牛

Comments | 2 条评论

发表评论

QR Code

本页二维码