wordpress图文教程

wordpress网站添加前台注册功能

2025年7月16日
酒醒

纯代码wordpress网站添加前台注册功能

以下是给WordPress网站添加前台注册功能的完整代码实现。这个方案包含自定义注册表单、表单处理和用户注册逻辑。

方法一：WordPress前端注册功能的代码方案 （短代码添加）

1、将下面这段代码添加到当前主题的functions.php文件中

<?php
/** 纯代码给wordpress网站添加前台注册功能 ***/

// 创建前台注册表单短代码
function custom_registration_form() {
    if (is_user_logged_in()) {
        return '<p>您已登录，无需注册。</p>';
    }
    
    ob_start();
    ?>
    <form id="custom-registration" method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" required>
        </div>
        <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" required>
        </div>
        <div class="form-group">
            <label for="confirm_password">确认密码</label>
            <input type="password" name="confirm_password" id="confirm_password" required>
        </div>
        <input type="submit" name="submit" value="注册">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_register_form', 'custom_registration_form');

// 处理注册表单提交
function custom_registration_validation() {
    if (isset($_POST['submit'])) {
        $username = sanitize_user($_POST['username']);
        $email = sanitize_email($_POST['email']);
        $password = $_POST['password'];
        $confirm_password = $_POST['confirm_password'];
        
        $errors = array();
        
        // 验证用户名
        if (empty($username)) {
            $errors['username'] = '请输入用户名';
        } elseif (username_exists($username)) {
            $errors['username'] = '用户名已存在';
        }
        
        // 验证邮箱
        if (empty($email)) {
            $errors['email'] = '请输入电子邮箱';
        } elseif (!is_email($email)) {
            $errors['email'] = '电子邮箱格式不正确';
        } elseif (email_exists($email)) {
            $errors['email'] = '电子邮箱已被注册';
        }
        
        // 验证密码
        if (empty($password)) {
            $errors['password'] = '请输入密码';
        } elseif (strlen($password) < 6) {
            $errors['password'] = '密码长度至少6位';
        } elseif ($password != $confirm_password) {
            $errors['confirm_password'] = '两次输入的密码不一致';
        }
        
        // 如果没有错误，创建用户
        if (empty($errors)) {
            $user_id = wp_create_user($username, $password, $email);
            
            if (!is_wp_error($user_id)) {
                // 自动登录用户
                wp_set_current_user($user_id);
                wp_set_auth_cookie($user_id);
                
                // 重定向到首页或其他页面
                wp_redirect(home_url());
                exit;
            } else {
                $errors['registration'] = '注册过程中出现错误';
            }
        }
        
        // 如果有错误，保存到session中
        if (!empty($errors)) {
            $_SESSION['registration_errors'] = $errors;
        }
    }
}
add_action('init', 'custom_registration_validation');

// 显示错误信息
function show_registration_errors() {
    if (!empty($_SESSION['registration_errors'])) {
        echo '<div class="registration-errors">';
        foreach ($_SESSION['registration_errors'] as $error) {
            echo '<p class="error">' . esc_html($error) . '</p>';
        }
        echo '</div>';
        unset($_SESSION['registration_errors']);
    }
}
add_action('wp_footer', 'show_registration_errors');

2、将下面这段代码添加到当前主题的style.css文件中

/* 注册表单样式 */
#custom-registration {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

#custom-registration .form-group {
    margin-bottom: 15px;
}

#custom-registration label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#custom-registration input[type="text"],
#custom-registration input[type="email"],
#custom-registration input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

#custom-registration input[type="submit"] {
    background: #0073aa;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 3px;
}

#custom-registration input[type="submit"]:hover {
    background: #005d8c;
}

.registration-errors {
    max-width: 500px;
    margin: 20px auto;
    padding: 15px;
    background: #ffebee;
    border-left: 4px solid #f44336;
}

.registration-errors .error {
    margin: 0;
    color: #f44336;
}

3、在需要显示注册表单的页面或文章中添加短代码[custom_register_form]。

方法二：WordPress前端注册功能的代码方案 （自定义注册页面）

以下是实现WordPress前端注册功能的代码方案，包含表单和验证处理：

1、将下面这段代码添加到当前主题的custom-register.php文件中


<?php
/*
Template Name: 自定义注册页面
*/
get_header();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = sanitize_user($_POST['username']);
    $email = sanitize_email($_POST['email']);
    $password = $_POST['password'];
    
    $user_id = wp_create_user($username, $password, $email);
    
    if (is_wp_error($user_id)) {
        $error_message = $user_id->get_error_message();
        echo '<div class="error">'.$error_message.'</div>';
    } else {
        wp_signon(array(
            'user_login' => $username,
            'user_password' => $password,
            'remember' => true
        ));
        wp_redirect(home_url());
        exit;
    }
}
?>

<form method="post" action="">
    <div>
        <label>用户名</label>
        <input type="text" name="username" required>
    </div>
    <div>
        <label>邮箱</label>
        <input type="email" name="email" required>
    </div>
    <div>
        <label>密码</label>
        <input type="password" name="password" required>
    </div>
    <button type="submit">注册</button>
</form>

<?php get_footer(); ?>

1、将下面这段代码添加到当前主题的functions.php文件中

// 允许自定义注册页面模板
function add_custom_register_template($templates) {
    $templates['custom-register.php'] = '自定义注册';
    return $templates;
}
add_filter('theme_page_templates', 'add_custom_register_template');

// 加载自定义注册样式
function custom_register_styles() {
    if (is_page_template('custom-register.php')) {
        wp_enqueue_style('custom-register', get_template_directory_uri().'/css/register.css');
    }
}
add_action('wp_enqueue_scripts', 'custom_register_styles');

使用说明：

1. 将第一个文件保存为custom-register.php放入主题目录

2. 将第二个代码段添加到主题的functions.php文件

3. 在WordPress后台创建新页面并选择”自定义注册”模板。建议添加CSS样式美化表单。