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

大家好，今天咱们聊聊 WordPress 登录表单的那些事儿

嗨，各位攻城狮、码农、代码艺术家们，今天老司机我来带大家深入挖掘一下 WordPress 里那个神秘又熟悉的 wp_login_form() 函数。别看它貌似简单，背后可是藏着不少可以自定义的秘密呢！咱们的目标是：让你的登录表单不再千篇一律，而是充满个性，骚气十足！

咱们先从最基础的开始，然后层层深入，保证大家听完能像改造自己的发型一样，随意摆弄你的登录表单。

一、`wp_login_form()` 函数：你是谁？从哪儿来？要到哪儿去？

首先，我们得认识一下主角。wp_login_form() 函数，顾名思义，就是用来生成登录表单的。它接收一个 $args 数组作为参数，允许你自定义表单的各个方面。如果不传参数，它就会使用默认设置，生成一个标准的 WordPress 登录表单。

这个函数定义在 wp-includes/general-template.php 文件里，大家可以打开文件，仔细研究一下源码。当然，今天我会带着大家一起看，不用担心迷路。

基本的用法长这样：

<?php wp_login_form(); ?>

就这么简单，一行代码就能在你的主题或者插件里生成一个登录表单。

稍微高级一点的用法：

<?php
$args = array(
    'echo'           => true,
    'redirect'       => ( isset( $_SERVER['REQUEST_URI'] ) ) ? $_SERVER['REQUEST_URI'] : '',
    'form_id'        => 'loginform',
    'label_username' => __( 'Username or Email Address' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( '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 );
?>

这个例子展示了一些常用的参数，可以控制表单的各个方面，比如标签文本、ID、是否显示“记住我”选项等等。

二、`wp_login_form()` 源码剖析：扒开它的底裤，看看里面有什么

好了，现在我们开始深入源码，看看 wp_login_form() 到底是怎么工作的。

简单来说，wp_login_form() 函数主要做了以下几件事：

处理参数： 接收 $args 数组，并将其与默认参数合并。
构建 HTML： 根据参数，生成包含用户名、密码、记住我、提交按钮等元素的 HTML 代码。
应用过滤器： 在不同的阶段应用过滤器，允许开发者修改 HTML 代码。
输出 HTML： 根据 echo 参数，选择直接输出 HTML 代码，或者返回 HTML 代码。

下面是简化版的源码结构（为了方便理解，我省略了一些细节和错误处理）：

function wp_login_form( $args = array() ) {
    $defaults = array(
        'echo'           => true,
        'redirect'       => ( isset( $_SERVER['REQUEST_URI'] ) ) ? $_SERVER['REQUEST_URI'] : '',
        'form_id'        => 'loginform',
        'label_username' => __( 'Username or Email Address' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'remember'       => true,
        'value_username' => '',
        'value_remember' => false,
        'template'       => 'form'
    );

    $args = wp_parse_args( $args, $defaults );

    // 应用 'login_form_defaults' 过滤器，允许修改默认参数
    $args = apply_filters( 'login_form_defaults', $args );

    $form = '<form name="' . esc_attr( $args['form_id'] ) . '" id="' . esc_attr( $args['form_id'] ) . '" action="' . esc_url( site_url( 'wp-login.php', 'login_post' ) ) . '" method="post">';

    // 构建用户名输入框
    $form .= '<p>';
    $form .= '<label for="' . esc_attr( $args['id_username'] ) . '">' . esc_html( $args['label_username'] ) . '</label>';
    $form .= '<input type="text" name="log" id="' . esc_attr( $args['id_username'] ) . '" class="input" value="' . esc_attr( $args['value_username'] ) . '" size="20" />';
    $form .= '</p>';

    // 构建密码输入框
    $form .= '<p>';
    $form .= '<label for="' . esc_attr( $args['id_password'] ) . '">' . esc_html( $args['label_password'] ) . '</label>';
    $form .= '<input type="password" name="pwd" id="' . esc_attr( $args['id_password'] ) . '" class="input" value="" size="20" />';
    $form .= '</p>';

    // 构建“记住我”选项
    if ( $args['remember'] ) {
        $form .= '<p class="forgetmenot">';
        $form .= '<label for="' . esc_attr( $args['id_remember'] ) . '">';
        $form .= '<input name="rememberme" type="checkbox" id="' . esc_attr( $args['id_remember'] ) . '" value="forever"' . ( $args['value_remember'] ? ' checked="checked"' : '' ) . ' />';
        $form .= esc_html( $args['label_remember'] );
        $form .= '</label>';
        $form .= '</p>';
    }

    // 构建提交按钮
    $form .= '<p class="submit">';
    $form .= '<input type="submit" name="wp-submit" id="' . esc_attr( $args['id_submit'] ) . '" class="button button-primary" value="' . esc_attr( $args['label_log_in'] ) . '" />';
    $form .= '<input type="hidden" name="redirect_to" value="' . esc_url( $args['redirect'] ) . '" />';
    $form .= '</p>';

    $form .= '</form>';

    // 应用 'login_form' 过滤器，允许修改整个表单的 HTML 代码
    $form = apply_filters( 'login_form', $form, $args );

    if ( $args['echo'] ) {
        echo $form;
    } else {
        return $form;
    }
}

关键点：

wp_parse_args()： 这个函数用于合并用户传入的 $args 数组和默认参数 $defaults。如果用户传入了某个参数，就使用用户的值；否则，使用默认值。
apply_filters()： 这是 WordPress 强大的过滤器机制。它允许你在特定的地方插入自己的代码，修改 WordPress 的行为。在 wp_login_form() 函数中，有两个重要的过滤器：
- login_form_defaults： 允许你修改默认参数。
- login_form： 允许你修改整个表单的 HTML 代码。

三、过滤器大显神通：让你的登录表单与众不同

现在，我们来重点说说如何使用过滤器来定制登录表单。

1. `login_form_defaults` 过滤器：修改默认参数

这个过滤器允许你修改 wp_login_form() 函数的默认参数。例如，你可以修改默认的标签文本、ID、或者是否显示“记住我”选项。

例子：修改默认的用户名标签文本

add_filter( 'login_form_defaults', 'my_custom_login_form_defaults' );

function my_custom_login_form_defaults( $args ) {
    $args['label_username'] = __( '用户名/邮箱' ); // 修改为中文
    $args['remember'] = false; // 禁用“记住我”选项
    return $args;
}

代码解释：

add_filter( 'login_form_defaults', 'my_custom_login_form_defaults' ); 这行代码将 my_custom_login_form_defaults 函数绑定到 login_form_defaults 过滤器上。这意味着，当 WordPress 执行 wp_login_form() 函数时，会先执行 my_custom_login_form_defaults 函数。
my_custom_login_form_defaults( $args ) 这个函数接收 $args 数组作为参数，你可以修改 $args 数组中的任何值。
$args['label_username'] = __( '用户名/邮箱' ); 这行代码将默认的用户名标签文本修改为“用户名/邮箱”。
$args['remember'] = false; 这行代码禁用了“记住我”选项。
return $args; 最后，你需要返回修改后的 $args 数组。

记住： 一定要返回 $args 数组，否则你的修改将不会生效。

2. `login_form` 过滤器：修改整个表单的 HTML 代码

这个过滤器允许你修改整个登录表单的 HTML 代码。你可以添加、删除、修改任何元素，完全控制表单的结构和样式。

例子：在登录表单中添加一个链接

add_filter( 'login_form', 'my_custom_login_form', 10, 2 );

function my_custom_login_form( $form, $args ) {
    $form .= '<p><a href="' . wp_lostpassword_url() . '">' . __( '忘记密码？' ) . '</a></p>';
    return $form;
}

代码解释：

add_filter( 'login_form', 'my_custom_login_form', 10, 2 ); 这行代码将 my_custom_login_form 函数绑定到 login_form 过滤器上。 10 是优先级， 2 是参数个数 ( $form 和 $args )。
my_custom_login_form( $form, $args ) 这个函数接收 $form (HTML代码) 和 $args 数组作为参数。
$form .= '<p><a href="' . wp_lostpassword_url() . '">' . __( '忘记密码？' ) . '</a></p>'; 这行代码在表单的末尾添加了一个“忘记密码？”的链接。
return $form; 最后，你需要返回修改后的 $form 字符串。

高级用法：替换整个表单

你可以完全替换 wp_login_form() 生成的默认表单，使用你自己的 HTML 代码。

add_filter( 'login_form', 'my_custom_login_form', 10, 2 );

function my_custom_login_form( $form, $args ) {
    $custom_form = '<form id="my-custom-login-form" action="' . esc_url( site_url( 'wp-login.php', 'login_post' ) ) . '" method="post">';
    $custom_form .= '<p><label for="my-username">用户名：</label><input type="text" name="log" id="my-username" /></p>';
    $custom_form .= '<p><label for="my-password">密码：</label><input type="password" name="pwd" id="my-password" /></p>';
    $custom_form .= '<p><input type="submit" value="登录" /></p>';
    $custom_form .= '</form>';

    return $custom_form;
}

注意： 如果你完全替换了表单，你需要自己处理所有的逻辑，包括表单提交、验证、错误处理等等。

四、实战演练：创建一个漂亮的登录表单

理论讲了这么多，现在我们来做一个实际的例子，创建一个包含自定义样式和功能的登录表单。

目标：

修改标签文本。
添加一个自定义的 CSS 类。
添加一个“注册”链接。
使用 Font Awesome 图标（假设你已经引入了 Font Awesome）。

代码：

add_filter( 'login_form_defaults', 'my_custom_login_form_defaults' );
add_filter( 'login_form', 'my_custom_login_form', 10, 2 );

function my_custom_login_form_defaults( $args ) {
    $args['label_username'] = __( '用户名/邮箱地址' );
    $args['label_password'] = __( '密码' );
    $args['label_log_in']   = __( '登录' );
    $args['remember']       = false; // 移除 "记住我"
    return $args;
}

function my_custom_login_form( $form, $args ) {
    $form = str_replace( 'loginform', 'my-custom-login-form loginform', $form ); // 添加 CSS 类

    $register_url = wp_registration_url();
    if ( ! empty( $register_url ) ) {
        $form .= '<p class="register-link"><a href="' . esc_url( $register_url ) . '">注册</a></p>';
    }
    return $form;
}

CSS 样式 (可选，但强烈推荐)：

.my-custom-login-form {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.my-custom-login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.my-custom-login-form input[type="text"],
.my-custom-login-form input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.my-custom-login-form input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.my-custom-login-form .register-link {
    text-align: center;
    margin-top: 10px;
}

代码解释：

my_custom_login_form_defaults()： 修改了标签文本，并移除了“记住我”选项。
my_custom_login_form()：
- 使用 str_replace() 函数在表单的 <form> 标签中添加了一个自定义的 CSS 类 my-custom-login-form，方便我们添加样式。
- 添加了一个“注册”链接，使用 wp_registration_url() 函数获取注册页面的 URL。
CSS 样式： 对 my-custom-login-form 类应用了一些基本的样式，让表单看起来更漂亮。

重点：

安全性： 在处理用户输入时，一定要进行验证和转义，防止 XSS 攻击。
用户体验： 设计一个用户友好的登录表单，让用户更容易登录。

五、高级技巧：更上一层楼

自定义模板： 你可以创建一个自定义的登录表单模板，然后使用 login_form 过滤器加载这个模板。
与第三方服务集成： 你可以将登录表单与第三方服务集成，例如社交登录、两步验证等等。
使用插件： WordPress 社区有很多优秀的登录表单插件，可以帮助你快速创建复杂的登录表单。

六、总结

今天我们深入探讨了 WordPress wp_login_form() 函数的源码，学习了如何使用过滤器来定制登录表单。希望大家能够灵活运用这些技巧，打造出独一无二的登录表单，提升你的网站的用户体验。

记住，代码的世界是无限的，只有不断学习和实践，才能成为真正的代码大师！

最后，给大家留个小作业：

尝试使用 login_form 过滤器，在登录表单中添加一个验证码功能，防止机器人恶意登录。

祝大家编码愉快！

大家好，今天咱们聊聊 WordPress 登录表单的那些事儿

一、wp_login_form() 函数：你是谁？从哪儿来？要到哪儿去？

二、wp_login_form() 源码剖析：扒开它的底裤，看看里面有什么

三、过滤器大显神通：让你的登录表单与众不同

1. login_form_defaults 过滤器：修改默认参数

2. login_form 过滤器：修改整个表单的 HTML 代码

四、实战演练：创建一个漂亮的登录表单

五、高级技巧：更上一层楼

六、总结

发表回复 取消回复

一、`wp_login_form()` 函数：你是谁？从哪儿来？要到哪儿去？

二、`wp_login_form()` 源码剖析：扒开它的底裤，看看里面有什么

1. `login_form_defaults` 过滤器：修改默认参数

2. `login_form` 过滤器：修改整个表单的 HTML 代码

发表回复取消回复