Blog

很多 WordPress 网站常常忽略了登录页面的重要性，而登录页面是用户与网站的第一次互动。一个默认或设计不好的 WordPress 自定义登录页面可能会降低用户体验。

而一个设计良好的登录页面不仅能给客户留下深刻印象，还能增强安全性。本文会介绍两种自定义 WordPress 登录页面的有效方法：修改 functions.php 文件以及应用自定义 CSS。

为什么需要自定义 WordPress 登录页面？

有些人可能会有疑问，登录页面的自定义是否值得投入时间，尤其是在任务清单已经很长的情况下。关于这方面的优化有几个理由：

网站品牌与设计
登录页面是用户的第一印象，它应该与网站的整体外观和风格保持一致。通过自定义颜色、字体、Logo和布局，可以为用户（尤其是忠实客户）创造统一的品牌体验。

提升用户体验
设计良好的登录页面可以增强用户体验。简洁且易用的界面能够吸引用户参与，而杂乱或难以理解的页面可能会让用户离开。投入时间优化登录体验可以显著提升用户满意度。

提高网站安全性
保护网站安全至关重要。自定义登录页面是一个有效的安全措施，可以通过隐藏默认的 WordPress 登录页面并更改其 URL，降低网站受到攻击的可能性。这不仅能减少未经授权的访问，还能增强用户对网站的信任感。

自定义默认 wp-login.php 页面的方法

有多种方法可以修改 WordPress 的登录页面。如果不想创建单独的页面，我们重点介绍两种种简单的自定义方法：

通过 functions.php 文件自定义 wp-login.php 页面

用主题的 functions.php 文件修改默认的 WordPress 登录页面时，建议先创建一个测试环境，以避免影响线上网站的正常运行。

下面是具体步骤：

1. 进入测试环境
   通过 SSH 访问新应用程序，并确认当前使用的主题。在本示例中，我们用的是 twenty-twenty-four 主题。
2. 找到主题目录
   主题目录通常位于：
   /home/master/applications/appname/public_html/wp-content/themes/twentytwentyfour
3. 编辑 functions.php 文件
   用文本编辑器打开 functions.php 文件，在文件末尾添加需要的代码。

注意：直接编辑 functions.php 文件存在一定风险。建议创建子主题，将自定义代码隔离，避免主题更新时导致问题。

下面是functions.php文件的代码：

// Add custom CSS to the login page
function custom_login_styles() {
    ?>
    <style type="text/css">
        body.login {
            background-color: #141414; /* Dark background*/
            color: #ffffff; /* White text color */
            font-family: 'Arial', sans-serif; /* Font style */
        }
        .login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png'); /* Your logo if needed */
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 80px; /* Adjust height */
            display: block; 
            margin: 0 auto; 
        }
        .login form {
            background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white background */
            padding: 40px;
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Shadow for depth */
            margin: 0 auto; /* Center the form */
            max-width: 400px; /* Set a maximum width for the form */
        }
        .login label {
            color: #ffffff; /* White label text */
        }
        .login input[type="text"],
        .login input[type="password"] {
            border: 1px solid #ffffff; /* White border for inputs */
            border-radius: 5px; /* Rounded corners */
            padding: 10px; /* Padding for inputs */
            width: 100%; /* Full width */
            margin-bottom: 20px; /* Space between inputs */
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff; /* White text color */
        }
        .login #wp-submit {
            background-color: #e50914; /* red */
            border: none; /* Remove border */
            color: #ffffff; /* White text color */
            cursor: pointer; /* Pointer on hover */
            padding: 10px; /* Padding for button */
            width: 100%; /* Full width */
            border-radius: 5px; /* Rounded corners */
        }
        .login #wp-submit:hover {
            background-color: #f40612; /* Red on hover */
        }
        #nav {
            text-align: center; /* Center the navigation links */
            font-size: 12px; /* Make the font smaller */
            margin-top: 20px; /* Space above the links */
        }
        #nav a {
            color: #e50914; /* Red */
            text-decoration: none; /* Remove underline */
        }
        #nav a:hover {
            text-decoration: underline; /* Underline on hover */
        }
    </style>
    <?php
}
add_action('login_head', 'custom_login_styles');

提供的代码会修改登录页面的默认外观。现在可以自定义 CSS 以实现想要的效果。

用自定义 CSS 修改 wp-login.php

通过向 wp-login.php 文件注入自定义 CSS，可以对 WordPress 登录页面进行高度定制。但需要谨慎使用此方法，直接修改 WordPress 核心文件可能会导致问题，尤其是当对 CSS 或 WordPress 开发不熟悉时。

为了安全地尝试此方法，建议创建一个测试环境。

具体步骤如下：

准备测试站点
创建测试站点后，访问并找到 wp-login.php 文件的准确路径。通常，该文件位于 WordPress 根目录中。

备份原文件
在进行修改之前，先备份 wp-login.php 文件，可以将其重命名为类似 wp-login-original.php 的名称。

测试修改
在测试环境中彻底测试你的修改，确保没有问题后，再应用到线上网站。

注意：直接修改核心文件风险较高，用这个方法前建议仔细权衡，还要确保修改后的网站功能和样式正常运行。

接下来，进入应用程序的 public_html 文件夹。在这里可以找到 wp-login.php 文件。

需要将提供的代码直接放置在 wp-login.php 文件的 <head> 标签的起始和结束标签之间。通常，这段代码应该位于文件的最顶部。

找到 wp-login.php 文件中 <head> 部分的现有代码，并将其完全替换为提供的新代码。

下面是代码：

        ?><!DOCTYPE html>                                                                                                                                               
        <html <?php language_attributes(); ?>>                                                                                                                          
<head>                                                                                                                                                                  
    <meta charset="<?php bloginfo('charset'); ?>" />                                                                                                                    
    <title><?php wp_title(); ?></title>                                                                                                                                 
    <link rel="stylesheet" href="<?php echo includes_url('css/login.css'); ?>" type="text/css" />                                                                       
<style>                                                                                                                                                                 
      body.login {                                                                                                                                                      
        background-color: #ffffff; /* Complete background white */                                                                                                      
        font-family: Arial, sans-serif; /* Change font */                                                                                                               
    }                                                                                                                                                                   
    .login h1 {                                                                                                                                                         
        text-align: center; /* Center the logo */                                                                                                                       
        margin-bottom: 20px; /* Space below the logo */                                                                                                                 
    }                                                                                                                                                                   
    .login h1 a {                                                                                                                                                       
        background-image: url('<?php echo get_stylesheet_directory_uri(); ?>'); /* Add your logo as required */                                                                     
        background-size: contain;                                                                                                                                       
        background-repeat: no-repeat;                                                                                                                                   
        width: 100%; /* Make the logo full width */                                                                                                                     
        height: 80px; /* Adjust height */                                                                                                                               
        display: block;                                                                                                                    
    }                                                                                                                                                                   
    .login form {                                                                                                                                                       
        background-color: #d3d3d3; /* Grey background for the form */                                                                                                   
        padding: 26px;                                                                                                                                                  
        border-radius: 5px; /* Rounded corners */                                                                                                                       
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */                                                                                                       
        margin: 0 auto; /* Center the form */                                                                                                                           
        max-width: 400px; /* Set a maximum width for the form */                                                                                                        
    }                                                                                                                                                                   
    .login label {                                                                                                                                                      
        font-weight: bold; /* Bold labels */                                                                                                                            
        color: orange; /* Change label color to orange */                                                                                                               
    }                                                                                                                                                                   
    .login input[type="text"],                                                                                                                                          
    .login input[type="password"] {                                                                                                                                     
        border: 1px solid #ddd; /* Border for inputs */                                                                                                                 
        border-radius: 3px; /* Rounded corners */                                                                                                                       
        padding: 10px; /* Padding for inputs */                                                                                                                         
        width: 100%; /* Full width */                                                                                                                                   
    }                                                                                                                                                                   
    .login #wp-submit {                                                                                                                                                 
        background-color: #007cba; /* Button color */                                                                                                                   
        border: none; /* Remove border */                                                                                                                               
        color: #fff; /* Text color */                                                                                                                                   
        cursor: pointer; /* Pointer on hover */                                                                                                                         
        padding: 10px; /* Padding for button */                                                                                                                         
        width: 100%; /* Full width */                                                                                                                                   
    }                                                                                                                                                                   
    .login #wp-submit:hover {                                                                                                                                           
        background-color: #006ba1; /* Darker button on hover */                                                                                                         
    }                                                                                                                                                                   
    .custom-message {                                                                                                                                                   
        color: orange; /* Change custom message font color to orange */                                                                                                 
        text-align: center; /* Center the message */                                                                                                                    
        margin-bottom: 20px; /* Space below the message */                                                                                                              
    }                                                                                                                                                                   
    #nav {                                                                                                                                                              
        text-align: center; /* Center the navigation links */                                                                                                           
        font-size: 12px; /* Make the font smaller */                                                                                                                    
        margin-top: 20px; /* Space above the links */                                                                                                                   
    }                                                                                                                                                                   
    #nav a {                                                                                                                                                            
        color: #007cba; /* Change link color */                                                                                                                         
        text-decoration: none; /* Remove underline */                                                                                                                   
    }                                                                                                                                                                   
    #nav a:hover {                                                                                                                                                      
        text-decoration: underline; /* Underline on hover */                                                                                                            
    }                                                                                                                                                                   
</style>                                                                                                                                                                
</head>

提供的代码会给网站登录页面生成一个基础样式。可以尝试不同的 CSS 属性和值，实现你想要的外观效果。

保护 WordPress 登录页面

在自定义登录页面时，安全性同样需要优先考虑。下面是一些保护 WordPress 登录页面的技巧：

1. 限制登录尝试次数：用插件限制单个 IP 地址的登录尝试次数。
2. 启用双因素身份验证：添加额外的安全层，可以有效防止未经授权的访问。
3. 更改登录 URL：考虑使用插件将默认的登录 URL 从 /wp-login.php 更改为其他地址。

总结

本文介绍了两种方法来自定义 WordPress 登录页面，而无需创建单独的页面或重定向的复杂操作。修改 functions.php 文件或应用自定义 CSS，可以让 WordPress 登录页面与网站品牌一致，提升整体用户体验。