如何构建完全自定义的 WordPress 登录页面
我相信你们中的许多人都熟悉 WordPress 登录页面wp-login.php
。它看起来不错,而且工作正常。但是当涉及到为客户创建网站时,您可能需要一个更个性化的登录页面,以便它与整个网站设计很好地集成。此外,拥有自定义登录页面还可以让您的客户对您的技能产生良好印象。
如果这是您想在您的网站上实现的目标,可以按照以下方法构建完全自定义的 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 网站主题。
验证
此时,登录页面已经可以使用了。我们可以尝试登录,如果成功,我们将被重定向到我们在上面的参数中指定的 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,其值为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
.
将此代码放在登录页面模板中。
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>' ; } |
下面是错误消息的样子。
结论
我们可以做几件事来改进我们的登录页面,例如添加丢失密码链接、注册链接和个性化的错误消息。但是,此时它已经可以很好地让我们的用户登录和注销,这也是创建更高级登录页面的良好开端。
我们希望您觉得本教程有用。