如何从WordPress的front-page.php向JavaScript传递变量？

核心问题是**wp_enqueue_scripts钩子在模板文件（如front-page.php）加载前就已经执行完毕**，你写在front-page.php里的pass_var_to_js函数根本没机会被钩子触发，自然无法完成变量传递。而functions.php是WordPress加载主题时优先读取的文件，钩子能正常捕获到函数执行。

下面提供几种可行的解决方法：

方案一：在functions.php中限定仅首页执行（推荐） #

将代码保留在functions.php中，添加首页判断逻辑，确保仅在首页加载脚本并传递变量，符合WordPress钩子规范：

function pass_var_to_js() {
    // 仅在首页执行
    if ( !is_front_page() ) {
        return;
    }

    // 注册sample.js脚本（替换为你实际的脚本路径）
    wp_enqueue_script(
        'sample-script',
        get_template_directory_uri() . '/js/sample.js',
        array(), // 若依赖jQuery，可改为array('jquery')
        '1.0',
        true // 设置为true，让脚本在body底部加载，确保变量先被定义
    );

    // 传递PHP变量到JS
    $my_variable = 'test php var';
    wp_localize_script(
        'sample-script', // 必须与上方注册的脚本handle一致
        'jsObject',
        array( 'myVar' => $my_variable )
    );
}
add_action( 'wp_enqueue_scripts', 'pass_var_to_js' );

完成后，sample.js中的console.log(jsObject.myVar)即可正常输出变量。

方案二：直接在front-page.php输出内联变量（适合简单场景） #

若不想修改functions.php，可直接在front-page.php的wp_body_open()之后或wp_footer()之前输出内联JS变量，同时确保sample.js在变量之后加载：

// front-page.php中，wp_body_open()之后的位置
wp_body_open();
?>
<script>
// 用esc_js()转义变量，避免XSS风险
var jsObject = { myVar: '<?php echo esc_js($my_variable); ?>' };
</script>
<?php

// 注册并加载sample.js（放在内联脚本之后）
wp_enqueue_script(
    'sample-script',
    get_template_directory_uri() . '/js/sample.js',
    array(),
    '1.0',
    true
);

方案三：使用wp_add_inline_script在模板中传递变量 #

如果坚持要在front-page.php中操作，可借助wp_add_inline_script附加变量，同时改用wp_footer钩子确保代码能被触发：

// front-page.php中
function pass_var_to_js_front() {
    $my_variable = 'test php var';
    
    // 注册sample.js脚本
    wp_enqueue_script(
        'sample-script',
        get_template_directory_uri() . '/js/sample.js',
        array(),
        '1.0',
        true
    );

    // 用inline脚本传递变量，指定before确保变量在sample.js前输出
    wp_add_inline_script(
        'sample-script',
        'var jsObject = ' . json_encode( array( 'myVar' => $my_variable ) ) . ';',
        'before'
    );
}
// 改用wp_footer钩子，此时模板已加载，钩子尚未执行
add_action( 'wp_footer', 'pass_var_to_js_front' );

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