定制前端和后端登录WordPress

是否希望您的用户从网站的前端或后端登录,WordPress允许您完全自定义两者的体验.

偶尔,在构建WordPress网站时,您可能会认为内置登录页面并不完全满足您的需求.有时,您可能希望嵌入到您网站的前端中的登录表格.其他时候,您可能需要使用默认的/wp-login.php 页面不可用的功能.

我们之前看过如何完全自定义WordPress登录页面,探索将其合并到您网站的品牌中的方法.在这篇文章中,我们将通过更实际的例子来看,如何扩展该帖子中提供的一些功能.

本帖子看前端并在两个部分中后端登录自定义.在第一部分中,我将解释如何从站点前端处理登录过程.我们将看看如何:

  • 将登录表格包含到帖子和小部件
  • 在成功登录时重定向用户
  • 设置自定义登录页面
  • 有条件地显示菜单中的登录/注销链接

请注意,我们将浏览登录任务,让WordPress在失败的登录名,密码重置,用户注册和数据编辑时进行重定向.所有这些任务都应该仔细关注,并将为我们提供更多潜入和探索未来.

在本帖子的第二部分,我将向您展示如何为内置登录页面添加更大的功能.我们要去:

  • 自定义登录页面标题的HTML结构
  • 从内置登录页面获取最大的名录页面

我们还将查看几个例子来认识到可用于处理登录过程的功能,操作和过滤器.我假设你熟悉动作和过滤挂钩后面的关键概念.如果您没有,在进行此帖子之前,请花时间读取快速(和深入)指南的WordPress钩.

让我们开始潜入登录自定义.

The WordPress backend login form. wordpress后端登录表单.

继续读取,或使用以下链接跳转:

  • 在帖子和文本小部件中包括登录表格
  • 将用户重定向登录
  • 设置自定义登录页面
  • 以编程方式添加登录和注销菜单项
  • 自定义登录头
  • 让您的用户选择重定向URL
  • 我们在这里形成你

包括帖子和文本小部件中的登录表单

在设计新网站的用户流时,您可能希望在网站前端显示登录表格.由于wp_login_form函数,您可以实现这一目标,函数(或返回)简单的登录表单(检查WordPress Codex以获取详细信息).

此函数包含一个参数数组,其值设置登录,ID,标签和表单元素的默认值后重定向的URL.

在以下示例中,我们将创建一个简单的短代码,这将使网站作者能够将登录表格嵌入到网站中的任何位置:

在上面的代码中,我们已经将echo的值设置为false,以便该函数不会打印表单的HTML,但将返回标记为$output变量的值.回调函数返回相同的值.

如果用户已登录,则该函数返回消息,并且注销链接(后者由wp_loginout函数返回).

现在,让我们创建一个新的帖子(或页面),并包括 [Frontend-Login-Form] 短代码.结果,我们将获得下面的图像中显示的登录表单.

wp login form 图像显示登录表单嵌入到常规帖子

我们也可以在侧栏中包含表单,但首先,我们必须强制WordPress来处理文本小部件中的短路.可以使用widget_text过滤器和do_shortcode函数来完成此任务,因为我们已经在上面的代码中完成了.

shortcode widget shortcode widget 一旦我们在文本窗口小部件中启用了短代码处理,就可以包括登录表单进入任何侧栏

在登录时重定向用户

在前面的示例中,一旦登录用户被重定向到他/她来自的同一页面,无论他们的角色如何.但是,我们可以根据其角色或功能来将用户重定向到特定的页面.

例如,我们可能希望防止站点订阅者访问管理区域,同时重定向到属于其他角色的所有用户的仪表板.我们可以使用login_redirect滤波器挂钩来完成此操作.

考虑以下代码:

这是完全不言自明的:login_redirect过滤资源的URL,用户应该重定向到成功登录.在我们的示例中,如果用户具有edit_posts(所有角色但订阅者)的能力,则用户将被重定向到仪表板.如果用户没有,它们将被重定向到站点主页.

设置自定义登录页面

如果我们创建了一个新的自定义登录页面,我们可能还希望覆盖默认的登录URL.为此,我们可以使用login_url过滤器,如以下代码所示:

在此处,我们调用了add_query_arg函数,我们已经将查询参数redirect_toreauth附加到URL.最终由回调函数返回相同的URL.

以编程方式添加登录和注销菜单项

现在我们有一个新的登录网址,我们可以从我们的脚本以编程方式构建相应的链接.在下一个示例中,我将向您展示如何将登录名和注销链接附加到主菜单.

在插件的主文件(或在子主题的函数.hphp 文件)复制并粘贴以下代码块:

加载GIST E03608DE3795D952E86B43BA3E6393E4

过滤器允许我们将新项目附加到菜单.通过设置特定主题位置,我们的自定义将仅影响一个自定义菜单.如果用户已登录,则回调函数将自动追加注销URL,否则,它将附加登录URL.

到目前为止,我们已经看到了如何从前端登录用户.尽管如此,我们希望在自己的默认页面上保持登录.因此,在以下示例中,我们将看到如何利用我们可以使用的许多功能,操作和过滤器中的一些,以便自定义页面结构并将功能添加到登录表单.

自定义登录头

默认WordPress登录页面的标题如下所示:

加载GIST 8B5F0335631E213D4FC0E80A5ACEB08F

它只是一个h1元素,其中锚点指向wordpress.org.由于三个挂钩,一个动作(login_head)和两个过滤器(login_headerurllogin_headertitle),我们可以采取行动.以以下代码为例:

加载GIST E8D0CC07095E005869D5CFEFB6D4E8D4

  • login_head在脚本排队后触发触发,我们可以将此操作挂钩函数以延长自定义脚本和样式.在我们的示例中,我们添加了单个声明,以更改标题中锚的背景图像
  • login_headerurl过滤标题徽标的链接URL.在我们的示例中,回调函数返回Home URL
  • login_headertitle过滤标题属性

这只是一个基本示例,旨在展示如何派往如何派上自定义登录体验的操作和过滤器.如果您需要更多对登录页面演示文稿的控制,请花点时间阅读如何完全自定义WordPress登录页面.然后,如果要为内置登录表单添加更多功能,请阅读我们上次和更高级示例...

让您的用户选择重定向URL

是时候让用户更多地控制登录过程.在这个最后一个例子中,我们将使他们能够选择要重定向的页面的URL.

首先,我们将使用以下功能添加新字段到登录表单:

加载GIST F35AC7EF05C130C89530316098369737

login_form在登录表单中的"密码"字段之后的动作触发,然后在'记住我'复选框,因此回调函数打印选择菜单在那种精确的位置.

在其位置,我们可以使用以下代码将其与以下代码(

)进行操作
加载GIST 1DF1831B0EF284BC62168FBD0D74D0C6

此处,我们检查是否已发送选择字段的有效值.如果是,则交换机语句根据用户选择的选项设置$redirect_to变量的值.

custom login form 自定义登录表单

用户现在将被重定向到他们选择的页面.

我们在这里以形式为您

让用户登录的另一种方式是我们自己的自由插件,frominator.

Frominator.大眼镜和所有.

在他的帮助下,在WordPress网站上设置注册和登录表单很容易.您有大量的定制选项;如所需信息的字段,CAPTCHA,记住我的设置等等.它是一个受欢迎的4.5星级额定插件,是有原因的.

您可以阅读如何设置登录表单并免费尝试他.

包装

登录过程是网站用户流的重要组成部分,我们作为网络设计师应该花时间考虑用户体验.我们是否决定允许用户从站点前端登录或保留默认后端登录表单,我们可以根据呈现和功能来自定义所有选项.

WordPress提供自定义的权力-这取决于我们利用它们.

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论