WordPress标配各种类型的表单,包括登录、注册、密码保护、WordPress联系表单等。然而,这些都是简单的框,供用户选择仅填写电子邮件或密码,当然,您想要更动态的东西!
此外,运行社区支持的网站(例如 WordPress 会员网站或高级在线商店)需要您经常向用户显示登录和密码页面。由于默认的登录、注册或密码保护表单不太受欢迎,因此您应该个性化所有元素,为您的 WordPress 网站创建最佳的联系表单,以获得更好的用户体验。
在本文中,我们将讨论创建自定义 WordPress 登录、注册和密码页面的常见原因,然后提供自定义它们的解决方案。无论您是经验丰富的 WordPress 用户还是只是想涉足 WordPress 世界,我们的详细指南都将简化您的自定义表单构建体验。
为什么应该设计登录、注册和密码页面的样式
您应该自定义 WordPress 表单的原因有很多。
1.保持品牌一致性
WordPress 登录和注册页面显示 WordPress 品牌和徽标,默认链接到 WordPress.org。如果您是唯一拥有管理员访问权限的人,这很好。
但是,如果您每天都有很多会员登录您的网站,为什么不将 WordPress 的徽标替换为您的徽标,以使您的品牌获得更多曝光度呢?此外,在登录页面上使用您的徽标,可以让您的企业看起来更专业,并在您的公司品牌中创造一致性。
2. 改善用户体验
默认的 WordPress 登录页面看起来很普通而且无聊。因此,当我们说设计表单样式时,它不仅仅意味着对设计进行更改,而是在用户登录后为他们提供更好的用户体验。一旦他们登录,请确保他们登陆的页面看起来不错,并且拥有他们所需的所有信息,以改善他们的体验。
即使只是让用户在密码表单上输入密码时可以选择显示或隐藏密码,也可以改善您的用户体验,因此请确保您设计的任何表单都经过深思熟虑。
3.保护您的 WordPress 网站
自定义默认表单还可以提高 WordPress 网站的安全性。由于 WordPress 对所有网站都使用默认登录 URL https://yourdomain.com/wp-admin ,因此黑客可以轻松搜索您的登录页面,并尝试通过暴力攻击进行登录。
这就是自定义登录 URL 派上用场的地方。您可以将 /wp-admin slug 更改为更复杂的地址,以便自动脚本和黑客无法找到它。您甚至可以在登录和密码页面中应用验证码和其他安全措施来减少垃圾邮件。
4. 增强导航功能
插入导航链接或社交图标等元素可以为访问者带来额外的价值,也是推广和增强社交渠道的一种方式。
总而言之,创建自定义登录名或密码表单比您最初想象的更有价值。
使用 WPForms 插件创建自定义登录页面
现在让我们学习使用 WPForms 插件创建自定义登录页面。但在此之前,让我们先看一些鼓舞人心的示例,让我们了解如何玩这个自定义登录游戏。
鼓舞人心的 WordPress 登录页面示例
虽然有些网站定制了登录表单以匹配网站主题,但其他网站则通过炫酷的背景图像给访问者留下了深刻的印象。以下是一些出色的自定义 WordPress 登录页面的示例。
1.WPForms登录页面
WPForms 自定义登录页面使用与 WordPress 默认登录表单不同的布局。页面的左栏显示品牌徽标以及填写电子邮件地址和密码的区域,而右栏则介绍和宣传其社区。他们甚至添加了不同的号召性用语,例如在 Facebook 上引入 WPForms VIP 圈组以及“了解更多并加入”社区的按钮。
2. 麻省理工学院斯隆管理评论
与包含大量促销信息和自定义鼓舞人心背景的 WPForms 登录表单不同,MITSLoan Management Review 采用更简约的方法来处理登录表单。没有额外的 CTA 或彩色图像,而是仅显示品牌名称、电子邮件和密码字段、忘记密码的链接以及主页重定向链接。
3.迪普雷拉
如果您查看 WordPress 默认登录页面,然后看到 Diprella 的登录页面,我们确信您会说“哇”。这个自定义登录页面设计插件以 GIF 格式结合了注册和登录页面,既引人注目,又与您通常遇到的不同,因此它确实脱颖而出。
我们已经了解了 3 个流行且鼓舞人心的自定义 WordPress 登录页面示例。您现在很高兴为自己创建一个吗?
现在让我们探讨 WPForms 插件如何提供帮助。
使用 WPForms 插件创建自定义 WordPress 登录页面
WPForms 被认为是 WordPress 存储库上最受欢迎的表单构建器插件,拥有 200 万用户。该插件不仅可以让您创建联系表单,还可以创建自定义登录和注册表单。
第1步:安装WPforms插件
首先,您必须安装插件。从 WordPress 导航菜单转到插件 → 添加新插件。然后在关键字框中搜索“WPForms”。只需从此处安装并激活插件即可。
激活后,WPforms 将出现在您的 WordPress 侧栏中。您可以单击 WPforms 图标转到“设置”页面,然后输入 WPForms 网站上您的帐户下显示的许可证密钥。
第 2 步:安装用户注册表插件
由于 WPForms 主要帮助创建联系表单,因此您需要插入用户注册表插件才能在 WordPress 中构建自定义用户注册和登录表单。
首先前往导航菜单中 WPForms 下的Addons 。接下来,查找用户注册表插件并点击安装插件按钮。您现在已准备好创建自己的自定义登录表单。
第 3 步:使用 WPForms 插件创建自定义登录表单
以下指南向您展示如何轻松创建和自定义登录页面:
- 转到WPForms → 添加新项并查找用户登录表单模板。
- 将鼠标悬停在模板上,然后单击“创建用户登录表单”按钮。
- 选择要添加到表单的额外字段以及必填字段。
步骤 4:将自定义登录表单插入 WordPress 页面
在自定义表单之前,您需要将表单嵌入到登录页面。为此,只需从编辑屏幕将 WPForms 块添加到您的页面,然后选择您刚刚创建的表单即可。
除非您使用页面构建器创建自定义页面布局,否则 WPForms 将默认使用主题的页面模板和样式。使用页面构建器,您可以添加背景图像、徽标和用于显示文本的列。
自定义登录标志
要显示品牌徽标并更改登录页面 URL,请执行以下 5 个步骤:
前往 WordPress 仪表板外观下的编辑器
在样式表下选择您的主题函数 (functions.php) 文件
将此代码放入functions.php 文件中
12345678910111213功能 wpb_login_logo ( ) { ? > <style type ="text/css"> #login h1 a, .login h1 a {背景图像: url ( http : //path/to/your/custom-logo.png ) ;高度: 100 像素;宽度: 300 像素;背景大小: 300像素 100 像素;背景重复: 不重复;填充底部: 10 像素; } </风格> < ? php }添加动作( 'login_enqueue_scripts' , 'wpb_login_logo' ) ;
将背景图像 URL替换为您想要的图像 URL
将以下代码添加到您的functions.php 文件中。尽管您使用上面的代码修改了徽标,但它仍然链接到 WordPress 网站。以下代码有助于将 WordPress 网站 URL 替换为您的网站 URL
123456789功能 wpb_login_logo_url ( ) {返回 home_url ( ) ; }添加过滤器( 'login_headerurl' , 'wpb_login_logo_url' ) ;功能 wpb_login_logo_url_title ( ) {返回 “您的网站名称和信息” ; }添加过滤器( '登录标题' , 'wpb_login_logo_url_title' ) ;
将“您的网站名称和信息”更改为您的网站品牌名称。
WordPress 中的用户注册页面样式
注册页面用于将用户信息保存在数据库中以供将来访问。您可以收集有关目标受众的有用信息,例如他们的兴趣或社交媒体资料。
WordPress提供的内置注册页面没有吸引人的功能,因此有必要升级该页面。
如何使用 Ultimate Member 插件自定义 WordPress 注册页面
Ultimate Member提供了一个很好的解决方案,可以使用简单的拖放构建器创建前端用户注册页面。此功能使您能够控制页面的外观以及页面上呈现的元素。
安装并激活后,该插件将直接嵌入您的 WordPress 管理侧边栏。单击“终极会员”图标→“表单”开始使用该插件。
除了用户名、电子邮件地址和密码等基本字段外,Ultimate Member 中的默认注册表单还提供许多其他字段。只需单击表单底部的加号,您将看到一个字段管理器,您可以在其中选择其他字段。
每个选项旁边的铅笔图标允许您调整名称。您还可以使用插件的拖放构建器对表单进行更改,甚至可以添加背景图像或插入文本框。
请记住点击“更新”按钮以保存更改并启用表格。
自定义 WordPress 密码保护页面
如前所述,自定义密码保护页面的设计也可以改善用户体验。您只需要几行代码即可完成此操作。
如果您使用密码保护 WordPress Pro插件来锁定您的内容,受保护页面或帖子的默认密码形式如下:
很明显,密码形式并不引人注目。因此,是时候采取行动并通过自定义密码来最大限度地发挥密码的优势了。自定义表单必须执行两个主要步骤:
第 1 步:转到您的(子)主题文件夹并打开functions.php 文件。
步骤2:将以下代码片段添加到文件内容的底部。必须包含红线,这样我们的插件功能才能正常工作。
1234567891011121314151617181920212223 add_filter ( 'ppw_custom_entire_site_login_form' , '自定义登录表单' ) ;功能 自定义登录表单( ) {返回 ' <div class="pda-form-login"> <!–自定义自己的logo–> <h1><a></a></h1> <!–参数action=ppw_postpass绕过缓存–> -> <!–参数error_password=true 显示密码错误消息–> <form action="?action=ppw_postpass&wrong_password=true" method="post"> <label for="">密码</label> <! — 必需的输入标签,名称为“input_wp_protect_password”–> <input class="input_wp_protect_password" type="password" id="input_wp_protect_password" name="input_wp_protect_password"> <!– 在此自定义您的错误消息 –> < p id =“ppw_entire_site_wrong_password”类=“ppw_entire_site_password_error”>' 。 esc_html__ ( 应用过滤器( PPW_Pro_Constants :: HOOK_CUSTOM_MESSAGE_WRONG_PASSWORD_ENTIRE_SITE , _ '请输入正确的密码!' ) , '密码保护页面' ) 。 '</p> <input type="submit" class="button button-primary button-login" value="Login"> </form> <!– 在此处添加您的条款和条件或自定义声明 –> </div > ' ; }
显示和隐藏密码
显示和隐藏密码选项可以为用户创造更好的用户体验,因为他们可以检查输入密码时是否犯了错误。
要创建允许用户显示密码的复选框,请向 Password Protect WordPress Pro 插件提供的ppwp_customize_password_form挂钩添加几行代码。
自定义密码错误错误消息
默认情况下,该插件不允许您显示密码错误的错误消息。为了显示和更改此消息,请将以下代码添加到您的functions.php 文件中
123456 <?php add_filter ( “ppwp_text_for_entering_wrong_password” , “自定义消息” ) ;功能 自定义消息( $消息 ) {返回 '<div class="your_class">您的消息</div>' ; } ?>
准备好创建自定义 WordPress 表单了吗?
自定义登录、注册和密码表单可以显着提高您的品牌曝光度,增强网站安全性并增强网站导航。如果它有这么多好处,为什么要使用默认的 WordPress 登录表单呢?
您对如何创建自定义登录表单、注册表单或密码表单还有其他疑问吗?发表评论让我们知道,或者您可以发送电子邮件至 [email protected]!
RSS