高级WordPress前端自定义登录页面模板

3 浏览

今天和大家分享一个完美的高级WordPress前端自定义登录页面模板。有需要的小伙伴可以直接拿去使用。

高级WordPress前端自定义登录页面模板具体实现方法如下。高级WordPress前端自定义登录页面模板

实现代码，首先创建一个自定义页面，在自定义页面中输入以下代码：

<?php
/*
Template Name: 前端登录页面
*/

// 如果用户已登录，重定向到首页
if (is_user_logged_in()) {
    wp_redirect(home_url());
    exit;
}

// 处理登录请求
if ($_POST['wp-submit']) {
    $creds = array(
        'user_login'    => $_POST['log'],
        'user_password' => $_POST['pwd'],
        'remember'      => isset($_POST['rememberme']) ? true : false
    );
    
    $user = wp_signon($creds, false);
    
    if (is_wp_error($user)) {
        $login_error = $user->get_error_message();
    } else {
        wp_redirect(home_url());
        exit;
    }
}

get_header();
?>

<div class="login-container">
    <div class="login-header">
        <h1>欢迎回来</h1>
        <p>登录您的账户继续访问</p>
    </div>
    
    <form class="login-form" method="post">
        <?php wp_nonce_field('wp-login-nonce'); ?>
        <input type="hidden" name="redirect_to" value="<?php echo esc_url(home_url()); ?>">
        
        <?php if (isset($login_error)): ?>
            <div class="wp-message wp-error"><?php echo $login_error; ?></div>
        <?php endif; ?>
        
        <div class="form-group">
            <label for="user_login">用户名或邮箱</label>
            <input type="text" id="user_login" name="log" class="form-control" placeholder="请输入用户名或邮箱" value="<?php echo esc_attr(wp_unslash($_POST['log'] ?? '')); ?>">
        </div>
        
        <div class="form-group">
            <label for="user_pass">密码</label>
            <input type="password" id="user_pass" name="pwd" class="form-control" placeholder="请输入密码">
            <button type="button" class="password-toggle" id="togglePassword">👁️</button>
        </div>
        
        <div class="remember-forgot">
            <div class="remember-me">
                <input type="checkbox" id="rememberme" name="rememberme" value="forever">
                <label for="rememberme">记住我</label>
            </div>
            <a href="<?php echo wp_lostpassword_url(); ?>" class="forgot-password">忘记密码?</a>
        </div>
        
        <button type="submit" name="wp-submit" class="login-button">登录</button>
        
        <div class="divider">
            <span>或使用社交账号登录</span>
        </div>
        
        <div class="social-login">
            <div class="social-btn facebook">f</div>
            <div class="social-btn google">G</div>
            <div class="social-btn twitter">t</div>
        </div>
        
        <div class="register-link">
            还没有账户? <a href="<?php echo wp_registration_url(); ?>">立即注册</a>
        </div>
    </form>
</div>

<script>
    // 密码显示/隐藏切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('user_pass');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.textContent = type === 'password' ? '👁️' : '🔒';
    });
</script>

<?php get_footer(); ?>

CSS部分

<style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .login-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 450px;
            overflow: hidden;
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .login-header {
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        
        .login-header h1 {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .login-header p {
            opacity: 0.9;
            font-size: 16px;
        }
        
        .login-form {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: #4776E6;
            box-shadow: 0 0 0 2px rgba(71, 118, 230, 0.2);
            outline: none;
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 40px;
            background: none;
            border: none;
            color: #777;
            cursor: pointer;
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
        }
        
        .remember-me input {
            margin-right: 8px;
        }
        
        .forgot-password {
            color: #4776E6;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .forgot-password:hover {
            color: #3a63c4;
            text-decoration: underline;
        }
        
        .login-button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(71, 118, 230, 0.4);
        }
        
        .divider {
            text-align: center;
            margin: 25px 0;
            position: relative;
            color: #777;
        }
        
        .divider::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #eee;
        }
        
        .divider span {
            background: white;
            padding: 0 15px;
            position: relative;
            z-index: 1;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .social-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .facebook {
            background-color: #3b5998;
        }
        
        .google {
            background-color: #dd4b39;
        }
        
        .twitter {
            background-color: #1da1f2;
        }
        
        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .register-link {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
        
        .register-link a {
            color: #4776E6;
            text-decoration: none;
            font-weight: 500;
        }
        
        .register-link a:hover {
            text-decoration: underline;
        }
        
        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        @media (max-width: 480px) {
            .login-container {
                border-radius: 0;
            }
            
            .login-form {
                padding: 20px;
            }
            
            .remember-forgot {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    </style>

使用说明

  1. 将上面的PHP代码保存为 page-login.php并上传到您的主题文件夹（也可以保存为你喜欢的文件名）。
  2. 在WordPress后台创建一个新页面，选择”前端登录页面”作为模板。
  3. 发布页面后，访问该页面即可看到您的前端登录表单。

功能特点

  • 完全响应式设计，适配各种设备。
  • 与WordPress用户系统完全集成。
  • 包含表单验证和错误提示。
  • 支持”记住我”功能。
  • 包含忘记密码和注册页面链接。
  • 美观的渐变背景和动画效果。
  • 社交媒体登录按钮（可扩展为实际功能）。

这个登录页面不仅外观漂亮，而且功能完整，可以直接集成到您的WordPress网站中使用。

WordPress忘记后台登录密码时，有多种方法可以重置密码，你可以根据自身条件选择…
WordPress 子比主题功能介绍深度解析，强大功能与精美模板一站式免费下载获取指…
自适应高级企业展示幻灯片模板，设计思路和详细代码分享。 以下是一个专业、响应式的企业…
这是一款非常漂亮的采用自适应UI设计css+js设计的一个现代化、响应式登录html…
WordPress网站使用随机文章功能是提升用户体验和SEO表现的实用技巧。本文将详…
在WordPress网站上展示热门评论文章，是提升用户互动和突出优质内容的好方法。 …
这是一个美观、响应式的在线咨询表单模板，自适应设计适用于各种设备和屏幕尺寸。 如果有…
WordPress 的强大之处很大程度上在于其庞大的插件生态。几乎每个WordPre…
本文将为你提供一个美观实用的高端JavaScript弹窗登录html模板，包含完整的…
在 WordPress 中，你可以使用多种方法来获取当前时间或日期。 以下是几种常用…

发表评论