如何创建自定义 WordPress 登录页面(终极指南)

技术教程 2021年11月5日
1407 0

您想为您的网站创建自定义 WordPress 登录页面吗?

如果您经营 WordPress 会员网站或在线商店，那么您的许多用户会经常看到登录页面.自定义默认的 WordPress 登录页面可以让您提供更好的用户体验.

在本终极指南中，我们将向您展示创建自定义 WordPress 登录页面的不同方法.您还可以使用本教程来创建自定义 WooCommerce 登录页面.

How to easily create a custom WordPress login page for your site

这是您将从本指南中学到的内容.

  • 为什么要创建自定义 WordPress 登录页面
  • WordPress 登录页面设计示例
  • 使用 Theme My Login 创建 WordPress 登录页面
  • 使用 WPForms 创建自定义 WordPress 登录页面
  • 使用 SeedProd 创建自定义 WordPress 登录页面
  • 更改 WordPress 登录页面上的登录徽标
  • 使用插件更改 WordPress 登录徽标和 URL
  • 无需插件(代码)即可更改 WordPress 登录徽标和 URL

为什么要创建自定义 WordPress 登录页面?

WordPress 带有强大的用户管理系统.这允许用户在电子商务商店、会员网站或博客上创建帐户.

默认情况下，登录页面会显示 WordPress 品牌和徽标.如果您运行一个小博客或者是唯一具有管理员访问权限的人，这很好.

Default WordPress login screen

但是，如果您的网站允许用户注册和登录，那么自定义登录页面会提供更好的用户体验.

使用您自己的徽标和设计让您的用户有宾至如归的感觉.而将它们重定向到与您的网站完全不同的默认 WordPress 登录屏幕可能会让您的用户感到可疑.

最后，默认登录屏幕除了登录表单外不包含任何内容.通过创建自定义登录页面，您可以利用它来推广其他页面或特别促销.

话虽如此，让我们来看看自定义 WordPress 登录页面设计的一些示例.

WordPress 登录页面设计示例

网站所有者可以使用不同的样式和技术自定义 WordPress 登录页面.

有些人会创建一个使用其网站主题和颜色的自定义登录页面.其他人通过添加自定义背景、颜色和徽标来修改默认登录页面.

1.WPForms

WPForms

WPForms 是市场上最好的 WordPress 联系表单插件.巧合的是，他们的插件还包括一个附加组件，用于创建漂亮的 WordPress 登录和注册表单，我们将在本文后面向您展示.

他们的自定义登录页面使用两列布局.左列包含登录表单，右列用于突出促销和其他号召性用语.

在上面的示例中，他们使用登录页面来分享他们的年度报告.它使用自定义品牌、背景插图和品牌颜色来创建独特的登录体验.

2.摇滚我的婚礼

Rock My Wedding

Rock My Wedding 的网站使用弹出式模式来显示登录和注册表单.

使用弹窗的好处是用户不用离开页面就可以登录.它可以避免新页面加载并提供更快的用户体验.

3.杰奎琳·史蒂文斯

Jacquelynne Steves

Jacquelynne Steeves 是一个手工艺品网站，作者在该网站上发布有关装饰家居、制作被子、图案、刺绣等的内容.

他们的登录页面使用与他们网站主题相匹配的自定义背景图片和右侧的登录表单.

4.教堂动态图形

Church Motion Graphics

这家动态图形设计公司的登录页面使用彩色背景来反映其业务的全部内容.

它在登录屏幕上使用相同的网站页眉、页脚和导航菜单.登录表单本身非常简单，背景为深色.

5.MITSLoan 管理审查

MITSLoan Management Review

MITSLoan Management Review 网站使用默认的 WordPress 登录屏幕.它还使用带有自己徽标的自定义 CSS 来隐藏 WordPress 品牌.

现在，您准备好学习如何在 WordPress 中创建自定义登录页面了吗?

使用 Theme My Login 创建 WordPress 登录页面

Theme My Login 是一个免费插件，可以更改您的登录页面以匹配您的 WordPress 主题.

它不是很可定制，但它会取代默认的 WordPress 品牌登录页面，看起来更专业.

您需要做的第一件事是安装并激活 Theme My Login 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，Theme My Login 会自动为您的自定义登录、注销、注册、忘记密码和重置密码操作创建 URL.

您可以通过访问 Theme My Login » 来自定义这些 WordPress 登录 URL.常规页面.向下滚动到"Slugs"部分以修改插件用于登录操作的这些 URL.

Theme My Login Pages

主题我的登录还允许您使用短代码创建自定义登录和注册页面.您可以简单地为每个操作创建一个页面，然后在此处添加页面 slug，以便插件可以正确查找和重定向用户.

让我们从登录页面开始.

前往Page »添加新以创建新的 WordPress 页面.接下来，您需要为页面命名，然后在内容区域内输入以下短代码"[theme-my-login]".

Adding shortcode

您现在可以发布您的页面并进行预览，以查看您的自定义登录页面的实际效果.

Custom WordPress login page

使用以下短代码重复该过程以创建其他页面.

[theme-my-login action="register"] 为注册表单.

[theme-my-login action="lostpassword"]用于丢失密码页面.

[theme-my-login action="resetpass"] 在重置密码页面使用它.

使用 WPForms 创建自定义 WordPress 登录页面

WPForms 是市场上最好的 WordPress 表单构建器插件.它允许您轻松地为您的网站创建自定义登录和注册表单.

WPForms 是一个高级 WordPress 插件，您至少需要他们的专业计划才能访问用户注册附加组件.WPBeginner 用户可以使用我们的 WPForms 优惠券代码获得 50% 的折扣:SAVE50

您需要做的第一件事是安装并激活 WPForms 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要访问WPForms »设置页面以输入您的许可证密钥.您可以在 WPForms 网站上的帐户下找到此信息.

WPForms license

输入许可证密钥后，您将能够安装附加组件.继续访问 WPForms »插件页面并找到用户注册插件.

Install user registration addon

接下来，单击"安装插件"按钮下载并激活插件.您现在可以创建自己的自定义登录表单.

前往WPForms »添加新页面并向下滚动到"用户登录表单"模板.您需要单击"创建用户登录表单"按钮才能继续.

Create login form

WPForms 将加载带有必填字段的用户登录表单.您可以单击字段以在它们周围添加您自己的描述或文本.

WPForms form builder

您也可以更改其他设置.例如，它会自动添加"提交"作为按钮标题.您可以单击它，然后将其更改为登录.

Form settings

您还可以决定用户成功登录后会发生什么.转到设置»确认标签并选择一个操作.

Redirect logged in users

您可以将用户重定向到任何其他 URL，将他们重定向到主页，或者只是向他们显示他们现在已登录的消息.

对表单设置感到满意后，单击屏幕右上角的"保存"按钮并关闭表单构建器.

将您的自定义登录表单添加到 WordPress 页面

WPForms 使在任何 WordPress 帖子或页面上添加自定义登录表单变得非常容易.

只需编辑要添加登录表单的页面或创建一个新表单.然后，在页面编辑屏幕上，将 WPForms 块添加到您的内容区域.

Adding WPForms block to a post

接下来，选择您之前创建的登录表单，WPForms 块将自动将其加载到内容区域内.

Login form preview

您现在可以继续编辑登录表单页面或保存和发布您的更改.

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

默认情况下，您的自定义 WordPress 登录表单页面将使用您主题的页面模板和样式.它将包含您主题的导航菜单、页眉、页脚和侧边栏小部件.

如果您想完全接管整个页面并从头开始设计一些东西，那么您可以使用 WordPress 页面构建器插件.

SeedProd 是 WordPress 最好的登陆页面构建器.它对初学者友好，并提供拖放构建器来帮助您创建任何类型的登录页面，包括登录页面、即将推出的页面、维护模式页面等.

在本文中，我们将使用 SeedProd Pro 版本，因为它包含登录页面模板和用于自定义的高级页面块.

还有一个免费版本的 SeedProd，但它不包括为您的 WordPress 网站创建登录页面的选项.

首先，您需要在您的网站上安装 SeedProd 插件.有关更多详细信息，您可以按照我们关于如何安装 WordPress 插件的指南进行操作.

一旦插件处于活动状态，您将被重定向到 WordPress 管理区域中的 SeedProd.

接下来，您需要输入您可以从 SeedProd 帐户轻松获取的许可证密钥.输入密钥后，单击"验证密钥"按钮.

Enter your license key

之后，您就可以在 SeedProd 中创建登录页面了.

首先，前往SeedProd »页面，然后单击"设置登录页面"按钮选择登录页面选项.

Select Login Page

在下一个屏幕上，您可以为登录页面选择模板.还可以选择使用空白模板从头开始创建页面.

但是，我们建议使用模板，因为以您想要的方式自定义登录页面更容易、更快捷.

Choose a template for your login page

当您选择模板时，将出现一个弹出窗口，为您的登录页面输入页面名称.SeedProd 将使用页面名称作为登录页面的 URL.

输入这些详细信息后，请继续并单击"保存并开始编辑页面"按钮.

Enter a Page Name and Page URL

现在，您可以使用 SeedProd 的拖拽功能编辑您的登录页面.在"设计"选项卡下放置生成器.构建器让您可以轻松地将任何页面块添加到页面中，只需将其从左侧菜单中拖动并将其放置在页面上的任何位置.

例如，您可以在登录页面、视频或新按钮中添加一些文本.高级区块部分下有更多自定义选项，您可以在其中添加倒数计时器、社交分享图标等.

它甚至可以让您删除模板中的现有页面块.您所要做的就是单击垃圾桶图标以删除页面块.

Edit your login page

接下来，如果您点击登录页面上的任何部分，您将看到更多自定义选项.

例如，您可以更改字段的文本和颜色、选择不同的字体、编辑按钮的颜色等等.

Edit the page section

如果您对登录页面的设计感到满意，请继续并单击顶部的"连接"选项卡.

您现在可以连接不同的电子邮件营销服务，例如 Constant Contact、Drip、SendinBlue 等.

Connect email marketing services

之后，您可以转到"页面设置"选项卡.在常规设置下，SeedProd 允许您编辑页面标题并将页面状态从草稿更改为发布.

您还可以选择使用 SeedProd 链接的选项并添加您的 SeedProd 附属链接以在线赚取更多收入.

General page settings

如果您想针对搜索引擎优化登录页面，请转到 SEO 设置.您可以在此处为您的页面添加 SEO 标题和描述、选择网站图标和社交媒体缩略图.

还有一个选项可以为登录页面启用无索引.通过启用此选项，您可以阻止搜索引擎在搜索结果中对您的登录页面进行索引和排名.

SEO page settings

之后，您还可以在"脚本"设置下向登录页面添加不同的代码片段.

Add scripts to your login page

现在您已经更改了页面设置，然后点击顶部的保存按钮.

接下来，您必须激活登录页面.为此，您可以退出登录页面构建器，然后转到 SeedProd »页.

之后，单击开关将页面状态从非活动更改为活动.

Make your login page active

您现在可以转到登录页面的 URL 并查看它的运行情况.

Login page preview

如果您不喜欢 WordPress 页面构建器插件，那么您可以使用自定义 CSS 来设置表单和登录页面本身的样式.或者，您也可以使用 CSS Hero 插件轻松添加自定义 CSS 样式.

您并不总是需要为您的网站创建一个完全自定义的 WordPress 登录页面.事实上，很多网站只是替换了 WordPress 徽标和徽标 URL，同时仍然使用默认登录页面.

如果您想用您自己的徽标替换登录屏幕上的 WordPress 徽标，您可以轻松使用 WordPress 插件或添加自定义代码.我们将向您展示两种方法，您可以使用最适合您的方法.

使用插件更改 WordPress 登录徽标和 URL

您需要做的第一件事是安装并激活 Colorlib 登录定制器.插入.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，该插件会向 WordPress 管理侧边栏添加一个标有"登录定制器"的新菜单项.单击它将启动登录自定义程序.

Login customizer

登录定制器将加载您的默认 WordPress 登录屏幕，左侧是定制选项，右侧是实时预览.

要将 WordPress 徽标替换为您自己的徽标，请单击右侧的"徽标选项"选项卡.从这里，您可以隐藏 WordPress 徽标、上传您自己的自定义徽标、更改徽标 URL 和文本.

Upload custom logo to login page

该插件还允许您完全自定义默认的 WordPress 登录页面.您可以添加列、背景图像、更改登录表单颜色等.

基本上，您可以在不更改默认 WordPress 登录 URL 的情况下创建自定义 WordPress 登录页面.

完成后，只需单击发布按钮即可保存更改.您现在可以访问 WordPress 登录页面以查看正在运行的自定义登录表单.

Custom WordPress login page with custom logo

无需插件(代码)即可更改 WordPress 登录徽标和 URL

此方法允许您使用自己的自定义徽标手动替换登录屏幕上的 WordPress 徽标.

首先，您需要将自定义徽标上传到媒体库.转到媒体»添加新页面并上传您的自定义徽标.

上传图片后，点击图片旁边的"编辑"链接.这将打开编辑媒体页面，您需要在其中复制文件 URL 并将其粘贴到计算机上的空白文本文件中.

接下来，您需要将以下代码添加到主题的 functions.php 文件或特定于站点的插件中.

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a,.login h1 a {
            background-image: url(https://path/to/your/custom-logo.png);
		height:100px;
		width:300px;
		background-size: 300px 100px;
		background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

不要忘记用您之前复制的文件 URL 替换 background-image URL.您还可以调整其他 CSS 属性以匹配您的自定义徽标图像.

您现在可以访问 WordPress 登录页面以查看正在使用的自定义徽标.

WordPress login page with custom logo

此代码仅替换 WordPress 徽标.它不会更改指向 WordPress.org 网站的徽标链接.

让我们改变这一点.

只需将以下代码添加到主题的 functions.php 文件或特定于站点的插件中.您可以在之前添加的代码正下方添加此代码.

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' );

不要忘记将"您的网站名称和信息"替换为您网站的实际名称.您登录屏幕上的自定义徽标现在将指向您网站的主页.

仅此而已.我们希望本文能帮助您了解为您的网站创建 WordPress 登录页面的不同方法.您可能还想查看我们的终极 WordPress 安全指南，了解有关提高 WordPress 登录安全性的提示，或者查看我们对适用于小型企业的最佳实时聊天软件的比较.

WordPress(893)自定义(72)页面(70)
♥赞6

相关文章

发表回复