WordPress enqueue一次说明白(2021)

最后更新于 2022 年 2 月 21 日

WordPress enqueue – WordPress引入css/js的方法，如何全局加载，或仅在某些页面精准加载，什么时候需要先注册脚本再加载，一次说个明白。

WordPress enqueue – 前台

用wp_enqueue_script()函数加载js，用wp_enqueue_style()加载css，加载资源的位置（action）只有一个——wp_enqueue_scripts。

用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系，防止重复加载，以twentyfifteen主题为例。

function sola_enqueue() {   
    //全局加载一般的样式表
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

    //全局加载主样式表
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

    //全局加载仅用于IE的样式表
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

    //全局加载js脚本
    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
    
    //给js脚本传递变量，解决脚本中不能调用php的问题
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'sola_enqueue' );

若仅在某些页面加载，利用WordPress的Conditional Tags即可。

示例：给资源文件添加时间戳

如果网站的样式或js脚本频繁更改，而这些资源会被用户浏览器缓存，导致用户看到错误的网站样式， 给资源文件后面添加时间戳可以防止这种情况，比如script.js会变成下面的样子

https://www.solagirl.net/wp-content/themes/storefront/script.js?ver=1633512585

代码如下：

function sola_enqueue(){
	$resources = array(
		array('style.css', 'style'),
		array('script.js','script')
	);

	$resources = apply_filters( 'sola_enqueue_resources', $resources);

	wp_enqueue_script('jquery');

	foreach( $resources as $file ){

		if( !isset($file[1]) ){
			continue;
		}

		if( $file[1] == 'style' ){
			$themecsspath = get_stylesheet_directory() . '/' . $file[0];
			wp_enqueue_style(
			    $file[0],
			    get_stylesheet_directory_uri() . '/' . $file[0],
			    array(),
			    filemtime( $themecsspath )
			);
		}

		if( $file[1] == 'script' ){
			$themejspath = get_stylesheet_directory() . '/' . $file[0];
			wp_enqueue_script(
			    $file[0],
			    get_stylesheet_directory_uri() . '/' . $file[0],
			    array(),
			    filemtime( $themejspath )
			);
		}
	}

}

什么时需要先注册css/js

即何时需要使用wp_register_script()和wp_register_style()函数。

当css/js很多，并且要分情况加载时，使用wp_register_script()可以更好的管理资源，避免重复劳动。下面的示例代码中，先在init action上把所有需要用到样式表都注册一遍，之后不管想在哪里引入，都可以简单的用wp_enqueue_style( $handle )来加载。

function sola_init(){
    $url = get_template_directory_uri();
    // 注册样式表
    $styles = array(
        'style1' => $url . '/css/style1.css',
        'style2' => $url . '/css/style2.css',
        'style3' => $url . '/css/style3.css'
    );

    foreach( $styles as $k => $v ){
        wp_register_style( $k, $v, false ); 
    }

    // 注册脚本
    
    // 其它需要在init action处运行的脚本
}
add_action( 'init', 'sola_init' );

注册脚本时需要运行$wp_scripts->add( $handle, $src, $deps, $ver );，若脚本没有注册直接使用wp_enqueue_script，需要先调用add方法，也就是说重复enqueue一个脚本就会运行多次add方法，降低了程序的效率。

在WordPress登录页面加载

将action替换为login_enqueue_scripts即可，例如

function sola_enqueue_for_login(){
    wp_enqueue_style( 'core', 'style.css', false );
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'login_enqueue_scripts', 'sola_enqueue_for_login' );

如果想了解其它方式，可以仔细阅读wp-login.php。

在后台全局加载

同理，将action改为admin_enqueue_scripts

function sola_admin_enqueue() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'sola_admin_enqueue' );

想了解更多方法，请阅读wp-admin/admin-header.php。

在后台按需加载

仅用于后台某些页面的资源只在这些页面加载就好，不要到处使用，可以减少不必要的冲突。

$hook_suffix

首先我们可以根据admin_enqueue_scripts这个action传递的$hook_suffix参数来判断所处的页面，例如仅在edit.php加载，代码如下

function sola_conditional_enqueue( $hook_suffix ) {
    if ( 'edit.php' == $hook_suffix ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }    
}
add_action( 'admin_enqueue_scripts', 'sola_conditional_enqueue' );

edit.php就是post、page或者custom post type的列表页面，编辑页面是post.php，新建页面是post-new.php，可以在不同页面打印$hook_suffix来了解它的使用方法。但由此也可看出它不能区分现在是在哪种post页面，需要借助更多的全局变量来判断。

$typenow

全局变量$typenow可以告诉我们当前的post type，例如仅在post的列表页面加载可以这样来判断

function sola_conditional_enqueue( $hook_suffix ) {
    global $typenow;
    if ( 'edit.php' == $hook_suffix && $typenow == 'post' ) {
       wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
    }    
}
add_action( 'admin_enqueue_scripts', 'sola_conditional_enqueue' );

get_current_screen()

上述两个全局变量可以区分大多数情况，若区分不了，可以试试使用get_current_screen()函数，该函数返回当前页面的post type、ID、base等信息，只能在admin_init之后使用，具体可以参考官方文档。

$pagenow

全局变量$pagenow的返回值与$hook_suffix类似，只是它在前台后台都可以访问，定义的更早，例如前三者在admin_init处没有值，但$pagenow却有。

它定义在wp-includes/vars.php中，该文件还定义了浏览器、服务器全局变量，例如$is_winIE、$is_apache，wp_is_mobile()函数也在这里出现。

上述全局变量和函数能区分大多数情况，但依然有无力的时候，这时可以借助$_REQUEST来判断。上述变量的值也是从$_REQUEST获取，但多一层值是否存在的检查，所以能用它们解决的就不要用$_REQUEST或者$_GET。