在WordPress中创建自定义登录,注册和密码页面

WordPress标配各种类型的表单,包括登录,注册,密码保护和联系表单等。但是,这些是简单的对话框,用户可以选择仅填写电子邮件或密码,当然,您需要更动态的表单!

此外,要运行由社区支持的网站(如WordPress会员网站或高级在线商店),您需要经常向用户显示登录名和密码页面。由于不欢迎使用默认的登录,注册或密码保护表单,因此您应该个性化表单中的所有元素,以创造更好的用户体验。

在本文中,我们将讨论创建自定义WordPress登录,注册和密码页面的常见原因,然后提供自定义页面的解决方案。无论您是经验丰富的WordPress用户,还是只是想在WordPress世界中放纵脚步,我们的详细指南都将简化您的自定义表单构建体验。

为什么要设置登录页面,注册页面和密码页面的样式

为什么要自定义WordPress表单有很多原因。

保持品牌一致性

WordPress登录和注册页面显示WordPress品牌和徽标,默认情况下会链接到WordPress.org。如果您是唯一拥有管理员权限的人,那就很好。

但是,如果每天都有很多成员登录您的网站,为什么不用WordPress徽标代替徽标来增加品牌知名度呢?此外,通过在登录页面上显示徽标,它可以使您的企业看起来更专业,并在公司品牌中保持一致性。

改善的用户体验

默认的WordPress登录页面看起来很普通而且很无聊。因此,当我们说为表单设置样式时,这不仅意味着仅更改设计,还为用户登录后提供了更好的用户体验。登录后,请确保他们进入的页面看起来不错并具有他们需要的所有信息,以改善他们的体验。

甚至只要给用户提供在密码表单上键入密码时显示或隐藏密码的选项,就可以改善您的用户体验,因此请确保您正在设计的表单都经过深思熟虑。

保护您的WordPress网站

自定义默认表单还可以提高您网站的安全性。由于WordPress对所有网站都使用默认的登录URL https://yourdomain.com/wp-admin,因此黑客可以轻松地搜索您的登录页面,并尝试登录蛮力攻击。

这是自定义登录URL派上用场的地方。您可以将/ wp-admin条目更改为更复杂的地址,以使自动脚本和黑客无法找到它。您甚至可以在登录名和密码页面中应用验证码和其他安全措施,以减少垃圾邮件。

增强导航

插入诸如导航链接或社交图标之类的元素可以为访问者带来额外的价值,以及一种促进和增进社交渠道的方式。

因此,总而言之,创建自定义登录名或密码表单的价值比您最初想象的要大。

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

现在,让我们学习使用WPForms插件创建自定义登录页面。但是在我们这样做之前,让我们先看一些鼓舞人心的示例,以使我们了解如何玩此自定义登录游戏。

启发WordPress登录页面的示例

有些网站会根据网站主题调整其登录表单,而另一些网站则以酷炫的背景图像打动访客。以下是出色的自定义WordPress登录页面的一些示例。

WPForms登录页面

WPForms自定义登录页面使用与WordPress默认登录表单不同的布局。页面的左列显示品牌徽标以及用于填写电子邮件地址和密码的区域,而右列则介绍和促进其社区。他们甚至添加了不同的号召性用语,例如在Facebook上引入WPForms VIP圈子组,以及“了解更多并加入”社区的按钮。

MITS贷款管理评论

与WPForms登录表单包含大量促销信息和自定义鼓舞人心的背景不同,MITSLoan Management Review对登录表单采取了更为最小的方法。没有多余的CTA或彩色图像,而是仅显示品牌名称,电子邮件和密码字段,忘记密码链接和首页重定向链接。

银耳藻

如果您查看WordPress的默认登录页面,然后遇到Diprella的页面,我们确定您会说“哇”。这个自定义的登录页面以GIF格式结合了登录页面和登录页面,不仅引人注目而且与您通常遇到的内容有所不同,因此它确实引人注目。

我们介绍了3个流行且启发性的自定义WordPress登录页面示例。您现在为自己创建一个感到兴奋吗?

现在,让我们探索WPForms插件如何提供帮助。

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

WPForms被认为是WordPress资料库上最流行的表单生成器插件,已有200万用户。该插件使您不仅可以创建联系表单,还可以创建自定义登录和注册表单。

步骤1:安装WPforms插件

首先,您必须安装插件。从WordPress导航菜单转到Plugin→Add New。然后在“关键字”框中搜索“ WPForms”。只需从这里安装并激活插件即可。

一旦激活,WPforms将出现在您的WordPress侧边栏中。您可以单击WPforms图标以转到“设置”页面,然后输入显示在WPForms网站上您的帐户下方的许可证密钥。

步骤2:安装用户注册表格插件

由于WPForms主要帮助创建联系表单,因此您需要插入User Registration Forms插件,以便在WordPress中构建自定义用户注册和登录表单。

首先转到导航菜单中WPForms下的Addons。接下来,查找“用户注册表单”插件,然后单击“安装插件”按钮。现在,您可以创建自己的自定义登录表单了。

步骤3:使用WPForms插件创建自定义登录表单

以下指南向您展示如何轻松创建和自定义登录页面:

  1. 转到WPForms→添加新项,然后查找用户登录表单模板。
  2. 将鼠标悬停在模板上,然后单击“创建用户登录表单”按钮。
  3. 选择要添加到表单的其他字段以及必填字段。

步骤4:将自定义登录表单插入WordPress页面

您需要在自定义表单之前将其嵌入登录页面。为此,只需在编辑屏幕上将WPForms块添加到页面中,然后选择刚创建的表单即可。

除非您使用页面构建器来创建自定义页面布局,否则WPForms将默认使用主题的页面模板和样式。使用页面构建器,您可以添加背景图像,徽标和列以显示文本。

自定义登录徽标

要显示品牌徽标并更改登录页面URL,请执行以下5个步骤:

前往WordPress仪表板中外观下的编辑器

在样式表下选择您的主题函数(functions.php)文件

将此代码放置在functions.php文件中

函数wpb_login_logo(){?>

<?php}
add_action('login_enqueue_scripts','wpb_login_logo');

将背景图片网址替换为所需的图片网址

将以下代码添加到您的functions.php文件中。尽管您使用上面的代码修改了徽标,但它仍链接到WordPress网站。以下代码有助于将WordPress网站网址替换为您的网站网址

函数wpb_login_logo_url(){
返回home_url();
}
add_filter('login_headerurl','wpb_login_logo_url');

函数wpb_login_logo_url_title(){
返回“您的网站名称和信息”;
}
add_filter('login_headertitle','wpb_login_logo_url_title');

将“您的网站名称和信息”更改为您的网站品牌名称。

WordPress中的样式用户注册页面

注册页面用于将用户信息保存在数据库中,以供将来访问。您可以收集有关目标受众的有用信息,例如他们的兴趣或社交媒体资料。

WordPress提供的内置注册页面没有吸引人的功能,因此有必要升级此页面。

如何使用Ultimate Member插件自定义WordPress注册页面

Ultimate Member提供了一个出色的解决方案,可以使用简单的拖放生成器来创建前端用户注册页面。此功能使您可以控制页面的外观以及页面上显示的元素。

安装和激活后,该插件将直接嵌入到您的WordPress管理侧边栏中。单击Ultimate Member图标→Forms以开始使用该插件。

除了用户名,电子邮件地址和密码等必填字段外,Ultimate Member中的“默认注册”表单还提供了许多其他字段。只需单击表单底部的加号,您将看到一个字段管理器,您可以在其中选择其他字段。

每个选项旁边的铅笔图标可让您调整名称。您也可以使用插件的拖放生成器在表单上进行更改,甚至可以添加背景图片或插入文本框。

切记点击“更新”按钮以保存您的更改并生效。

自定义WordPress密码保护页面

如前所述,定制受密码保护的页面的设计也可以改善用户体验。您只需要执行几行代码即可。

如果您使用的是Password Protect WordPress Pro插件来锁定内容,则以下是受保护页面或帖子的默认密码形式:

很明显,密码表并非引人注目。因此,是时候采取行动并通过自定义密码来最大程度地利用密码了。自定义表单必须执行两个主要步骤:

步骤1:转到您的(子)主题文件夹,然后打开functions.php文件。

步骤2:将以下代码段添加到文件内容的底部。必须包括红线,以便我们的插件功能正常运行。

add_filter('ppw_custom_entire_site_login_form','custom_login_form');
函数custom_login_form(){
返回'

';
}

显示和隐藏密码

“显示和隐藏密码”选项为您的用户创造了更好的用户体验,因为他们可以检查输入密码时是否出错。

要创建一个允许用户显示密码的复选框,请在Password Protect WordPress Pro插件提供的ppwp_customize_password_form挂钩中添加几行代码。

自定义错误的密码错误消息

默认情况下,该插件不允许您显示错误的密码错误消息。为了显示和更改此消息,请将以下代码添加到您的functions.php文件中

<?php
add_filter(“ ppwp_text_for_entering_wrong_password”,“ custom_message”);
函数custom_message($ message){
返回'

你的信息

';
}
?>

准备创建自定义WordPress表单了吗?

自定义登录名,注册名和密码表可以使您的品牌获得显着的知名度,增强站点安全性,并增强站点导航。如果有这么多好处,为什么还要使用默认的WordPress登录表单?

您还有其他关于如何创建自定义登录表单,注册表单或密码表单的问题吗?发表评论以告知我们,或者您可以通过admin@wpblog.com向我们发送电子邮件!

WordPress中的“创建自定义登录,注册和密码页面”一文首先出现在WPblog上。

相关文章