建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

为 WordPress 自定义前端和后端登录

GG网络技术分享 2025-03-18 16:07 25


无论您希望用户从网站的前端还是后端登录,WordPress 都允许您完全自定义两者的体验。

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

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

这篇文章分两个部分介绍前端和后端登录自定义。 在第一部分中,我将解释如何从站点前端处理登录过程。 我们将看看如何:

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

请注意,我们将仅探索登录任务,让 WordPress 处理登录失败、密码重置、用户注册和数据编辑时的重定向。 所有这些任务都值得认真关注,并将在未来为我们提供更多深入和探索的机会。

在本文的第二部分,我将向您展示如何为内置登录页面添加更多功能。 我们要:

  • 自定义登录页面头部的 HTML 结构
  • 充分利用带有附加表单字段的内置登录页面

我们还将查看几个示例,让您熟悉可用于处理登录过程的函数、操作和过滤器。 我假设您熟悉动作和过滤钩子背后的关键概念。 如果你不是,在阅读这篇文章之前,请花点时间阅读 WordPress Hooks 的快速(和深入)指南。

让我们开始深入了解登录自定义。

WordPress 后端登录表单。
WordPress 后端登录表单。

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

  • 在帖子和文本小部件中包含登录表单
  • 在登录时重定向用户
  • 设置自定义登录页面
  • 以编程方式添加登录和注销菜单项
  • 自定义登录标题
  • 让您的用户选择重定向 URL
  • 我们在这里为您提供信息

在帖子和文本小部件中包含登录表单

在为新网站设计用户流程时,您可能希望在网站的前端显示登录表单。 您可以实现这一目标,这要归功于 wp_login_form 函数,它回显(或返回)一个简单的登录表单(有关详细信息,请查看 WordPress Codex)。

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

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

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

如果用户已经登录,该函数会返回一条消息和注销链接(后者由 wp_loginout 功能)。

现在,让我们创建一个新帖子(或页面)并包含 [frontend-login-form] 短代码。 结果,我们将获得下图所示的登录表单。

wp登录表单
该图显示了嵌入到常规帖子中的登录表单

我们也可以将表单包含在侧边栏中,但首先,我们必须强制 WordPress 处理文本小部件中的短代码。 此任务可以使用 widget_text 过滤器和 do_shortcode 正如我们在上面的代码中已经完成的那样。

简码小部件
一旦我们在文本小部件中启用了短代码处理,登录表单就可以包含在任何侧边栏中

在登录时重定向用户

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

例如,我们可能希望阻止站点订阅者访问管理区域,同时将属于其他角色的所有用户重定向到仪表板。 我们可以使用 login_redirect 过滤钩。

考虑以下代码:

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

设置自定义登录页面

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

在这里,我们调用 add_query_arg 函数,我们附加了查询参数 redirect_toreauth 到网址。 回调函数最终返回相同的 URL。

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

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

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

加载要点 e03608de3795d952e86b43ba3e6393e4

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

到目前为止,我们已经了解了如何从前端登录用户。 尽管如此,我们可能更愿意将登录保留在其自己的默认页面上。 因此,在下面的示例中,我们将看到如何利用我们可以用来自定义页面结构并向登录表单添加功能的许多功能、操作和过滤器中的一些。

自定义登录标题

默认 WordPress 登录页面的标题结构如下:

加载要点 8b5f0335631e213d4fc0e80a5aceb08f

这只是一个 h1 带有指向 WordPress.org 的锚点的元素。 我们可以对这个结构采取行动,这要归功于三个钩子,一个动作(login_head) 和两个过滤器 (login_headerurllogin_headertitle)。 以下面的代码为例:

加载要点 e8d0cc07095e0e5869d5cfefb6d4e8d4
  • login_head 脚本入队后触发动作,我们可以在这个动作上挂接一个函数来入队自定义脚本和样式。 在我们的示例中,我们添加了一个声明来更改标题中锚点的背景图像
  • login_headerurl 过滤头部标志的链接 URL。 在我们的示例中,回调函数返回主页 URL
  • login_headertitle 过滤标题属性

这只是一个基本示例,旨在演示操作和过滤器如何方便地自定义登录体验。 如果您需要更多地控制登录页面的显示,请花点时间阅读如何完全自定义 WordPress 登录页面。 然后,如果您想为内置登录表单添加更多功能,请阅读我们最后一个更高级的示例……

让您的用户选择重定向 URL

是时候让我们的用户更好地控制登录过程了。 在最后一个示例中,我们将让他们能够选择要重定向到的页面的 URL。

首先,我们将使用以下函数向登录表单添加一个新字段:

加载要点 f35ac7ef05c130c89530316098369737

login_form 动作触发后 '密码' 登录表单中的字段和前面的 '记得我' 复选框,因此回调函数会在该精确位置打印选择菜单。

使用表单字段,我们可以使用以下代码将其付诸实践:

加载要点 1df1831b0ef284bc62168fbd0d74d0c6

在这里,我们正在检查是否发送了选择字段的有效值。 如果是,则 switch 语句为 $redirect_to 变量取决于用户选择的选项。

自定义登录表单
自定义登录表单

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

我们在这里为您提供信息

让用户登录的另一种方式是使用我们自己的免费插件 Forminator。

形成者形象。
形成者。 大眼镜什么的。

在他的帮助下,您可以轻松地在您的 WordPress 网站上设置注册和登录表单。 您有大量的自定义选项; 例如所需信息的字段、验证码、记住我的设置等。 这是一个受欢迎的 4.5 星评级插件是有原因的。

您可以阅读如何设置登录表单并立即免费试用。

包起来

登录过程是网站用户流程的重要组成部分,我们作为网页设计师应该花时间考虑用户体验。 无论我们决定允许用户从站点前端登录还是保留默认的后端登录表单,我们都可以自定义所有选项,包括显示和功能。

WordPress 提供了定制的能力——我们要充分利用它们。

标签:

标签: WordPress op

提交需求或反馈

Demand feedback