WordPress特定页面加载CSS/JS问题：插件设置页无法加载资源

我尝试在WordPress后台特定页面加载CSS和JS文件，使用的代码如下：

public $pages = array(
    'post', 'post-new', 'profile', 'user-edit',
    'options-general',
);
public function admin_scripts() {
    $screen = get_current_screen();
    $css_path = 'lib/css/app-admin.css';
    $js_path = 'lib/js/app-admin.js';
    wp_register_style( 'app-admin', APP_URL . $css_path, array(), _ver( $css_path ) );
    wp_register_script( 'app-admin', APP_URL . $js_path, array(), _ver( $js_path ), true );
    
    if ( in_array( $screen->base, $this->pages ) ) {
        wp_enqueue_style( 'app-admin' );
        wp_enqueue_script( 'app-admin' );
        wp_localize_script( 'app-admin', 'XFAPJS', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'nonce' => wp_create_nonce( 'app_nonce', 'app_nonce' ),
            'base' => $screen->base,
            'blocksEditor' => method_exists( $screen, 'is_block_editor' ) && $screen->is_block_editor() ? true : false
        ) );
        wp_add_inline_script( 'app-admin', 'APP.init();' );
    }
}

目前这些资源可在post、post-new、profile、user-edit页面正常加载，但无法在我的插件设置页（http://wp.local/wp-admin/options-general.php?page=xapp）加载，请问问题出在哪里？

问题原因 #

1. 页面标识匹配不精准：
   你通过$screen->base判断页面，但对于用add_options_page创建的插件设置子页面，$screen->base确实是options-general，但部分场景下（比如页面注册顺序、WordPress内部页面初始化逻辑），仅靠这个值无法确保匹配到你的专属插件页。插件设置页的唯一标识是$screen->id，格式为options-general_page_xapp（xapp是你注册页面时的menu_slug参数），你的$pages数组未包含这个值，导致判断逻辑未触发。

2. wp_create_nonce参数错误：
   代码中wp_create_nonce( 'app_nonce', 'app_nonce' )传递了两个参数，但wp_create_nonce仅接受1个参数（action名称），这个错误可能在插件设置页触发脚本初始化失败，进而表现为资源未加载（其他页面看似正常是因为错误未在这些页面触发显性问题，但潜在bug依然存在）。

解决方案 #

方案1：添加插件页的唯一screen id

修改$pages数组，加入插件设置页的screen id：

public $pages = array(
    'post', 'post-new', 'profile', 'user-edit',
    'options-general',
    'options-general_page_xapp', // 替换为你的插件页实际screen id
);

你可以在admin_scripts函数中临时添加var_dump($screen->id);，访问插件设置页即可获取准确的screen id。

方案2：增强判断逻辑

如果需要同时匹配options-general主页面和插件子页面，可修改判断条件：

$target_pages = $this->pages;
$is_plugin_settings = strpos( $screen->id, 'options-general_page_xapp' ) !== false;

if ( in_array( $screen->base, $target_pages ) || $is_plugin_settings ) {
    // 原资源加载逻辑
}

方案3：修复wp_create_nonce参数错误

将错误的双参数调用改为正确的单参数形式：

'nonce' => wp_create_nonce( 'app_nonce' ),

内容的提问来源于stack exchange，提问作者Dimitry