在WordPress插件中如何将后台表单数据传递到前端JavaScript文件

这个需求完全可以实现。你当前用的是WordPress原生Settings API提交存储后台设置，jquery-field的值提交后会存在站点选项表中，只需要把存储好的配置值传递给前端JS即可，具体操作步骤如下：

首先要保证你已经在插件代码中注册了对应设置项，否则表单提交后数据不会被WordPress存储。在你的插件主文件中添加如下代码：

// 注册插件设置项
function my_plugin_register_settings() {
    register_setting('my_plugin_option_group', 'jquery-field');
}
add_action('admin_init', 'my_plugin_register_settings');

使用WordPress官方推荐的wp_localize_script函数实现PHP到JS的数据传递，这个方法比手动输出内联JS更规范、安全性更高。同样在插件主文件中添加如下代码：

// 加载前端JS并注入配置数据
function my_plugin_load_frontend_assets() {
    // 注册并加载你的前端JS文件，示例文件路径为插件目录下的js/frontend.js
    wp_enqueue_script( 
        'my-plugin-frontend-js', 
        plugin_dir_url( __FILE__ ) . 'js/frontend.js', 
        array('jquery'), // 依赖的JS库，没有可以留空数组
        '1.0.0', 
        true // 设为true表示JS加载在页脚，避免DOM未加载导致的操作报错
    );
    
    // 读取后台存储的配置值，第二个参数为默认值，未查询到配置时返回该值
    $saved_jquery_field = get_option('jquery-field', '');
    
    // 把配置值注入到JS全局变量中
    wp_localize_script( 
        'my-plugin-frontend-js', // 对应要接收数据的JS句柄，和上面wp_enqueue_script的第一个参数一致
        'MyPluginConfig', // 前端JS中调用的全局变量名，可自定义，不要和其他变量重名
        array(
            'jquery_field' => esc_js($saved_jquery_field) // esc_js做转义处理，避免XSS安全问题
        )
    );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_load_frontend_assets' );

打开你的前端JS文件（示例中是js/frontend.js），直接调用刚才定义的全局变量即可拿到配置值：

// 读取后台传递的字段ID
const targetFieldId = MyPluginConfig.jquery_field;
console.log('后台传递的配置值：', targetFieldId);

// 拿到值后即可实现你的业务逻辑，示例：选择对应ID的DOM元素
if(targetFieldId) {
    const targetElement = document.getElementById(targetFieldId);
    // 后续业务逻辑写在这里
}

• wp_localize_script必须在对应的JS文件wp_enqueue_script之后调用，否则数据无法正常注入到JS中
• 传递数据时必须加esc_js做转义处理，不要省略该步骤，避免出现XSS安全漏洞
• 如果需要传递多个配置值，直接在wp_localize_script的第三个参数数组中追加键值对即可

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