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

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

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

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

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

自定义登录页面

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

登录表单

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

<?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 ); ?>

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

<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 网站主题。

验证

此时，登录页面已经可以使用了。我们可以尝试登录，如果成功，我们将被重定向到我们在上面的参数中指定的 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.

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，其值为failed或empty。

最后一个问题是我们也将被重定向到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.

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

$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>';
}

下面是错误消息的样子。

结论

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

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