如何为自定义WordPress设置页面添加第二个按钮以执行PHP函数？

核心问题拆解 #

• 你的AJAX请求没在WordPress里注册对应action钩子，导致PHP函数根本不会被触发
• location.reload()执行太早，AJAX请求还没跑完页面就刷新了，函数自然没机会执行完
• 缺少安全验证，而且JS代码没限定仅在目标设置页面加载，容易在其他页面误触发POST请求

分步修复代码 #

1. PHP代码修改（注册AJAX钩子+安全加固） #

要让WordPress识别你的AJAX请求，必须注册对应的钩子，同时加上权限和nonce验证，还要确保JS只在目标页面加载：

function admin_settings_content_callback()
{
?>
    <div class="wrap">
        <h1>Settings</h1>
        <form method="post" action="options.php">
            <?php settings_fields('menu_details_group'); ?>
            <?php do_settings_sections('menu_details_group'); ?>
            <br />
            <br />
            <hr />
            <?php submit_button(); ?>
        </form>
    </div>
<?php
}

add_action('admin_init', 'custom_codes_admin_init');
function custom_codes_admin_init()
{
    add_settings_section('database_section', 'Copy Orders', 'database_section_callback', 'menu_details_group');
    // 注册AJAX钩子，仅登录用户可调用
    add_action('wp_ajax_update_order_button_action', 'update_order_button_action');
}

function database_section_callback()
{
    // 生成安全验证用的nonce
    $nonce = wp_create_nonce('copy_orders_nonce');
    echo '
        <p>Copy all orders</p>
        <button type="button" name="copy_orders_action" class="button" id="copy-orders-button" data-nonce="'.$nonce.'">Copy All</button>
    ';
}

// 带安全验证的执行函数
function update_order_button_action()
{
    // 验证nonce合法性
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'copy_orders_nonce')) {
        wp_send_json_error('权限验证失败');
        die();
    }
    // 确保只有管理员能操作
    if (!current_user_can('manage_options')) {
        wp_send_json_error('无操作权限');
        die();
    }

    // 原有的订单处理逻辑
    $orders = get_post_and_user_id_();
    foreach ($orders as $order)
    {
        $user_id = $order['user_id'];
        $post_id = $order['post_id'];
        update_registrations(true, $post_id);
    }

    // 返回成功响应
    wp_send_json_success('订单复制完成');
}

// 只在目标设置页面加载JS
add_action('admin_enqueue_scripts', 'enqueue_copy_orders_script');
function enqueue_copy_orders_script($hook)
{
    // 替换成你的设置页面实际hook名，可通过在页面打印$hook变量确认
    if ($hook !== 'toplevel_page_menu_details_group') {
        return;
    }

    wp_enqueue_script('copy-orders-script', admin_url('js/copy-orders.js'), array('jquery'), '1.0', true);
    // 把AJAX地址传递给JS
    wp_localize_script('copy-orders-script', 'copyOrdersAjax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

2. 独立JS文件（避免全局污染+确保AJAX完成后操作） #

在wp-admin/js/目录下创建copy-orders.js，内容如下：

jQuery(document).ready(function($) {
    const copyBtn = $('#copy-orders-button');

    copyBtn.on('click', function(e) {
        e.preventDefault();
        const nonce = $(this).data('nonce');

        if (confirm('Copy All?')) {
            // 按钮置灰，防止重复点击
            copyBtn.prop('disabled', true).text('处理中...');

            $.ajax({
                type: 'POST',
                url: copyOrdersAjax.ajax_url,
                data: {
                    action: 'update_order_button_action',
                    nonce: nonce
                },
                success: function(res) {
                    if (res.success) {
                        alert(res.data);
                        // 成功后再刷新页面
                        location.reload();
                    } else {
                        alert('错误：' + res.data);
                    }
                },
                error: function() {
                    alert('请求失败，请重试');
                },
                complete: function() {
                    // 恢复按钮状态
                    copyBtn.prop('disabled', false).text('Copy All');
                }
            });
        }
    });
});

关键细节说明 #

• AJAX钩子注册：WordPress要求必须通过wp_ajax_{action名}钩子绑定PHP函数，否则不会响应AJAX请求
• 安全验证：nonce防止跨站请求伪造，权限验证确保只有管理员能执行敏感操作
• 页面限定JS：通过admin_enqueue_scripts检查当前页面hook，只在目标设置页面加载JS，彻底解决其他页面误触发问题
• AJAX完成后刷新：把页面刷新放在AJAX成功回调里，保证PHP函数执行完毕再刷新
• 按钮状态控制：添加加载状态提示，避免用户重复点击导致重复执行

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