谈到 WordPress，毫无疑问它是托管您网站的最佳平台之一； 它的出众之处当然在于它的稳健性、适应性，更重要的是它的易用性。

但是，如果您打算设置您的第一个网站，那么您可能需要考虑设置一个自定义登录页面供您的客户使用，而不是通常的 WordPress 登录页面。

对于初学者来说，使用古板的 WordPress 登录页面有点不专业，至少可以说没有吸引力——为什么不加倍努力为您的客户设置一个自定义页面来登录呢？

设置过程相当简单，您可以手动完成，也可以安装一个特殊的插件来自动完成设置过程。

但请记住，在手动设置时，您对主题所做的任何和所有更改都可能在您更新 WordPress 时被删除。 手册和插件的过程都在下面发布，供您参考。

1.创建一个没有插件的自定义登录页面WordPress

在手动设置自定义登录页面时，唯一的要求是您需要非常精通 HTMP、PHP、CSS3 等。

您可以轻松创建自己的自定义 WordPress 登录页面 - 只需按照下面发布的说明进行操作。 您将需要转到您的主题文件并在 function.php 文件中进行更改。

自定义登录页面的基本修改

这些是您希望对主 WordPress 登录页面进行的一些基本更改，从徽标本身的背景开始。

结合这些更改应该有助于使您的自定义登录页面看起来更专业，并使其因所有正确的原因而脱颖而出。

• 添加自定义背景。
• 添加自定义徽标。
• 自定义登录表单的外观。
• 更改登录徽标 URL。
• 删除丢失的密码链接。
• 删除“返回”链接。
• 隐藏登录错误消息。
• 移除登录页面抖动。
• 更改重定向 URL。
• 将“记住我”设置为选中。

相关文章：12+ 最好的免费 WordPress 自定义登录插件

以下是接下来要做的事情：

WordPress 不会加载您的主题样式表，因为登录页面不是 WordPress 主题设置的一部分。 因此，需要为自定义登录页面提供自己的样式表。

在此之前，您将在主题文件夹中创建一个名为 Login 的新文件夹。 在此，创建一个新的 .txt 文件并将其保存为 custom-login-style.css。 请确保您记住文件名，因为您很快就会需要它。

一旦你有了登录页面的 CSS，你必须告诉 WordPress 显式加载它。 为此，您将把这段代码放在 function.php 中，以便它完美地加载这个特定的文件。
—

functionmy_custom_login()
{
echo '';
}
add_action('login_head', 'my_custom_login');

这应该会立即显示出来，您可以预览更改以查看样式表是否已正确加载。 请注意 CSS 代码，因为即使是一个小错误也会阻止您的自定义登录页面加载。 让我们进入流程的下一步，即添加自定义背景。

添加自定义背景：

您可以将您偏好的任何背景图像添加到您的登录页面。 只需在自定义页面 CSS 的第二行中指定它的正确名称即可。 设置背景的代码如下

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

添加自定义徽标：

这是标记品牌标识的最关键步骤。 大多数用户更喜欢继续使用 WordPress 徽标，但这是一个错误，尤其是在您建立一个全新的商业网站时。

您需要设置自定义登录页面的原因之一是您可以使用它来重塑自己的品牌。 您可以添加自己的自定义徽标来代替 WordPress 徽标。 将自定义徽标图像保存到 Login/image 文件夹。 您将按以下方式执行此操作

login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}

自定义登录表单：

对于不熟悉编码的人来说，这个过程可能会让人不知所措，但它非常简单，可以在几秒钟内完成。 您需要修改登录表单的外观以匹配您的站点外观。

您可以调整表格的内边距、边距。 您还应该为此更改背景颜色、标签等，您可以参考以下示例代码

.login form{
box-shadow:none;
padding:20px;
}
#login {
background:
#FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color:
#555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}
Further to modify submit button look, you can set margin, border, height, width, the color of it. So, include these lines to your CSS
#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background:
#7B417A;
border-color:
#7B417A;
box-shadow: 0 1px 0
#7B417A;
color:
#FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}

更改登录徽标 URL：

默认情况下，徽标 URL 链接到 WordPress.org。 但是使用下面列出的编码，您可以将其重定向到其他 URL，如下所示

functioncustom_login_logo_url() {
returnget_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );
functioncustom_login_logo_url_title() {
return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

删除丢失的密码链接

当您忘记密码时，丢失密码链接很有用。 当然，它可能非常有用，但此功能经常被滥用，以至于现在将其放在您的网站上被认为是有风险的。 只需添加下面列出的代码，就可以了。

p#nav
{
display: none;
}

删除“返回”链接：

“返回...”链接让用户返回主页。 但这会使您的网站显得有点复古，更不用说它只会增加混乱。 删除这个特定的页面元素总是一个好主意。 为此，您将添加此

p#backtoblog
{
display: none;
}

隐藏登录错误消息：

当用户输入错误的 ID 或密码时，通常会生成登录错误消息。 原因可能是任何原因，用户名不正确或密码错误。 此消息对用户有用，但会造成漏洞，因为黑客可以破解用户登录凭据。

这就是登录错误消息可能带来安全风险的原因，因为它使黑客能够访问您的站点。 因此，最好将function.php文件中的错误消息更改如下

functioncustom_login_error_message()
{
return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');

移除登录页面震动：

当用户提交错误的登录凭据时，登录表单会抖动。 但是，如果您不喜欢此功能，可以将其删除。

WordPress 首次引入此功能时很可爱，但它的功能已经过时了，如今，它使网站看起来不专业，也有点幼稚。

functioncustom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');

更改重定向 URL：
如果您登录 WordPress，它会直接将您重定向到仪表板。 您可以将除管理员之外的所有内容重定向到主页，如下所示

functioncustom_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) &&is_array( $user->roles ) ) {
if(in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
returnhome_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
Set “Remember Me” to Checked
Remember Me box is unchecked by default. You can change it to checked state as follows:
add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
functiondefault_rememberme_checked() {
echo "document.getElementById('rememberme').checked = true;";
}

这完全是关于使用代码自定义登录页面。 您可以尝试对简单 CSS 代码进行的所有修改。 您可以复制、粘贴它并使用它，您应该已经设置好了。

2.使用模板烤面包机插件创建自定义登录页面：

您可以使用的插件非常多，但模板烤面包机插件更好地用于相同的用途。 通过在您的网站上安装此特定插件。

您应该能够设置自己独特的自定义登录页面，这样您就可以重新命名自己并因此接触到更多客户。

登录页面可以轻松定制，这个特殊的插件可以让你做到这一点——从填充到边距，甚至是徽标和背景图像。

因此，请查看此插件并尽早将其安装在您的网站上。 您还可以试用我的插件主题、管理员自定义登录以及其他插件。 您应该能够在几分钟内设置您的自定义登录页面。