跳至正文

如何构建完全自定义的 WordPress 登录页面

如何构建完全自定义的 WordPress 登录页面

我相信你们中的许多人都熟悉 WordPress 登录页面wp-login.php它看起来不错,而且工作正常。但是当涉及到为客户创建网站时,您可能需要一个更个性化的登录页面,以便它与整个网站设计很好地集成。此外,拥有自定义登录页面还可以让您的客户对您的技能产生良好印象。

如果这是您想在您的网站上实现的目标,可以按照以下方法构建完全自定义的 WordPress 登录页面。

适合初学者的 WordPress 条件标签和代码段

适合初学者的 WordPress 条件标签和代码段


WordPress 最好的功能之一可能是条件标签。
它允许你告诉代码……
阅读更多

自定义登录页面

首先,我们需要为登录页面创建一个自定义页面模板。为此,您可以创建一个新的页面模板并将其命名——例如—— page-login.php然后,从 WordPress 后端创建一个新页面,并将永久链接设置为,login以便 WordPress 自动采用page-login.php该页面的模板。

自定义页面模板

登录表单

wp_login_form标签放在页面模板中page-login.php以显示登录表单。

1个
<?php wp_login_form(); ?>

以下是可选的,但在某些情况下可能会有用。您可以为登录表单配置一些内容,例如指定用户成功登录后的 URL 重定向、更改用户名的 ID 和密码输入字段。

1个
2个
3个
4个
5个
6个
7
8个
<?php
$args = array(
    'redirect' => home_url(),
    'id_username' => 'user',
    'id_password' => 'pass',
   )
;?>
<?php wp_login_form( $args ); ?>

此外,您还可以在旁边添加一些东西。例如,它可以是您的徽标和您网站的一些描述。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
<div class="login-branding">
  <a href="#" class="login-logo">Hongkiat.com</a>
  <p class="login-desc">
    Hongkiat.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks.
  </p>
</div>
<div class="login-form">
<?php
$args = array(
    'redirect' => home_url(),
    'id_username' => 'user',
    'id_password' => 'pass',
   )
;?>
<?php wp_login_form( $args ); ?>
</div>

现在,让我们用 CSS 使表单更美观。您可以根据您的网站要求自行制作 CSS。在此示例中,这是我的登录表单的样子。它有黑色背景,蓝色按钮,非常适合 Hongkiat.com 网站主题。

CSS 样式

验证

此时,登录页面已经可以使用了。我们可以尝试登录,如果成功,我们将被重定向到我们在上面的参数中指定的 URL redirect但是,我们需要解决一些问题。

首先,该wp-login.php页面仍然可以访问。最好重定向wp-login.php到我们的新登录页面,以便为我们的客户提供统一的体验。

为此,您可以在functions.php主题中添加以下代码。

1个
2个
3个
4个
5个
6个
7
8个
9
10
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');

请记住将$login_page变量更改为您自己的登录页面(感谢 Montana Flynn 提供的提示)

其次,当我们成功登录时,登录页面可以正常工作。但是如果出现错误,例如提交无效的用户和密码组合,或者提交一个空字段,我们也会被扔到wp-login.php. 要解决此问题,请在functions.php.

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
function login_failed() {
  $login_page  = home_url( '/login/' );
  wp_redirect( $login_page . '?login=failed' );
  exit;
}
add_action( 'wp_login_failed', 'login_failed' );
 
function verify_username_password( $user, $username, $password ) {
  $login_page  = home_url( '/login/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

这两个函数执行两个任务。他们将在失败时重定向用户,并将login查询字符串附加到 URL,其值为failedempty

请求参数

最后一个问题是我们也将被重定向到wp-login.php我们从站点注销时。因此,我们还需要在注销时指定重定向 URL,就像这样。

1个
2个
3个
4个
5个
6个
function logout_page() {
  $login_page  = home_url( '/login/' );
  wp_redirect( $login_page . "?login=false" );
  exit;
}
add_action('wp_logout','logout_page');

错误信息

我们将显示一条错误消息,向用户显示错误发生的时间,以及他们使用我们放入 URL 中的查询字符串注销的时间。要从上面的登录查询字符串中获取值,我们可以使用$_GET.

将此代码放在登录页面模板中。

1个
$login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;

上面的代码将检查login变量是否包含值,否则将设置为0然后我们会根据 的值显示不同的通知消息$error,像这样。

1个
2个
3个
4个
5个
6个
7
if ( $login === "failed" ) {
  echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
} elseif ( $login === "empty" ) {
  echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
} elseif ( $login === "false" ) {
  echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
}

下面是错误消息的样子。

错误信息

结论

我们可以做几件事来改进我们的登录页面,例如添加丢失密码链接注册链接个性化的错误消息但是,此时它已经可以很好地让我们的用户登录和注销,这也是创建更高级登录页面的良好开端。

我们希望您觉得本教程有用。

标签: