如何在WordPress中通过wp_localize_script传递PHP变量至JS文件

Hey there, ditching the iframe is the right call—they're clunky, can cause styling conflicts, and add unnecessary overhead. Let's walk through two reliable ways to pass your backend form data directly to your frontend JS using WordPress-native tools.

方法1：使用wp_localize_script（官方推荐） #

This is the standard approach for passing PHP data to enqueued JS files in WordPress. It's secure, clean, and integrates seamlessly with WordPress's script loading system.

步骤1：在你的PHP插件文件中注册并传递数据 #

First, you'll need to enqueue your JS file and attach your data to it. Replace the paths and data sources with your actual setup:

// 你的PHP插件主文件
function my_plugin_load_scripts() {
    // 注册你的目标JS文件（替换成你的JS文件路径）
    $js_path = plugin_dir_url( __FILE__ ) . 'assets/js/your-other-plugin.js';
    wp_register_script( 'my-plugin-frontend-js', $js_path, array( 'jquery' ), '1.0.0', true );

    // 准备要传递的数据——这里替换成你从表单获取/存储的实际数据
    $user_form_data = array(
        'submitted_name' => get_option( 'my_plugin_user_name' ), // 假设存在WP选项中
        'submitted_message' => get_post_meta( get_the_ID(), 'user_submitted_message', true ), // 如果存在文章元数据
        'is_user_logged_in' => is_user_logged_in() // 还能传递状态类数据
    );

    // 将数据绑定到JS文件，前端可通过`MyPluginData`变量访问
    wp_localize_script( 'my-plugin-frontend-js', 'MyPluginData', $user_form_data );

    // 加载JS文件
    wp_enqueue_script( 'my-plugin-frontend-js' );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_load_scripts' );

步骤2：在你的JS文件中使用数据 #

Now you can directly access the MyPluginData variable in your JS file to dynamically generate content:

// your-other-plugin.js 文件
document.addEventListener('DOMContentLoaded', function() {
    // 示例：动态插入数据到页面
    const contentContainer = document.getElementById('dynamic-content-area');
    if (contentContainer && MyPluginData) {
        contentContainer.innerHTML = `
            <div class="user-submission">
                <h3>你的提交内容</h3>
                <p><strong>姓名：</strong>${MyPluginData.submitted_name}</p>
                <p><strong>留言：</strong>${MyPluginData.submitted_message}</p>
            </div>
        `;
    }
});

方法2：直接在模板/短代码中输出JS变量（适合局部场景） #

If you only need the data in a specific part of your site (like a shortcode-generated section), you can output a JS variable directly in the PHP template/shortcode:

// 示例：短代码函数
function my_plugin_dynamic_content_shortcode() {
    // 获取存储的表单数据
    $form_data = get_option( 'my_plugin_submitted_form_data' );
    
    // 用wp_json_encode确保数据安全转义，避免XSS风险
    $json_data = wp_json_encode( $form_data );

    ob_start();
    ?>
    <div id="dynamic-content"></div>
    <script>
        // 定义全局变量（或局部变量，根据需求调整）
        const userFormData = <?php echo $json_data; ?>;
        
        // 直接在这里使用数据，或者让外部JS访问
        document.getElementById('dynamic-content').innerHTML = `
            <p>你提交的内容是：${userFormData.submitted_content}</p>
        `;
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'my_dynamic_content', 'my_plugin_dynamic_content_shortcode' );

关键注意事项 #

• 安全第一：始终用wp_json_encode处理要传递的数据，它会自动转义特殊字符，防止XSS攻击。
• 权限验证：如果数据是用户敏感数据，记得在PHP中添加权限检查（比如current_user_can()），确保只有授权用户能访问。
• 避免全局污染：如果用方法1，尽量给你的JS变量起独特的名字（比如MyPluginData而非data），避免和其他插件冲突。

这种方式比iframe高效太多——没有额外的HTTP请求，数据直接在页面上下文里，也不会有iframe的样式/交互问题。

Let me know if you need help adapting this to your specific data storage setup (like if you're using a custom database table instead of options/post meta)!

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