在开发 WordPress 主题或插件时，后台页面的 CSS 和 JS 你正确加载了吗？最近看了很多主题和插件，竟然大部分都是直接使用 wp_enqueue_style、wp_enqueue_script ，是不是感觉就应该是这样？你在后台打开另外一个页面查看一下源代码，是不是发现你的 CSS 也加载了？后台每个页面都加载了，不仅降低了性能，更有可能造成冲突。

如何解决这个问题呢，下面是比较常用的几种方法：

一、使用 admin_enqueue_scripts 传递过来的$hook_suffix 参数判断。

二、使用 admin_print_scripts-(page_hook)、admin_print_styles-(page_hook)。

三、使用全局变量$pangenow 判断当前页面。

四、使用 get_current_screen()的 id 判断。

 

第一种方法：

第一步：添加自定义菜单时赋值到一个参数：

$page_hook = add_menu_page( …… );

第二部：加载时判断页面：

if ( $page_hook === $hook ) {
   wp_enqueue_style( …… );
   wp_enqueue_script( …… );
}

现在有两个问题，如果写在两个函数中$page_hook 是独立的，$hook 是哪里来的？

1、将$page_hook 声明为全局变量。

2、$hook 由 admin_enqueue_scripts 传递过来。

看完完整代码就明白了：

/**
 * 添加动作
 */
add_action( 'admin_menu', 'pageMenu' );
add_action( 'admin_enqueue_scripts', 'loadStatic' );
		
/**
 * 页面菜单
 */
function pageMenu() {

    global $page_hook;

    $page_hook = add_menu_page( …… );

}

/**
 * 加载静态文件
 */
function loadStatic( $hook ) {

    global $page_hook;

    if ( $page_hook === $hook ) {
        wp_enqueue_style( …… );
        wp_enqueue_script( …… );
    }

}

如果是添加 METABOX 等无法获取 PAGE_HOOK 的，直接对比 HOOK 的值：

/**
 * 添加动作
 */
add_action( 'admin_enqueue_scripts', 'loadStatic' );	

/**
 * 加载静态文件
 */
function loadStatic( $hook ) {

    if ( $hook === 'post-new.php' || $hook === 'post.php' ) {
        wp_enqueue_style( …… );
        wp_enqueue_script( …… );
    }

}

 

第二种方法：

第二种方法是使用动作钩子，很简单不多解释，直接上代码：

global $page_hook;

/**
 * 添加动作
 */
add_action( 'admin_menu', 'pageMenu' );
add_action( 'admin_print_scripts-' . $page_hook, 'loadStatic' );
	
/**
 * 页面菜单
 */
function pageMenu() {

    global $page_hook;

    $page_hook = add_menu_page( …… );

}

/**
 * 加载静态文件
 */
function loadStatic( ) {

    wp_enqueue_style( …… );
    wp_enqueue_script( …… );

}

 

第三种方法：

直接在加载 CSS 和 JS 和函数里调用全局变量$pagenow 做判断：

//* 全局变量
global $pagenow

//* 判断 PAGENOW
if ( $pagenow === 'post-new.php' || $pagenow === 'post.php' ) {
	wp_enqueue_style(...);
	wp_enqueue_script(...);
}

 

第四种方法：

直接在加载 CSS 和 JS 的函数里判断 screen id：

//* 获取对象
$screen = get_current_screen();
 
//* 判断页面 ID
if ( $screen->id === 'post' ) {
    wp_enqueue_style(...);
    wp_enqueue_script(...);
}

上面 post 就是发表、编辑文章页面，如何知道自己的页面 ID 呢，页面中插入下列代码：

<?php echo '<pre>' . print_r(get_current_screen(), true) . '</pre>'; ?>

看一下显示的 ID 内容就行了，这种方法也可以用在自己添加的页面里，你看过几个页面之后就会发现规律的。

 

总结一下：

1、一般情况推荐使用第一种方法。

2、第三、四种方法比较灵活，可根据自己的实际情况选择使用。

 

添加 METABOX 等无法获取 PAGE_HOOK 的说一下区别：

$hook === ‘post-new.php’ || $hook === ‘post.php’

$pagenow === ‘post-new.php’ || $pagenow === ‘post.php’

上面两种方式在文章和页面的添加编辑时生效。

$screen->id === ‘post’

只在文章的添加和编辑时生效。

$screen->id === ‘page’

只在页面的添加和编辑时生效。