如何在自定义文章类型后台添加安全的邮件发送按钮（基于 AJAX 实现）

推荐方案：采用 WordPress 原生 AJAX 机制
相比 admin-post.php 表单提交，AJAX 能实现无刷新操作、保留当前页面状态、精准控制请求/响应流程，并天然兼容 WordPress 的权限与 nonce 验证体系。

✅ 正确实现步骤

1. 后端注册 AJAX 处理函数（支持管理员权限）

// 在 functions.php 或插件主文件中
add_action('wp_ajax_quote_email_pdf', 'quote_email_pdf');

function quote_email_pdf() {
    // 必须验证用户权限（仅管理员可触发）
    if (!current_user_can('manage_options')) {
        wp_die('Insufficient permissions.');
    }

    // 可选：验证 nonce（需前端传入并在 JS 中生成）
    $nonce = isset($_POST['nonce']) ? sanitize_text_field($_POST['nonce']) : '';
    if (!wp_verify_nonce($nonce, 'send_quote_email_nonce')) {
        wp_die('Invalid security token.');
    }

    // 获取并清理前端传参
    $to       = sanitize_email($_POST['emailAddress'] ?? '');
    $full_name = sanitize_text_field($_POST['fullName'] ?? '');
    $subject  = "Quote from {$full_name}";
    $message  = "<h2>Hello {$full_name},</h2><p>Your quote is attached.</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2120" title="Clipfly"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680175952892.png" alt="Clipfly"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2120" title="Clipfly">Clipfly</a>
                                                                        <p>一站式AI视频生成和编辑平台，提供多种AI视频处理、AI图像处理工具。</p>
                                                                </div>
                                                                <a href="/ai/2120" title="Clipfly" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>";
    $headers  = array('Content-Type: text/html; charset=UTF-8');

    // 执行邮件发送
    $sent = wp_mail($to, $subject, $message, $headers);

    // 返回 JSON 响应（便于前端判断）
    wp_send_json([
        'success' => $sent,
        'message' => $sent ? 'Email sent successfully.' : 'Failed to send email.'
    ]);
}

2. 前端注册本地化脚本与事件绑定

确保在后台编辑页正确加载脚本并传递必要数据：

// 在 meta box 渲染函数中（或使用 add_meta_boxes 钩子）
function enqueue_quote_email_script($hook) {
    if ('post.php' !== $hook && 'post-new.php' !== $hook) {
        return;
    }
    if (get_post_type() !== 'quote') { // 替换为你的 CPT 名称
        return;
    }

    wp_enqueue_script('quote-email-js', plugin_dir_url(__FILE__) . 'js/quote-email.js', ['jquery'], '1.0', true);

    // 本地化 AJAX URL 和 nonce
    wp_localize_script('quote-email-js', 'sf_admin_ajax', [
        'sf_admin_ajax_url' => admin_url('admin-ajax.php'),
        'nonce'             => wp_create_nonce('send_quote_email_nonce')
    ]);
}
add_action('admin_enqueue_scripts', 'enqueue_quote_email_script');

3. 前端 JavaScript（quote-email.js）

jQuery(document).ready(function($) {
    const fullName = $('#quoteFullName').text().trim();
    const emailAddress = $('#quoteEmail a').text().trim();

    $('#downloadQuote').on('click', function(e) {
        e.preventDefault();

        // 禁用按钮防重复提交
        const $btn = $(this);
        $btn.prop('disabled', true).text('Sending...');

        $.post(sf_admin_ajax.sf_admin_ajax_url, {
            action: 'quote_email_pdf',
            emailAddress: emailAddress,
            fullName: fullName,
            nonce: sf_admin_ajax.nonce
        })
        .done(function(response) {
            if (response.success) {
                alert('✅ ' + response.data.message);
            } else {
                alert('❌ ' + (response.data.message || 'Unknown error.'));
            }
        })
        .fail(function(xhr, status, error) {
            console.error('AJAX Error:', error);
            alert('Network error. Please try again.');
        })
        .always(function() {
            $btn.prop('disabled', false).text('Send email');
        });
    });
});

4. HTML 按钮（置于 meta box 中）

<!-- 注意：无需 form 标签 -->
<button type="button" class="button button-primary" id="downloadQuote">Send email to customer</button>

⚠️ 关键注意事项

• 权限校验不可省略：wp_ajax_{$action} 钩子对所有登录用户开放，务必用 current_user_can() 限制操作范围；
• Nonce 验证增强安全性：虽非强制，但强烈建议加入，防止 CSRF 攻击；
• 输入严格过滤：所有 $_POST 数据必须经 sanitize_*() 处理，尤其是邮箱地址（用 sanitize_email()）；
• 错误处理要显式：wp_mail() 可能因 SMTP 配置失败而静默返回 false，需在前端给出明确反馈；
• 避免 die() 或 echo 直接输出：AJAX 处理函数应统一使用 wp_send_json() 确保响应格式规范；
• CPT 上下文识别：确保脚本仅在目标自定义文章类型的编辑页加载，提升性能与安全性。

通过以上结构化实现，你将获得一个稳定、安全、用户体验良好的后台邮件发送功能——既规避了传统表单的跳转缺陷，又充分利用了 WordPress 的安全基础设施。