如何自定义 WordPress 登录页面：提升品牌形象和用户体验的详细指南

默认情况下，访问者在你的网站上看到的登录页面与管理员使用的登录页面相同。虽然此页面功能齐全，但设计非常简单，留有大量空白，WordPress 徽标位于正中央。它对支持你的品牌或为访问者提供用户友好的体验没有多大帮助。

创建自定义登录页面是你可以对 WordPress 网站进行的相对简单的改进。在本文中，我们将讨论 WordPress 自定义登录页面的优势，介绍创建登录页面的几种方法，并探讨一些用户体验和安全性的最佳实践。

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

自定义 WordPress 登录页面并不一定是一项复杂的项目。只需进行一些简单的调整，例如将 WordPress 徽标换成你自己的徽标并更改背景。

自定义登录页面可以让页面变得更多：

• 方便使用的：自定义页面可以让登录过程更直观，更加方便用户操作。
• 专业的：自定义页面可以提升品牌形象，让网站看起来更专业。
• 视觉吸引力：通过添加品牌元素和个性化设计，可以让页面更加美观。
• 信息丰富：您可以在登录页面上展示重要的通知和信息，增加其功能性。
• 安全的：通过增加安全措施，可以增强登录页面的安全性，保护用户数据。

进行这些改进既快速又简单。现在花一点时间，可以为将来使用登录页面的每位访问者改进登录页面。

如何创建自定义 WordPress 登录页面（3 种方法）

以下是创建自定义 WordPress 登录页面的三种流行方法：

1. 使用 SeedProd 创建 WordPress 自定义登录页面

SeedProd 插件是一种直观的方式来自定义你的登录页面。还可以创建自定义 404 页面、维护模式页面、“即将推出”页面和其它登录页面。

404 页面和登录页面模块需要 SeedProd Pro 计划。要构建你的登录页面，只需按照以下步骤操作：

步骤 1：安装并激活 SeedProd Pro 首先，转到仪表板中的插件页面并选择添加新插件。搜索 SeedProd 并安装。安装完成后，单击启用激活。

接下来，需要升级到高级计划。为此，请单击 SeedProd 选项卡中的“获取专业版”，然后购买高级版本的激活密钥。

步骤 2：使用登录页面模板创建登录页面 激活 SeedProd Pro 后，将鼠标悬停在 SeedProd 选项卡上并选择“登陆页面”。

选择“设置登录页面”以使用预建模板自定义你的新登录页面。然后进入编辑器，可以在其中设计新的登录页面。

SeedProd 编辑器的行为与 WordPress 块编辑器非常相似，可让你轻松添加和修改页面的各个方面。

这些包括用户名和密码输入框、记住我复选框、密码重置链接、图像和背景。

可以使用区块编辑器添加其它文本、图片、表格等，就像添加普通帖子一样。只需根据你的喜好自定义此页面，然后单击屏幕右上角的“保存”按钮即可。

步骤 3：激活新的登录页面 保存设计后，退出编辑屏幕并返回仪表板中的 SeedProd 登陆页面屏幕。将登录页面模块中的开关切换为活动，以将默认登录页面替换为新设计的登录页面。

注销并返回查看其运行情况！重新登录之前，测试重置密码链接和其它功能。

2. 使用 LoginPress 修改登录页面

如果寻找更经济实惠且更简单的产品，LoginPress 是一款方便的免费插件，可用于自定义你的登录页面。它缺少 SeedPod Pro 的一些功能和优化，但为 WordPress 完整网站编辑器添加了功能，轻松自定义你的登录页面。按以下步骤操作：

步骤 1：安装并激活 LoginPress 插件 在仪表板的插件页面中，选择“添加新插件”并搜索“LoginPress”。安装并激活插件。

步骤 2：使用定制器修改登录页面 安装并激活 LoginPress 后，在 WordPress 仪表板左侧看到一个新选项卡。将鼠标悬停在 LoginPress 选项卡上，然后选择 Customizer 来修改你的登录页面。

将直接进入完整站点编辑器内的登录页面。将看到以下功能的图标：

• 更改徽标
• 自定义表单（用户名和密码）
• 自定义按钮（登录）
• 自定义导航（忘记密码？）
• 更改页脚
• 更改模板
• 换背景

选择相应的铅笔或画笔图标即可修改该元素。点击几下，就可以轻松更换徽标、上传自己的背景或更改表单和登录按钮。

无法像使用 SeedProd Pro 中的块编辑器那样完全自由地编辑此页面，但这足以自定义绝大多数登录页面。

第 3 步：探索其它功能并考虑升级 某些功能仅在 LoginPress 高级计划中可用，例如 reCAPTCHA 模块。对于大多数中小型 WordPress 网站来说，免费版本足以创建自定义登录页面。

建议的修改 如果选择这种方式自定义登录页面，那么更换徽标可能是你要做的第一件事。只需点击默认徽标旁边的蓝色铅笔图标即可上传你自己的徽标。

接下来，可以尝试其他一些模板，看看它们是否适合你的风格。如果没有，可以随时上传自己的模板，或者简单地使用你品牌的主色调创建背景。

然后，可以考虑更改实际表单中的字体或文本，以与网站的其他部分保持一致。还需要确保所有链接均能正常工作。

3. 使用自定义代码修改登录页面

如果不想使用插件，也可以使用代码自定义登录页面。这需要更多的技术知识，但确实提供了最大的灵活性。

具体如何使用自定义代码调整登录页面取决于你自己。让我们来看一个你可能想要进行的简单更改示例。

假设你想手动用自己的图形替换登录屏幕上的 WordPress 徽标。对于初学者来说，这可能看起来令人生畏，但对于熟悉访问网站文件和基本代码操作的人来说并不困难。只需按照以下步骤操作：

步骤 1：备份你的网站 每当手动修改网站上的文件或文件夹时，最好创建备份。

定期进行全站备份总是一个好主意，尽管你至少应该复制你计划修改的所有文件。在这种情况下，你将对 functions.php 文件进行更改。

第 2 步：创建并上传你的徽标 当然，需要一张徽标图片来替换默认徽标。将想要使用的图片上传到你的媒体库。

虽然理论上你可以将图像设置为任意大小，但大约 300 像素宽的尺寸非常适合默认登录表单的顶部。我们将使用 300×300 像素作为方形占位符图像的示例。

可以在 WordPress 之外调整图片大小，也可以在媒体库中调整。要执行后者，只需在上传图片后单击图片，然后选择右侧缩略图附近的“编辑图片” 。你可以选择尺寸并单击“缩放”以调整其大小。然后保存图片并继续。

下一步将需要图像的 URL，因此请单击“将 URL 复制到剪贴板”按钮或保持此窗口打开。

步骤 3：修改 functions.php 文件 接下来，找到你的 functions.php 文件。通过文件传输协议 (FTP) 访问你的主题文件夹。此文件夹应与你的主题同名，并位于你网站的 wp-content 文件夹中。

要在登录屏幕上切换 WordPress 徽标，请将此代码添加到其中的 functions.php 文件中。为了避免将其放在另一个脚本的中间，只需将此代码片段插入文件末尾其余代码的下方即可：

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(YOUR IMAGE URL HERE);
            height:300px;
            width:300px;
            background-size: 300px 300px;
            background-repeat: no-repeat;
            padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

将上一步复制的 URL 粘贴到“YOUR IMAGE URL HERE”占位符的位置进行替换。更改后，保存 functions.php 文件。

步骤 4：访问你的登录页面 退出并返回登录页面。

看到你的徽标取代了旧徽标。如果尺寸看起来不对，可以通过更改代码片段中的高度、宽度和背景像素值来调整尺寸。

如果发现任何异常，只需恢复备份即可恢复更改。还可以使用之前创建的备份副本覆盖 functions.php 文件。

如何保护你的 WordPress 登录页面

在实现自定义登录页面时，需要注意一些事项，以确保网站的安全和健康。登录页面是黑客和机器人的主要目标，因此必须严密保护它。以下是几种保护方法：

双因素身份验证 (2FA)

双重身份验证（也称为 2FA）可大大降低账户被黑客入侵的可能性。使用 2FA，除了需要用户名和密码外，当访问者尝试从新设备或未注册的设备登录时，还需要第二种身份验证形式。

例如，如果黑客能够获得网站某位用户的登录凭据，他们就可以直接登录该帐户并造成破坏。有时黑客只需根据用户名猜出密码即可。实施 2FA 后，还需要第二种验证形式。

通常，这是以电子邮件或文本的形式发送给帐户持有人，以确认他们正在尝试登录。由于黑客不太可能访问用户的电子邮件或设备，因此这几乎可以确保用户是真实的。

通常可以通过允许用户注册设备来加快 2FA，这样来自该来源的登录尝试就不需要每次都进行验证。有许多插件可用于在你的网站上设置 2FA。如果你的网站处理任何类型的敏感信息或财务信息，这一点尤其重要。

CAPTCHA 和 reCAPTCHA

猜测登录凭据的一种方法是使用机器人暴力攻击你的网站。也就是程序会自动尝试猜测常见的用户名和密码组合，直到成功。这对人类来说似乎是一项艰巨的任务，但机器人可以快速自动地完成这项任务，无需人工干预就能猜出数千个常见密码。

在 WordPress 中添加 CAPTCHA 的目的是阻止这些机器人尝试登录。可能遇到过这些测试。它们过去以扭曲的单词形式出现，必须破译这些单词并将其输入到框中。

更现代的 CAPTCHA 涉及选择包含特定物体（如汽车或烟囱）的图片。这些测试对于机器人来说很难解决，因此可以有效阻止暴力破解尝试。

reCAPTCHA 是该技术的一种高级形式，它几乎不需要人类用户的输入即可阻止机器人。LoginPress 在其 Pro 版本中包含了 reCAPTCHA 技术，或者可以在特定插件或更全面的安全工具中找到 CAPTCHA 应用程序。

反网络钓鱼通知

窃取登录凭据的一种低技术策略是模仿权威来源并直接索取。这被称为网络钓鱼。

例如，有人可能会使用你或你公司的名称创建电子邮件地址，然后发送电子邮件要求提供登录凭据以解决问题。如果电子邮件和地址令人信服，有些人可能会上钩并做出回应，泄露他们的帐户信息。

防止这种情况发生的一种方法是发布反网络钓鱼通知，宣布你和你的公司永远不会索要此类信息。任何此类电子邮件或消息都应视为垃圾邮件并被忽略。登录页面上的一条简单通知可能意味着成功的网络钓鱼尝试和安全帐户之间的区别。

总结：

自定义登录页面可以改善用户体验，让你的网站看起来更专业，并可用于分享重要信息。

可以使用以下方法更改 WordPress 登录页面：

• 使用 SeedProd 之类的插件创建一个全新的登录页面。
• 使用 LoginPress 等免费工具修改你的登录页面。
• 使用自定义代码进行手动更改，例如交换默认徽标。

为了充分利用你的登录屏幕，插件可让你轻松自定义页面，完全符合你的需要。