WordPress 默认的登录页面(/wp-login.php)设计风格简洁,但略显单调,而且带有明显的 WordPress 品牌印记。对于企业网站或品牌项目,定制登录页面能提升品牌一致性,也能改善用户体验。定制范围可以从简单的 Logo 替换,到完全重新设计的全屏背景登录界面。

最基本的定制是替换登录页面的 Logo。使用 login_enqueue_scripts 钩子可以添加自定义 CSS 样式,覆盖默认的 Logo 样式:

add_action('login_enqueue_scripts', 'custom_login_logo');
function custom_login_logo() {
    echo '<style>
        #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/login-logo.png) !important;
            background-size: contain !important;
            width: 320px !important;
            height: 120px !important;
        }
        .login form {
            background: rgba(255,255,255,0.9) !important;
            border-radius: 8px !important;
        }
        body.login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        }
    </style>';
}

同时,把 Logo 的链接从 WordPress 官网改为自己的网站首页:

add_filter('login_headerurl', 'custom_login_logo_url');
function custom_login_logo_url() {
    return home_url();
}

修改 Logo 的 alt 文本也可以同时处理:

add_filter('login_headertext', 'custom_login_logo_text');
function custom_login_logo_text() {
    return get_bloginfo('name');
}

对于更深入的定制,你可以创建自定义登录页面模板。在主题中创建一个 page-login.php 模板文件,然后创建一个名为“登录”的页面,关联这个模板。在模板中,你可以使用 wp_login_form 函数输出登录表单,并自由控制周围的 HTML 和样式:

<?php
if (is_user_logged_in()) {
    wp_redirect(home_url('/dashboard'));
    exit;
}
if ($_POST) {
    $creds = array(
        'user_login' => $_POST['log'],
        'user_password' => $_POST['pwd'],
        'remember' => isset($_POST['rememberme'])
    );
    $user = wp_signon($creds, false);
    if (!is_wp_error($user)) {
        wp_redirect(home_url('/dashboard'));
        exit;
    } else {
        $error = $user->get_error_message();
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>登录 - <?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body class="custom-login-page">
    <div class="login-container">
        <h1><?php bloginfo('name'); ?></h1>
        <?php if (isset($error)) echo '<div class="error">' . $error . '</div>'; ?>
        <?php wp_login_form(array('remember' => true)); ?>
        <p><a href="<?php echo wp_lostpassword_url(); ?>">忘记密码?</a></p>
        <?php if (get_option('users_can_register')): ?>
            <p><a href="<?php echo home_url('/register'); ?>">注册新账号</a></p>
        <?php endif; ?>
    </div>
    <?php wp_footer(); ?>
</body>
</html>

注册页面的定制类似。创建一个 page-register.php 模板,使用 wp_insert_user 处理注册提交。需要注意的是,注册表单需要做好非重复提交验证和防垃圾机制。

重定向逻辑是登录注册定制中经常被忽略但非常重要的一部分。默认情况下,登录后用户会进入后台仪表盘,但对于非管理员用户,你可能希望他们跳转到前端页面。使用 login_redirect 过滤器可以实现:

add_filter('login_redirect', 'custom_login_redirect', 10, 3);
function custom_login_redirect($redirect_to, $request, $user) {
    if (isset($user->roles) && is_array($user->roles)) {
        if (in_array('administrator', $user->roles)) {
            return admin_url();
        } else {
            return home_url('/my-account/');
        }
    }
    return $redirect_to;
}

注册成功后的重定向同样可以控制。在 user_register 钩子中设置:

add_action('user_register', 'redirect_after_registration');
function redirect_after_registration($user_id) {
    if (!is_admin()) {
        wp_redirect(home_url('/welcome'));
        exit;
    }
}

登录页面还有一个容易被忽视的安全问题:登录错误的提示信息默认会区分“用户名不存在”和“密码错误”,这可能被攻击者利用来枚举有效用户名。修改错误提示为通用信息可以增加安全性:

add_filter('login_errors', 'generic_login_error_message');
function generic_login_error_message() {
    return '用户名或密码错误,请重新输入。';
}

对于需要多因素认证(2FA)或者社交登录(微信、Google、Facebook)的网站,WordPress 生态中有对应的插件可以集成。Google Authenticator 类的 2FA 插件可以大幅提高账户安全性,尤其对于管理员账户。

最后,如果你的网站启用了 SSL,强烈建议在 wp-config.php 中强制使用 HTTPS 登录:

 
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

这能确保登录凭证在传输过程中是加密的,防止中间人攻击。自定义登录页面看起来只是界面上的改动,但它涉及安全、用户体验和品牌多个维度,值得认真设计。