很多 WordPress 网站常常忽略了登录页面的重要性，而登录页面是用户与网站的第一次互动。一个默认或设计不好的 WordPress 自定义登录页面可能会降低用户体验。
而一个设计良好的登录页面不仅能给客户留下深刻印象，还能增强安全性。本文会介绍两种自定义 WordPress 登录页面的有效方法：修改 functions.php 文件以及应用自定义 CSS。
![图片[1]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241228095140476-image.png)
为什么需要自定义 WordPress 登录页面？
有些人可能会有疑问，登录页面的自定义是否值得投入时间，尤其是在任务清单已经很长的情况下。关于这方面的优化有几个理由：
网站品牌与设计
登录页面是用户的第一印象，它应该与网站的整体外观和风格保持一致。通过自定义颜色、字体、Logo和布局，可以为用户（尤其是忠实客户）创造统一的品牌体验。
提升用户体验
设计良好的登录页面可以增强用户体验。简洁且易用的界面能够吸引用户参与，而杂乱或难以理解的页面可能会让用户离开。投入时间优化登录体验可以显著提升用户满意度。
提高网站安全性
保护网站安全至关重要。自定义登录页面是一个有效的安全措施，可以通过隐藏默认的 WordPress 登录页面并更改其 URL，降低网站受到攻击的可能性。这不仅能减少未经授权的访问，还能增强用户对网站的信任感。
自定义默认 wp-login.php 页面的方法
有多种方法可以修改 WordPress 的登录页面。如果不想创建单独的页面，我们重点介绍两种种简单的自定义方法：
通过 functions.php 文件自定义 wp-login.php 页面
用主题的 functions.php 文件修改默认的 WordPress 登录页面时，建议先创建一个测试环境，以避免影响线上网站的正常运行。
下面是具体步骤：
- 进入测试环境
通过 SSH 访问新应用程序，并确认当前使用的主题。在本示例中，我们用的是 twenty-twenty-four 主题。 - 找到主题目录
主题目录通常位于：/home/master/applications/appname/public_html/wp-content/themes/twentytwentyfour - 编辑 functions.php 文件
用文本编辑器打开 functions.php 文件，在文件末尾添加需要的代码。
注意：直接编辑 functions.php 文件存在一定风险。建议创建子主题，将自定义代码隔离，避免主题更新时导致问题。
![图片[2]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241227170923906-image.png)
下面是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 以实现想要的效果。
![图片[3]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241227171050873-image.png)
用自定义 CSS 修改 wp-login.php
通过向 wp-login.php 文件注入自定义 CSS，可以对 WordPress 登录页面进行高度定制。但需要谨慎使用此方法，直接修改 WordPress 核心文件可能会导致问题，尤其是当对 CSS 或 WordPress 开发不熟悉时。
为了安全地尝试此方法，建议创建一个测试环境。
具体步骤如下：
准备测试站点
创建测试站点后，访问并找到 wp-login.php 文件的准确路径。通常，该文件位于 WordPress 根目录中。
备份原文件
在进行修改之前，先备份 wp-login.php 文件，可以将其重命名为类似 wp-login-original.php 的名称。
测试修改
在测试环境中彻底测试你的修改，确保没有问题后，再应用到线上网站。
注意：直接修改核心文件风险较高，用这个方法前建议仔细权衡，还要确保修改后的网站功能和样式正常运行。
![图片[4]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241227171940814-image.png)
接下来，进入应用程序的 public_html 文件夹。在这里可以找到 wp-login.php 文件。
![图片[5]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241228093412733-image.png)
需要将提供的代码直接放置在 wp-login.php 文件的 <head> 标签的起始和结束标签之间。通常，这段代码应该位于文件的最顶部。
![图片[6]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241228093826625-image.png)
找到 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 属性和值，实现你想要的外观效果。
![图片[7]-361Sale WordPress Care](https://www.wpcitation.com/wp-content/uploads/2026/07/20241228094241207-image.png)
保护 WordPress 登录页面
在自定义登录页面时，安全性同样需要优先考虑。下面是一些保护 WordPress 登录页面的技巧：
- 限制登录尝试次数：用插件限制单个 IP 地址的登录尝试次数。
- 启用双因素身份验证：添加额外的安全层，可以有效防止未经授权的访问。
- 更改登录 URL：考虑使用插件将默认的登录 URL 从
/wp-login.php更改为其他地址。
总结
本文介绍了两种方法来自定义 WordPress 登录页面，而无需创建单独的页面或重定向的复杂操作。修改 functions.php 文件或应用自定义 CSS，可以让 WordPress 登录页面与网站品牌一致，提升整体用户体验。