如何构建定制的 WordPress 登录页面

已发表: 2018-04-11

啊,是的,WordPress 登录页面——WordPress 中最知名的页面之一——不是吗?

默认登录wordpress

但与此同时,在您的 WordPress 网站上以默认形式拥有此页面并不总是最好的主意。

为什么? - 你问。

这是答案:

为什么需要定制的 WordPress 登录页面?

这个问题有三个方面:

  1. 交通。 您获得的流量越多,您获得的直接结果就越“糟糕”的流量。 我所说的不良流量是指恶意脚本和机器人、垃圾邮件发送者以及各种怀着恶意访问您网站的用户。 自定义您的 WordPress 登录页面可以使您的网站更加安全。
  2. 多用户站点。 如果您的网站由多个人管理——无论是管理员还是作者/博主——将发生多次登录。 提供自定义登录表单将使整个过程更加愉快。
  3. 品牌。 默认登录页面很好,但中间有一个大的 WordPress 标志。 切换它并使登录页面看起来更像您自己的页面可能是一个很好的品牌接触。 如果您正在为客户构建网站,这一点尤其有效。 为您的客户提供一致的体验肯定是他们会喜欢的。

如果上述任何一项听起来对您来说很有吸引力,您应该考虑将您的登录页面切换到自定义页面。 这是如何做:

如何创建定制的 WordPress 登录页面

您可以通过两种主要方式进行操作:

  • 手动方式,
  • 插件方式。

两种方式各有利弊。 手动方式使您可以更好地控制最终页面的外观。 插件方式更容易遵循,特别是如果您没有任何编码技能,但您必须确定插件允许您做什么。

让我们同时涵盖两者。

手动创建自定义登录页面

尽管这需要您调整一些主题的源文件,但这并不难。 我将在这里使用二十五岁作为我的例子。

乐趣从创建page.php文件和content-page.php文件的副本开始。

将这些新副本分别重命名为page-login.phpcontent-login.php

打开page-login.php并只更改一行。 由此:

 get_template_part( 'content', 'page' );

对此:

 get_template_part( 'content', 'login' );

现在,让我们编辑content-login.php并在<?php the_content(); ?>正下方添加一行<?php the_content(); ?> . 像这样:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

笔记。 在这个阶段,如果您愿意,您可以执行一系列其他自定义(例如调整设计/布局、删除侧边栏),但这都是可选的。 如果您要使用新的 WordPress 登录页面采用极简的方法,只需更改这两行即可。

现在,让我们在wp-admin中创建一个新页面,并简单地将其称为“登录”。 确保永久链接也是“登录”:

登录页面

这样做将确保 WordPress 自动使用您的page-login.php模板文件。

如果您现在访问新页面,它应该看起来像这样:

新的登录页面

在这个阶段,唯一剩下要做的就是设置重定向,最终消除 WordPress 的默认登录页面。 通过将这些行放在functions.php文件的末尾来做到这一点:

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(基于:[1][2] 构建的代码片段。)

现在,唯一可访问的登录页面是您创建的新页面。 这里的好处是您可以通过 WordPress 的默认页面编辑器自由编辑它(就像您编辑任何其他页面一样)。

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

这种方法的工作方式有点不同,因为我们实际上是在修改默认登录页面,而不是创建一个全新的登录页面。

首先,我们将要使用的插件是:Custom Login Page Customizer。

自定义登录页面定制器

安装并激活后,只需转到外观 > 登录定制器,您可以在其中启动定制器面板。

该插件的选项非常好,它们允许您调整以下内容:

  • 设置要显示的徽标而不是默认的 WordPress 徽标。
  • 为整个登录页面设置背景。
  • 为表单本身设置背景。
  • 调整表单的样式和有关它的每一个小细节(字体、大小、颜色、字段)。
  • 安装安全插件以在表单中获取额外的验证码字段(非常适合防止垃圾邮件登录/机器人)。

例如,只需使用插件几分钟,我就得到了这个结果:

登录演示

另一个插件选项

另一个值得一看的自定义登录页面插件是:登录设计器。 该插件旨在使自定义 WordPress 登录页面变得超级容易,同时仍为您提供设计灵活性。

它实现易用性的一种方法是使定制过程变得熟悉。 所有选项和工具都直接集成到 WordPress 定制器中。 因此,如果您习惯于使用定制器来更改主题选项,您会感到宾至如归。

查看此视频以了解该插件的工作原理。

手动还是通过插件

你选择的方法是什么? 您更喜欢手动编写代码还是让所有内容都由插件处理? 随意分享。