WordPress中wp_localize_script()使用问题：PHP变量无法传递到JS

问题场景 #

开发WordPress插件时，已通过wp_enqueue_scripts()入队句柄为my_script的JS文件，但在后台子菜单页面my_page.php中调用wp_localize_script传递动态计数器值后，JS控制台提示my_js_object未定义。

核心原因 #

wp_localize_script必须在目标脚本入队之后、页面输出之前执行。直接在子菜单页面中调用该函数，大概率是脚本已经完成输出，导致本地化变量无法被注入到JS中。另外，后台页面的脚本入队应该使用admin_enqueue_scripts钩子而非前台的wp_enqueue_scripts。

正确配置步骤 #

1. 调整脚本入队与本地化的时机（修改functions.php） #

将脚本入队和变量本地化逻辑统一放到admin_enqueue_scripts钩子中，并通过页面标识判断是否仅在目标子菜单页面执行：

add_action('admin_enqueue_scripts', 'enqueue_my_admin_scripts');
function enqueue_my_admin_scripts($hook_suffix) {
    // 替换为你的子菜单页面实际hook后缀，可临时在my_page.php中echo $GLOBALS['hook_suffix']获取
    if ($hook_suffix !== 'your-plugin-slug_page_my_page') {
        return;
    }

    // 入队JS脚本，替换为实际的文件路径
    wp_enqueue_script(
        'my_script',
        plugin_dir_url(__FILE__) . 'assets/js/my_script.js',
        array('jquery'), // 若依赖jQuery则添加，否则留空数组
        '1.0.0',
        true // 放在页面底部加载，优化性能
    );

    // 本地化PHP变量到JS
    $my_counter = get_my_count();
    $ajax_url = admin_url('admin-ajax.php'); // 标准WP AJAX地址
    wp_localize_script(
        'my_script',
        'my_js_object',
        array(
            'ajax_url' => $ajax_url,
            'my_counter' => $my_counter
        )
    );
}

2. 移除子菜单页面中的本地化代码 #

删除my_page.php里的wp_localize_script相关代码，避免重复或时机错误的调用。

3. 确保JS代码执行时机正确 #

修改my_script.js，确保在DOM加载完成后再访问本地化变量，避免因脚本加载顺序问题导致未定义：

document.addEventListener('DOMContentLoaded', function() {
    console.log(my_js_object.my_counter);
});

关键注意事项 #

• 确认$hook_suffix的准确性：每个后台页面都有唯一的hook后缀，必须匹配才能仅在目标页面加载脚本和变量。
• 句柄名称严格一致：wp_localize_script的第一个参数必须和wp_enqueue_script的句柄完全相同（大小写敏感）。
• 依赖项正确设置：如果JS依赖其他脚本（如jQuery），入队时必须在第三个参数中声明，保证加载顺序。

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