分析 WordPress `wp_login_form()` 函数源码：过滤器如何自定义登录表单 HTML。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！今天咱们来聊聊 WordPress 登录表单的那些事儿，特别是 wp_login_form() 这个函数，以及它背后的那些过滤器，看看我们如何像个“装修工头”一样，定制我们自己的登录表单。

一、wp_login_form()：登录表单的“毛坯房”

首先，让我们先看看 wp_login_form() 这个函数到底做了什么。简单来说，它就是生成一个标准的 WordPress 登录表单的 HTML 代码。但是，这个“毛坯房”并不是一成不变的，我们可以通过各种过滤器来“装修”它。

这个函数的基本用法非常简单：

<?php wp_login_form(); ?>

这段代码会在你的页面上输出一个登录表单。当然，我们还可以传入一些参数来修改表单的一些基本属性，比如：

<?php
$args = array(
    'echo'           => true,
    'redirect'       => ( isset( $_SERVER['REQUEST_URI'] ) ? $_SERVER['REQUEST_URI'] : '' ),
    'form_id'        => 'loginform',
    'label_username' => __( '用户名或邮箱地址' ),
    'label_password' => __( '密码' ),
    'label_remember' => __( '记住我' ),
    'label_log_in'   => __( '登录' ),
    'id_username'    => 'user_login',
    'id_password'    => 'user_pass',
    'id_remember'    => 'rememberme',
    'id_submit'      => 'wp-submit',
    'remember'       => true,
    'value_username' => '',
    'value_remember' => false
);
wp_login_form( $args );
?>

这个 args 数组允许你修改表单的各个部分的标签、ID、以及一些默认值。但是，这还只是“小修小补”，真正的“大动干戈”需要用到过滤器。

二、过滤器：装修队的“工具箱”

wp_login_form() 函数内部使用了很多过滤器，这些过滤器就像装修队的“工具箱”，允许我们修改表单的各个部分，甚至完全重写整个表单。

下面是 wp_login_form() 函数内部使用的主要过滤器：

过滤器名称	作用
`login_form_defaults`	修改默认的参数数组。
`login_form_top`	在登录表单的最上方添加内容。
`login_form_middle`	在用户名和密码字段之间添加内容。
`login_form_bottom`	在登录按钮和“忘记密码”链接之间添加内容。
`login_form`	修改整个登录表单的 HTML 代码。这是最强大的过滤器，可以完全控制表单的输出。
`login_message`	修改登录表单上方的消息。
`lostpassword_url`	修改“忘记密码”链接的 URL。
`register_url`	修改“注册”链接的 URL (如果允许注册)。
`login_headerurl`	修改登录页面 Logo 的 URL。
`login_headertext`	修改登录页面 Logo 的 alt 文本。
`login_errors`	修改登录错误信息。
`login_redirect`	修改登录成功后的重定向 URL。

接下来，我们一个一个地看看如何使用这些过滤器。

1. login_form_defaults：修改默认参数

这个过滤器允许我们修改 wp_login_form() 函数的默认参数。例如，我们可以修改默认的“记住我”标签：

add_filter( 'login_form_defaults', 'my_login_form_defaults' );

function my_login_form_defaults( $defaults ) {
    $defaults['label_remember'] = __( '保持登录状态' );
    return $defaults;
}

这段代码会将默认的“记住我”标签修改为“保持登录状态”。

2. login_form_top、login_form_middle、login_form_bottom：在表单的特定位置添加内容

这三个过滤器允许我们在登录表单的特定位置添加 HTML 代码。例如，我们可以在用户名和密码字段之间添加一个提示信息：

add_filter( 'login_form_middle', 'my_login_form_middle' );

function my_login_form_middle() {
    return '<p class="message">请输入您的用户名和密码。</p>';
}

这段代码会在用户名和密码字段之间添加一个带有提示信息的段落。

3. login_form：完全控制表单的 HTML 代码

这是最强大的过滤器，允许我们完全控制登录表单的 HTML 代码。例如，我们可以完全重写整个表单：

add_filter( 'login_form', 'my_login_form' );

function my_login_form( $form ) {
    $form = '<form name="loginform" id="loginform" action="' . esc_url( site_url( 'wp-login.php', 'login_post' ) ) . '" method="post">';
    $form .= '<p>';
    $form .= '<label for="user_login">用户名或邮箱地址<br />';
    $form .= '<input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>';
    $form .= '</p>';
    $form .= '<p>';
    $form .= '<label for="user_pass">密码<br />';
    $form .= '<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>';
    $form .= '</p>';
    $form .= '<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> 记住我</label></p>';
    $form .= '<p class="submit">';
    $form .= '<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="登录" />';
    $form .= '<input type="hidden" name="redirect_to" value="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" />';
    $form .= '<input type="hidden" name="testcookie" value="1" />';
    $form .= '</p>';
    $form .= '</form>';
    return $form;
}

这段代码会完全重写登录表单的 HTML 代码。注意，你需要自己构建整个表单的 HTML 结构，包括表单的 action 属性、输入字段、以及提交按钮。

4. login_message：修改登录表单上方的消息

这个过滤器允许我们修改登录表单上方的消息。例如，我们可以添加一个欢迎消息：

add_filter( 'login_message', 'my_login_message' );

function my_login_message( $message ) {
    return '<p class="message">欢迎来到我们的网站！</p>' . $message;
}

这段代码会在登录表单上方添加一个欢迎消息。

5. lostpassword_url 和 register_url：修改“忘记密码”和“注册”链接的 URL

这两个过滤器允许我们修改“忘记密码”和“注册”链接的 URL。例如，我们可以将“忘记密码”链接指向我们自定义的页面：

add_filter( 'lostpassword_url', 'my_lostpassword_url' );

function my_lostpassword_url( $lostpassword_url ) {
    return home_url( '/custom-lost-password-page/' );
}

这段代码会将“忘记密码”链接指向 /custom-lost-password-page/ 页面。

6. login_headerurl 和 login_headertext：修改登录页面 Logo 的 URL 和 alt 文本

这两个过滤器允许我们修改登录页面 Logo 的 URL 和 alt 文本。例如，我们可以将 Logo 的 URL 指向我们的网站首页：

add_filter( 'login_headerurl', 'my_login_headerurl' );

function my_login_headerurl( $url ) {
    return home_url();
}

这段代码会将 Logo 的 URL 指向我们的网站首页。

7. login_errors：修改登录错误信息

这个过滤器允许我们修改登录错误信息。例如，我们可以将默认的错误信息修改为更友好的提示：

add_filter( 'login_errors', 'my_login_errors' );

function my_login_errors( $errors ) {
    $errors = __( '用户名或密码不正确，请重试。' );
    return $errors;
}

这段代码会将默认的错误信息修改为“用户名或密码不正确，请重试。”。

8. login_redirect：修改登录成功后的重定向 URL

这个过滤器允许我们修改登录成功后的重定向 URL。例如，我们可以将用户重定向到他们的个人资料页面：

add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );

function my_login_redirect( $redirect_to, $request, $user ) {
    if ( isset( $user->roles ) && in_array( 'administrator', $user->roles ) ) {
        // 管理员重定向到后台
        return admin_url();
    } else {
        // 其他用户重定向到个人资料页面
        return home_url( '/profile/' );
    }
}

这段代码会将管理员重定向到后台，其他用户重定向到 /profile/ 页面。

三、实战案例：打造个性化登录表单

现在，让我们结合以上知识，打造一个个性化的登录表单。

需求：

修改“记住我”标签为“下次自动登录”。
在用户名和密码字段之间添加一个提示信息：“请输入您的用户名和密码。”
将登录按钮的文字修改为“立即登录”。
修改登录页面 Logo 的 URL 指向我们的网站首页，alt 文本修改为我们的网站名称。

代码：

<?php
add_filter( 'login_form_defaults', 'my_login_form_defaults' );
function my_login_form_defaults( $defaults ) {
    $defaults['label_remember'] = __( '下次自动登录' );
    $defaults['label_log_in']   = __( '立即登录' );
    return $defaults;
}

add_filter( 'login_form_middle', 'my_login_form_middle' );
function my_login_form_middle() {
    return '<p class="message">请输入您的用户名和密码。</p>';
}

add_filter( 'login_headerurl', 'my_login_headerurl' );
function my_login_headerurl( $url ) {
    return home_url();
}

add_filter( 'login_headertext', 'my_login_headertext' );
function my_login_headertext( $title ) {
    return get_bloginfo( 'name' );
}
?>

将这段代码添加到你的主题的 functions.php 文件中，就可以实现以上需求。

四、注意事项

优先级： 过滤器可以设置优先级，数字越小优先级越高。如果你有多个过滤器修改同一个值，优先级高的过滤器会先执行。
参数个数： 有些过滤器需要指定参数个数，例如 login_redirect 过滤器需要指定 3 个参数。
代码位置： 建议将这些代码添加到你的主题的 functions.php 文件中，或者创建一个自定义的插件。
安全： 在修改登录表单时，务必注意安全性，防止 XSS 攻击等安全问题。

总结

通过 wp_login_form() 函数和各种过滤器，我们可以轻松地定制 WordPress 登录表单，使其更符合我们的需求。希望今天的讲解能帮助你更好地理解 WordPress 登录表单的定制方法。记住，玩转这些过滤器，你就是登录表单的“装修大师”！

如果大家还有什么问题，欢迎提问！下次有机会再和大家分享更多 WordPress 的技巧。

发表回复 取消回复

发表回复取消回复