wordpress图文教程

纯代码创建一个 WordPress 自定义注册表单插件(手机号)

2025年4月7日
酒醒

以下是一个专为WordPress新手设计的完整自定义注册表单插件代码，包含详细注释和扩展功能，请按照步骤操作：

一、创建插件文件

  1. 在 /wp-content/plugins/ 目录下新建文件夹 custom-registration
  2. 在文件夹内创建 custom-registration.php 文件，粘贴以下代码：
<?php
/*
Plugin Name: 自定义注册表单
Plugin URI: https://yourdomain.com/
Description: 带验证码和手机号验证的自定义注册表单
Version: 1.2
Author: 酒醒
Text Domain: custom-registration
*/

// 安全检测
if (!defined('ABSPATH')) {
    exit;
}

/**
 * 核心类 - 注册表单功能
 */
class Custom_Registration_Form {

    // 初始化插件
    public function __construct() {
        // 注册短代码
        add_shortcode('custom_reg_form', array($this, 'registration_form'));
        
        // 处理表单提交
        add_action('template_redirect', array($this, 'process_registration'));
        
        // 加载样式
        add_action('wp_enqueue_scripts', array($this, 'load_assets'));
    }

    /**
     * 加载CSS和JS
     */
    public function load_assets() {
        wp_enqueue_style(
            'cr-style',
            plugins_url('assets/style.css', __FILE__),
            array(),
            '1.2'
        );
        
        wp_enqueue_script(
            'cr-script',
            plugins_url('assets/script.js', __FILE__),
            array('jquery'),
            '1.2',
            true
        );
    }

    /**
     * 注册表单HTML
     */
    public function registration_form() {
        // 已登录用户不显示
        if (is_user_logged_in()) {
            return '<div class="cr-alert">您已登录！</div>';
        }

        ob_start(); // 开始输出缓冲
        ?>
        <div class="cr-wrapper">
            <form id="cr-form" method="post">
                <?php wp_nonce_field('cr_register_action', 'cr_nonce'); ?>
                
                <!-- 基础字段 -->
                <div class="cr-field">
                    <label>用户名*</label>
                    <input type="text" name="cr_username" required 
                        placeholder="4-20位字母数字">
                </div>

                <div class="cr-field">
                    <label>电子邮箱*</label>
                    <input type="email" name="cr_email" required 
                        placeholder="example@domain.com">
                </div>

                <div class="cr-field">
                    <label>手机号码*</label>
                    <input type="tel" name="cr_phone" required 
                        pattern="^1[3-9]\d{9}$" 
                        placeholder="11位中国大陆手机号">
                </div>

                <div class="cr-field">
                    <label>密码*</label>
                    <input type="password" name="cr_password" 
                        id="cr_password" required 
                        placeholder="至少8位字符">
                    <div class="pw-strength"></div>
                </div>

                <!-- 验证码 -->
                <div class="cr-field">
                    <label>验证码*</label>
                    <div class="captcha-group">
                        <input type="text" name="cr_captcha" required 
                            placeholder="输入右侧验证码">
                        <img src="<?php echo $this->generate_captcha(); ?>" 
                            class="captcha-img" 
                            onclick="this.src='<?php echo $this->generate_captcha(); ?>&t='+Date.now()">
                    </div>
                </div>

                <button type="submit" name="cr_submit" class="cr-submit">
                    立即注册
                </button>
            </form>
            
            <!-- 消息提示区域 -->
            <div class="cr-messages"><?php $this->show_messages(); ?></div>
        </div>
        <?php
        return ob_get_clean();
    }

    /**
     * 处理注册逻辑
     */
    public function process_registration() {
        if (!isset($_POST['cr_submit'])) return;

        // 验证nonce
        if (!wp_verify_nonce($_POST['cr_nonce'], 'cr_register_action')) {
            $this->add_error('请求验证失败');
            return;
        }

        // 接收并清理数据
        $data = array(
            'username' => sanitize_user($_POST['cr_username']),
            'email'    => sanitize_email($_POST['cr_email']),
            'phone'    => preg_replace('/[^\d]/', '', $_POST['cr_phone']),
            'password' => $_POST['cr_password'],
            'captcha'  => strtolower($_POST['cr_captcha'])
        );

        // 字段验证
        $errors = $this->validate_fields($data);
        if (!empty($errors)) {
            foreach ($errors as $error) $this->add_error($error);
            return;
        }

        // 创建用户
        $user_id = wp_create_user(
            $data['username'],
            $data['password'],
            $data['email']
        );

        if (is_wp_error($user_id)) {
            $this->add_error($user_id->get_error_message());
            return;
        }

        // 保存手机号
        update_user_meta($user_id, 'phone_number', $data['phone']);

        // 发送通知邮件
        $this->send_welcome_email($user_id);

        // 注册成功处理
        $this->add_success('注册成功！请查收激活邮件');
        wp_redirect(home_url('/login')); // 跳转到登录页
        exit;
    }

    /**
     * 字段验证逻辑
     */
    private function validate_fields($data) {
        $errors = array();

        // 用户名验证
        if (empty($data['username']) || !validate_username($data['username'])) {
            $errors[] = '用户名包含非法字符';
        } elseif (username_exists($data['username'])) {
            $errors[] = '用户名已被使用';
        }

        // 邮箱验证
        if (!is_email($data['email'])) {
            $errors[] = '邮箱格式不正确';
        } elseif (email_exists($data['email'])) {
            $errors[] = '邮箱已被注册';
        }

        // 手机号验证
        if (!preg_match('/^1[3-9]\d{9}$/', $data['phone'])) {
            $errors[] = '手机号格式不正确';
        }

        // 密码强度
        if (strlen($data['password']) < 8) {
            $errors[] = '密码至少需要8位';
        }

        // 验证码校验（示例用简单验证码）
        if ($data['captcha'] !== $_SESSION['cr_captcha']) {
            $errors[] = '验证码错误';
        }

        return $errors;
    }

    /**
     * 生成验证码图片（简易版）
     */
    private function generate_captcha() {
        $num1 = rand(1, 9);
        $num2 = rand(1, 9);
        $_SESSION['cr_captcha'] = $num1 + $num2;
        return plugins_url('captcha-img.php?n1='.$num1.'&n2='.$num2, __FILE__);
    }

    /**
     * 发送欢迎邮件
     */
    private function send_welcome_email($user_id) {
        $user = get_userdata($user_id);
        
        $to = $user->user_email;
        $subject = '欢迎加入' . get_bloginfo('name');
        $message = sprintf(
            "您好 %s,\n\n感谢注册！您的账号已创建成功。\n\n登录地址：%s",
            $user->user_login,
            wp_login_url()
        );
        
        wp_mail($to, $subject, $message);
    }

    /**
     * 消息提示系统
     */
    private function add_error($message) {
        add_action('cr_messages', function() use ($message) {
            echo '<div class="cr-error">' . esc_html($message) . '</div>';
        });
    }

    private function add_success($message) {
        add_action('cr_messages', function() use ($message) {
            echo '<div class="cr-success">' . esc_html($message) . '</div>';
        });
    }

    public function show_messages() {
        do_action('cr_messages');
    }
}

// 初始化插件
new Custom_Registration_Form();

/**
 * 安装时创建必要的数据表（可选）
 */
register_activation_hook(__FILE__, 'cr_create_table');
function cr_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'cr_reg_logs';
    
    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        user_login varchar(60) NOT NULL,
        reg_date datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
        ip_address varchar(45) NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

二、创建配套文件

  1. 在插件目录内新建 assets 文件夹
  2. 创建 style.css (样式文件)：
/* 基础样式 */
.cr-wrapper {
    max-width: 500px;
    margin: 2rem auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

#cr-form .cr-field {
    margin-bottom: 1.5rem;
}

#cr-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

#cr-form input:not([type=submit]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.cr-submit {
    background: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

/* 消息提示 */
.cr-error {
    color: #dc3545;
    padding: 10px;
    margin: 1rem 0;
    border: 1px solid #f8d7da;
    background: #f8d7da;
    border-radius: 4px;
}

.cr-success {
    color: #155724;
    padding: 10px;
    margin: 1rem 0;
    border: 1px solid #d4edda;
    background: #d4edda;
    border-radius: 4px;
}

/* 验证码样式 */
.captcha-group {
    display: flex;
    gap: 10px;
}

.captcha-img {
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

创建 script.js (前端验证)：

jQuery(document).ready(function($) {
    // 密码强度实时检测
    $('#cr_password').on('input', function() {
        let strength = 0;
        const val = $(this).val();
        
        if (val.match(/[A-Z]/)) strength++;
        if (val.match(/[0-9]/)) strength++;
        if (val.length >= 10) strength++;
        
        $('.pw-strength').css('width', (strength * 33) + '%')
            .removeClass('weak medium strong')
            .addClass(['weak', 'medium', 'strong'][strength-1]);
    });
});

三、使用说明

  1. ‌安装插件‌：
    • 将整个 custom-registration 文件夹压缩为ZIP
    • 在WordPress后台 → 插件 → 安装插件 → 上传安装
  2. ‌使用短代码‌：
    • 在任意页面/文章中添加短代码 [custom_reg_form]
    • 示例页面：/register
  3. ‌功能说明‌：
    • 前端注册表单（用户名、邮箱、手机、密码、验证码）
    • 实时密码强度检测
    • 自动发送欢迎邮件
    • 手机号格式验证
    • 防重复注册检测
    • 基础防机器人验证
    • 响应式设计

四、扩展建议

如需添加更多功能，可以在以下位置修改：

  1. ‌添加新字段‌：在 registration_form() 方法中添加新的输入字段
  2. ‌增强验证‌：修改 validate_fields() 中的验证逻辑
  3. ‌对接短信API‌：在用户注册成功后调用短信接口
  4. ‌添加第三方登录‌：集成微信/QQ等社交登录功能

此代码已包含基础安全措施（Nonce验证、数据清理），建议在生产环境中：

  • 启用HTTPS
  • 添加更复杂的验证码（如Google reCAPTCHA）
  • 对接专业的短信验证服务
  • 定期备份数据库

希望这个完整解决方案能帮助您快速上手WordPress插件开发！

提示：仅供参考