重磅：如何给单页添加验证邮箱的按钮，搜集邮箱

HTML 部分

//首先在页面上添加一个按钮，点击弹出验证邮箱和弹出验证码： 
<p>产品图纸：<a href="javascript:void(0)" type="button" id="verifyEmailButton">点击进行下载图纸</a></p>

//验证邮箱的form， 写在页面最底部 
<!-- The popup form -->
<div id="emailPopup" class="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <form id="emailForm">
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email" required>
            <button type="button" id="sendCodeButton">Send Verification Code</button>
        </form>
        <form id="codeForm" style="display:none;">
            <label for="verificationCode">Enter verification code:</label>
            <input type="text" id="verificationCode" name="verificationCode" required>
            <button type="button" id="verifyCodeButton">Verify Code</button>
        </form>
    </div>
</div>

//添加合适的css来改变弹出form的样式
/*
popup form
 */

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.popup-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

//添加js进行控制，首先点击弹出form框
document.addEventListener('DOMContentLoaded', function() {
    var popup = document.getElementById('emailPopup');
    var btn = document.getElementById('verifyEmailButton');
    var span = document.getElementsByClassName('close')[0];
    var emailForm = document.getElementById('emailForm');
    var codeForm = document.getElementById('codeForm');

    btn.onclick = function() {
//点击弹出form框
        popup.style.display = 'block';

    }

    span.onclick = function() {
//点击关闭form框
        popup.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == popup) {
            popup.style.display = 'none';
        }
    }

    document.getElementById('sendCodeButton').addEventListener('click', function() {
        var email = document.getElementById('email').value;
        if (email) {
      //如果email存在，发送wp ajax 到后端，来执行发送邮箱验证码
     // ajax_object.ajax_url 必须通过wp_localize_script来进行本地化传递
            fetch(ajax_object.ajax_url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=send_verification_code&email=' + encodeURIComponent(email),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                //如果从后端传递的json返回正确
                    emailForm.style.display = 'none';
                    codeForm.style.display = 'block';
                    codeForm.dataset.email = email; // 存储email的信息到data属性里好在下面验证阶段进行使用
                } else {
                    alert('Failed to send verification code. Please try again.');
                }
            });
        }
    });

    document.getElementById('verifyCodeButton').addEventListener('click', function() {
        var code = document.getElementById('verificationCode').value;
        var email = document.getElementById('codeForm').dataset.email; // 获得当前验证的email
        if (code && email) {
//如果都存在验证码和邮箱，注意body传递很多信息到 后端的post 请求
          fetch(ajax_object.ajax_url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'action=verify_code&code=' + encodeURIComponent(code) + '&email=' + encodeURIComponent(email), 
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                

                document.getElementById('emailPopup').style.display = 'none';
                document.getElementById('verifyEmailButton').innerText = 'Verified!';
                // 这里来显示你要显示的内容或者更改的内容
                //document.getElementById('extraContent').style.display = 'block';
            } else {
                alert('Incorrect verification code. Please try again.');
            }
        });

        }
        
    });
});

//PHP部分 
//首先创建存储验证email的table 
function create_verified_emails_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'verified_emails';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        email varchar(255) NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

add_action('after_switch_theme', 'create_verified_emails_table');

//执行第一个ajax，也就是发送随机验证码到邮件，注意如何生成随机验证码的用法
function send_verification_code() {
    if (isset($_POST['email'])) {
        $email = sanitize_email($_POST['email']);
        if (!is_email($email)) {
            wp_send_json_error(array('message' => 'Invalid email address.'));
        }

        $verification_code = wp_rand(100000, 999999);
       //设置缓存，将验证码保存到缓存
      //注意，失效时间这里是300秒， MINUTE_IN_SECONDS 是 60秒
        set_transient('email_verification_code_' . $email, $verification_code, 5 * MINUTE_IN_SECONDS);

        $subject = 'Your Verification Code';
        $message = 'Your verification code is ' . $verification_code;
        $headers = array('Content-Type: text/html; charset=UTF-8');

        if (wp_mail($email, $subject, $message, $headers)) {
            wp_send_json_success();
        } else {
            wp_send_json_error(array('message' => 'Failed to send email.'));
        }
    } else {
        wp_send_json_error(array('message' => 'No email provided.'));
    }
}
add_action('wp_ajax_send_verification_code', 'send_verification_code');
add_action('wp_ajax_nopriv_send_verification_code', 'send_verification_code');

//第二个ajax， 进行验证码的验证，如果post传递过来的验证码和保存的验证码相符，将进行验证的邮箱保存到数据库
function verify_code() {
    if (isset($_POST['code']) && isset($_POST['email'])) {
        $code = sanitize_text_field($_POST['code']);
        $email = sanitize_email($_POST['email']);
        $saved_code = get_transient('email_verification_code_' . $email); //提取缓存进行验证

        if ($code == $saved_code) {
            delete_transient('email_verification_code_' . $email);

            global $wpdb;
            $table_name = $wpdb->prefix . 'verified_emails';
            $wpdb->insert($table_name, array('email' => $email));
            wp_send_json_success();
        } else {
            wp_send_json_error(array('message' => 'Incorrect verification code.'));
        }
    } else {
        wp_send_json_error(array('message' => 'Invalid request.'));
    }
}
add_action('wp_ajax_verify_code', 'verify_code');
add_action('wp_ajax_nopriv_verify_code', 'verify_code');

//添加后台管理菜单 来展示存储的邮箱列表
function add_verified_emails_menu() {
    add_menu_page(
        'Verified Emails',
        'Verified Emails',
        'manage_options',
        'verified-emails',
        'display_verified_emails_page',
        'dashicons-email-alt',
        20
    );

}
add_action('admin_menu', 'add_verified_emails_menu');

function display_verified_emails_page() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'verified_emails';
    $emails = $wpdb->get_results("SELECT * FROM $table_name");

    echo '<div class="wrap">';
    echo '<h1>Verified Emails</h1>';
    echo '<table class="wp-list-table widefat fixed striped">';
    echo '<thead><tr><th>ID</th><th>Email</th></tr></thead>';
    echo '<tbody>';

    if ($emails) {
        foreach ($emails as $email) {
            echo '<tr>';
            echo '<td>' . esc_html($email->id) . '</td>';
            echo '<td>' . esc_html($email->email) . '</td>';
            echo '</tr>';
        }
    } else {
        echo '<tr><td colspan="2">No verified emails found.</td></tr>';
    }

    echo '</tbody></table>';
    echo '</div>';
}