在WordPress中创建带属性短代码，求助JS点击传数据到PHP方法

没问题，我来帮你搞定这个需求！在WordPress里实现这个功能，核心是用AJAX完成前端JS和后端PHP的安全数据交互，同时遵循WordPress的开发规范，下面是具体的分步实现：

1. 先做好WordPress脚本的基础配置 #

首先要确保你的JS文件被WordPress正确加载，并且传递AJAX必需的全局变量（比如请求地址和安全验证码）。把这段代码加到主题的functions.php里：

function enqueue_shortcode_generator_scripts() {
    // 注册你的自定义JS文件，依赖jQuery
    wp_enqueue_script( 
        'shortcode-generator-script', 
        get_template_directory_uri() . '/path/to/your/js/file.js', 
        array('jquery'), 
        '1.0', 
        true 
    );
    
    // 传递AJAX所需的全局变量到前端
    wp_localize_script( 
        'shortcode-generator-script', 
        'shortcodeAjax', 
        array(
            'ajaxUrl' => admin_url('admin-ajax.php'),
            'nonce'   => wp_create_nonce('shortcode_generator_nonce')
        )
    );
}
// 只在后台加载这个脚本（如果你的生成器在后台页面）
add_action('admin_enqueue_scripts', 'enqueue_shortcode_generator_scripts');

2. 修改你的JS代码，添加AJAX请求 #

更新你已有的点击事件代码，把收集到的数据通过POST请求发送到PHP后端：

jQuery('#create').click(function(){
    // 收集所有表单数据，打包成对象
    var formData = {
        action: 'generate_custom_shortcode', // 对应PHP端的AJAX动作名称
        nonce: shortcodeAjax.nonce, // 安全验证用的nonce
        orientation: jQuery('#orientation').val(),
        leftbgcolor: jQuery('.left-bg-color').val(),
        rightbgcolor: jQuery('.right-bg-color').val(),
        fontcolor: jQuery('.font-color').val(),
        titlecolor: jQuery('.title-color').val(),
        image: jQuery('#image').val()
    };

    // 发送AJAX请求
    jQuery.ajax({
        type: 'POST',
        url: shortcodeAjax.ajaxUrl,
        data: formData,
        success: function(response) {
            // 请求成功后的处理逻辑
            if (response.success) {
                // 把生成的短代码显示到页面上（比如一个输入框）
                jQuery('#shortcode-output').val(response.data.shortcode);
                alert('短代码生成成功！');
            } else {
                alert('生成失败：' + response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求出错：', error);
        }
    });
});

3. 后端PHP处理：接收数据并生成短代码 #

同样在functions.php里添加处理AJAX请求的代码，负责接收数据、验证安全、生成短代码：

function generate_custom_shortcode_callback() {
    // 第一步：验证安全nonce，防止恶意请求
    if (!wp_verify_nonce($_POST['nonce'], 'shortcode_generator_nonce')) {
        wp_send_json_error('安全验证失败，请刷新页面重试');
    }

    // 第二步：过滤接收的数据，避免XSS等安全问题
    $orientation   = sanitize_text_field($_POST['orientation']);
    $leftbgcolor   = sanitize_text_field($_POST['leftbgcolor']);
    $rightbgcolor  = sanitize_text_field($_POST['rightbgcolor']);
    $fontcolor     = sanitize_text_field($_POST['fontcolor']);
    $titlecolor    = sanitize_text_field($_POST['titlecolor']);
    $image         = esc_url_raw($_POST['image']); // 图片URL用专门的过滤函数

    // 第三步：拼接生成带属性的短代码
    $shortcode = '[your_custom_shortcode';
    // 只添加非空的属性，避免冗余
    if (!empty($orientation)) $shortcode .= ' orientation="' . esc_attr($orientation) . '"';
    if (!empty($leftbgcolor)) $shortcode .= ' leftbgcolor="' . esc_attr($leftbgcolor) . '"';
    if (!empty($rightbgcolor)) $shortcode .= ' rightbgcolor="' . esc_attr($rightbgcolor) . '"';
    if (!empty($fontcolor)) $shortcode .= ' fontcolor="' . esc_attr($fontcolor) . '"';
    if (!empty($titlecolor)) $shortcode .= ' titlecolor="' . esc_attr($titlecolor) . '"';
    if (!empty($image)) $shortcode .= ' image="' . esc_attr($image) . '"';
    $shortcode .= ']';

    // 返回成功结果和生成的短代码
    wp_send_json_success(array('shortcode' => $shortcode));
}

// 添加AJAX动作钩子，分别处理登录用户和未登录用户（如果需要前端用户也能生成）
add_action('wp_ajax_generate_custom_shortcode', 'generate_custom_shortcode_callback');
add_action('wp_ajax_nopriv_generate_custom_shortcode', 'generate_custom_shortcode_callback');

4. 前端添加短代码显示区域 #

在你的生成器页面上，添加一个输入框或者区域来展示生成的短代码：

<!-- 用来显示生成的短代码 -->
<input type="text" id="shortcode-output" readonly style="width: 100%; padding: 10px; margin-top: 15px;">

这样整套流程就通了：点击按钮后JS收集数据→通过AJAX安全发送到PHP→PHP验证并生成短代码→返回给前端展示。完全符合WordPress的开发规范，也解决了你数据传递的问题。

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