更新于2024年1月3日，由编辑团队撰写 | 审阅：Syed Balkhi
你是否想为你的网站创建一个自定义的WordPress登录页面？如果你运营一个WordPress会员网站或在线商店，许多用户将经常看到你的登录页面。自定义默认的WordPress登录页面可以提供更好的用户体验。
在这篇终极指南中，我们将向你展示创建自定义WordPress登录页面的不同方法。这同样适用于创建自定义WooCommerce登录页面。
你将从本指南中学习到：
为什么要创建自定义WordPress登录页面？
WordPress登录页面设计示例
使用Theme My Login插件创建自定义WordPress登录页面（免费）
使用WPForms创建自定义WordPress登录页面
使用SeedProd（推荐）创建自定义WordPress登录页面
更改WordPress登录徽标和URL
禁用WordPress登录页面语言切换器
为什么要创建自定义WordPress登录页面？
你的WordPress网站具有强大的用户管理系统。它允许用户在电子商务商店、会员网站和博客上创建帐户。默认情况下，登录页面显示的是WordPress品牌和徽标。如果你是唯一的管理员或者只有很少的用户，这样就可以了。
但是，如果你的网站允许用户注册和登录，那么自定义登录页面可以提供更好的用户体验。一些用户可能会对看起来与网站完全不同的WordPress登录页面感到怀疑。如果你使用自己的公司徽标和设计，他们会更加放心。
最后，默认登录页面除了登录表单外什么也没有。通过创建自定义登录页面，你可以利用这个空间来推广其他页面或特别优惠。现在让我们看看一些自定义WordPress登录页面设计的示例。
WordPress登录页面设计示例
网站所有者可以使用不同的样式和技巧来自定义WordPress登录页面。有些人创建了一个使用其网站主题和颜色的自定义登录页面。其他人通过添加自定义背景颜色和徽标来修改默认的登录页面。
以下是一些可能的示例。
WPForms
WPForms是市场上最好的WordPress联系表单插件。他们的插件还包括一个插件，可以创建漂亮的WordPress登录和注册表单，我们将在本文中向你展示如何操作。
他们的自定义登录页面采用了两栏布局。左侧是登录表单，右侧用于突出显示促销活动和其他号召性用语。
Jacquelynne Steves
Jacquelynne Steeves是一个艺术和工艺品网站，作者在其中发布关于装饰房屋、制作被子、图案、刺绣等内容。
他们的登录页面使用了一个与其网站主题相匹配的自定义背景图像，登录表单位于右侧。
Church Motion Graphics
这家动态图形设计公司的登录页面使用了一个色彩斑斓的背景，反映了他们业务的本质。
它在登录屏幕上使用了相同的网站头部、页脚和导航菜单。登录表单本身非常简单，采用了浅色背景。
MITSloan Management Review
MITSloan Management Review使用弹出模式来显示登录和注册表单。使用弹出窗口的优势在于用户可以在不离开页面的情况下进行登录。它避免了页面重新加载，并提供了更快的用户体验。
现在你准备好学习如何在WordPress中创建自定义登录页面了吗？
使用Theme My Login插件创建自定义WordPress登录页面（免费）
Theme My Login是一个免费插件，可以根据你的WordPress主题更改登录页面。它的可定制性不强，但它会取代默认的WordPress品牌登录页面，使其看起来更专业。
首先你需要安装并激活Theme My Login插件。激活后，Theme My Login会自动为你的自定义登录、注销、注册、忘记密码和重置密码操作创建URL。
你可以通过访问Theme My Login » General页面来自定义这些WordPress登录URL。你可以在“Slugs”部分修改插件为登录操作使用的URL。
Theme My Login还允许你使用短代码来创建自定义登录和注册页面。你可以为每个操作创建一个页面，然后在此添加页面别名，以便插件能够正确找到并重定向用户。
让我们从登录页面开始。前往页面 » 添加新页面，创建一个新的WordPress页面。接下来，你需要为页面命名，然后在页面中输入以下短代码[theme-my-login]。
你现在可以发布你的页面并预览它，查看你的自定义登录页面的效果。就是这样。
简单重复这个过程，使用以下短代码创建其他页面：
[theme-my-login action=”register”] 用于注册表单
[theme-my-login action=”lostpassword”] 用于忘记密码页面
[theme-my-login action=”resetpass”] 用于重置密码页面
使用WPForms创建自定义WordPress登录页面
WPForms是市场上最好的WordPress表单构建器插件。它允许你轻松为你的网站创建自定义登录和注册表单。
第一步你需要做的是安装和激活WPForms插件。在完成之后，你需要访问WPForms » 设置页面，输入你的许可证密钥。你可以在WPForms网站的账户中找到这些信息。输入许可证密钥后，你将能够安装插件。
访问WPForms » 插件页面，找到用户注册插件并点击“安装插件”按钮，下载并激活插件。现在你可以创建自己的自定义登录表单了。
前往WPForms » 新增页面，向下滚动到“用户登录表单”模板。点击“使用模板”按钮继续。
WPForms会加载带有必要字段的用户登录表单。你可以点击字段，添加自己的描述或文本。
你可以还可以更改其他设置。例如，默认按钮标题是“提交”，你可以点击按钮，然后将文本更改为“登录”。
你还可以决定在用户成功登录后会发生什么。前往设置 » 确认选项卡，选择一个操作。你可以将用户重定向到其他URL，重定向到主页，或者只是显示一条消息，告诉他们已经登录。
完成表单设置后，点击屏幕右上角的“保存”按钮并关闭表单构建器。
将你的自定义登录表单添加到WordPress页面
WPForms使得在任何WordPress文章或页面上添加自定义登录表单变得非常简单。编辑你想要添加登录表单的页面或创建一个新页面。在页面编辑屏幕上，添加WPForms模块到内容区域。
接下来，选择你之前创建的登录表单，WPForms模块会自动将其加载到内容区域。你现在可以继续编辑登录表单页面。可以随意添加更多文本或促销模块。完成后，不要忘记保存并发布更改。你现在可以访问你的网站，查看登录页面的效果。
使用SeedProd（推荐）创建自定义WordPress登录页面
默认情况下，你的自定义登录表单页面将使用你的主题页面模板和样式。它会有你主题的导航菜单、头部、页脚和侧边栏小工具。如果你想完全接管整个页面并从头开始设计，那么你可以使用WordPress页面构建器插件。
SeedProd是WordPress最好的着陆页构建器。它对初学者友好，并提供拖放构建器来帮助你创建任何类型的着陆页，包括登录页面、即将推出页面、维护模式页面等。我们将使用SeedProd高级版本，因为它包含登录页面模板和高级页面模块，用于定制化。
首先，你需要在你的网站上安装SeedProd插件。激活插件后，你将被重定向到WordPress管理后台的SeedProd页面。你需要输入你的许可证密钥，可以在SeedProd账户中轻松获取。输入密钥后，点击“验证密钥”按钮。
之后，你就可以在SeedProd中创建你的登录页面了。前往SeedProd » 着陆页，然后点击“设置登录页面”按钮选择“登录页面”选项。
在下一个屏幕中，你可以选择登录页面的模板。你也可以选择使用空白模板从头创建一个页面。然而，我们建议使用模板，因为这样更容易和更快地定制登录页面。
选择模板后，弹出窗口会要求你输入登录页面的页面名称。SeedProd会使用页面名称作为着陆页的URL。输入这些详细信息后，点击“保存并开始编辑页面”按钮。
现在，你可以使用SeedProd的拖放构建器编辑你的登录页面。构建器让你可以轻松地右侧菜单中拖动任何页面模块并将其放置在页面上的任何位置。例如，你可以添加一些文本、视频或按钮到你的登录页面。在高级模块部分，有更多的定制选项，你可以添加倒计时计时器、社交分享图标等。
SeedProd甚至允许你删除模板中的现有页面模块。只需点击垃圾桶图标即可删除页面模块。
然后，如果你点击登录页面上的任何部分，你会看到更多的定制选项。例如，你可以更改字段的文本和颜色，选择不同的字体，编辑按钮的颜色等。
当你对登录页面的设计满意后，点击顶部的“连接”选项卡。你现在可以连接不同的电子邮件营销服务，如Constant Contact、Drip等。
之后，你需要前往页面设置选项卡。在常规设置下，SeedProd允许你编辑页面标题，并将页面状态从草稿更改为发布。你还可以选择使用SeedProd链接并添加你的SeedProd联盟链接来赚取更多收入。
如果你想优化登录页面以便于搜索引擎，那么前往SEO设置。在这里，你会找到一个按钮，可以安装All In One SEO插件。All In One SEO for WordPress（AIOSEO）是最好的WordPress SEO插件，允许你为搜索引擎和社交媒体平台优化你的网站。你可以在我们的指南中了解其使用方法。
之后，你还可以在代码片段设置选项卡中添加不同的代码片段。例如，你可以在此添加Google Analytics代码、Facebook像素或其他跟踪代码。
现在你已经更改了页面设置，点击顶部的“保存”按钮。接下来，你需要使你的登录页面生效。为此，你可以退出着陆页构建器，然后前往SeedProd » 着陆页。在这里，点击开关将页面状态从“未激活”更改为“激活”。
现在你可以访问你的登录页面URL，查看登录页面的效果。
另一个选择：你也可以使用Thrive Architect设计一个吸引人的登录页面。它是另外一个我们推荐的优秀拖放页面构建器插件，用于创建自定义页面。它包含超过300个专业设计的模板，让你可以创建一个像下面这样的登录页面。
如果你不喜欢使用WordPress页面构建器插件，那么你可以使用自定义CSS来样式化表单和登录页面本身。
更改WordPress登录徽标和URL
你不需要为你的网站创建一个完全自定义的WordPress登录页面。许多网站只更改了登录页面上的WordPress徽标和URL，同时仍然使用默认的登录页面。如果你想在登录屏幕上替换WordPress徽标为你自己的徽标，你可以轻松地使用WordPress插件或添加自定义代码。以下是两种方法。
方法1：使用插件更改WordPress登录徽标和URL
首先你需要安装并激活Colorlib Login Customizer插件。激活后，插件会在WordPress主题定制器中添加一个新菜单项。前往外观 » 定制并点击新的“Colorlib Login Customizer”项以启动登录定制器。
定制器将加载默认的WordPress登录屏幕，左侧是定制选项，右侧是实时预览。要替换WordPress徽标为你自己的徽标，点击右侧的“徽标选项”选项卡。
从这里，你可以隐藏WordPress徽标，上传你自己的自定义徽标，并更改徽标URL和文本。你还可以定制徽标的大小和颜色，以及自定义徽标的宽度和高度。
插件还允许你完全定制默认的WordPress登录页面。你可以添加列、背景图像、更改登录表单的颜色等。基本上，你可以在不改变默认WordPress登录URL的情况下创建自定义登录页面。完成后，点击“发布”按钮保存更改。你现在可以访问WordPress登录页面，查看你的自定义登录表单效果。
方法2：使用代码更改WordPress登录徽标和URL
此方法允许你在登录屏幕上手动替换WordPress徽标为你自己的自定义徽标，而无需使用插件。首先你需要将自定义徽标上传到媒体库。前往媒体 » 添加新页面，上传自定义徽标。
上传图像后，点击它旁边的“编辑”链接。这将打开编辑媒体页面，你需要复制文件URL并将其粘贴到一个方便的地方，例如电脑上的空白文本文件中。
接下来，将以下代码片段添加到你主题的functions.php文件中，或使用WPCode插件轻松添加自定义代码（推荐）：
function wpb_login_logo() { ?>
#login h1 a, .login h1 a {
background-image: url(http://path/to/your/custom-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );不要忘记替换第4行的background-image URL为你之前复制的文件URL。你还可以调整其他CSS属性以匹配你的自定义徽标图像。你现在可以访问WordPress登录页面，查看你的自定义徽标效果。
但是，此代码仅替换WordPress徽标。它不会更改徽标链接，链接指向WordPress.org网站。让我们更改一下。将以下代码添加到你主题的functions.php文件中或WPCode中。你可以将其粘贴在之前添加的代码下方：
function wpb_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
function wpb_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );不要忘记将‘Your Site Name and Info’替换为你的网站实际名称。登录屏幕上的自定义徽标现在将指向你的网站主页。
禁用WordPress登录页面语言切换器
WordPress 5.9引入了一个新的下拉登录选项，允许用户在登录网站时选择新的语言。如果网站上有多个活动语言，则此选项将出现。这对于多语言网站和不同用户需求的团队非常有用。
如果你想保持登录页面简单，并且用户不需要频繁切换语言，那么删除语言切换器可以帮助简化登录页面。你可以使用插件或代码来实现这点。
方法1：使用插件禁用语言切换器
只需安装并激活Disable Login Language Switcher插件。激活后，语言切换器选项将自动删除。没有额外的设置需要配置。现在，当你访问登录屏幕，你将看到没有语言切换器选项的标准登录屏幕。
方法2：使用代码禁用语言切换器
另一种禁用语言切换器的方法是向WordPress添加代码。将以下代码片段添加到你的functions.php文件或WPCode中：
add_filter( 'login_display_language_dropdown', '__return_false' );我们希望这篇文章能帮助你了解为你的网站创建WordPress登录页面的不同方式。你可能还希望阅读我们的终极WordPress安全指南，了解提高WordPress登录安全性的技巧，或者查看我们对最佳小型企业实时聊天软件的比较。
