在WordPress主题中实现自定义登录功能

要在WordPress主题中实现自定义登录功能，需要创建一个新的模板文件来处理用户登录，并在该页面中添加登录表单。以下是实现步骤：

1. 创建自定义登录页面模板： 在主题目录中创建一个新的PHP文件，例如custom-login.php。
2. 添加模板头： 在custom-login.php文件的顶部添加WordPress模板头，以便WordPress识别这是一个页面模板。
3. 创建注册表单： 使用wp_login_form()函数来生成登录表单，并添加自定义样式和HTML结构。
4. 创建页面并分配模板： 在WordPress后台创建一个新的页面，并将页面模板设置为你刚刚创建的自定义登录页面模板。

以下是具体的实现步骤和代码示例：

1. 创建自定义登录页面模板

在你的主题目录中创建一个名为custom-login.php的文件。

2. 创建登录表单

在custom-login.php文件的顶部添加以下代码：

<?php get_header(); ?>
<main id="site-content" role="main">
        <div class="login-container">
            <h2>登录</h2>
            <?php
            if (is_user_logged_in()) {
                echo '<p class="login-container-logined">你已经登录。</p>';
            } else {
                $args = array(
                    'echo'           => true,
                    'redirect'       => home_url('/'), // 登录后重定向的URL
                    'form_id'        => 'loginform-custom',
                    'label_username' => __('用户名'),
                    'label_password' => __('密码'),
                    'label_remember' => __('记住我'),
                    'label_log_in'   => __('登录'),
                    'remember'       => true,
                    'value_remember' => false
                );
                wp_login_form($args);
            }
            ?>
        </div>
</main>
<?php get_footer(); ?>

3. 手动注册模板

在主题文件functions.php文件的添加以下代码：

function register_custom_login_template($templates) {
    $templates['custom-login.php'] = '自定义登录页面';
    return $templates;
}
add_filter('theme_page_templates', 'register_custom_login_template');

这段代码会手动将custom-login.php文件注册为一个页面模板。

4. 创建页面并分配模板

1. 登录到WordPress后台。
2. 导航到“页面” > “新建页面”。
3. 输入页面标题，例如“登录”。
4. 在右侧的“页面属性”模块中，将“模板”设置为“自定义登录页面”。
5. 发布页面。

5. 添加自定义样式

你可以在主题的style.css文件中添加自定义样式来美化登录页面。例如：

.login-container {
	max-width: 350px;
    margin: 4rem auto;
    padding: 4px;
}

.login-container h2 {
    text-align: center;
	margin-bottom: 4rem;
}

.login-container-logined {
	margin: 4rem auto;
	text-align: center;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container label {
    margin-bottom: 5px;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.login-container input[type="submit"] {
    padding: 10px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.login-container input[type="submit"]:hover {
    background-color: #005177;
}

通过以上步骤，你就可以在WordPress主题中创建一个自定义的用户登录页面。用户可以通过这个页面登录账户，并且页面会显示相应的错误信息和成功提示。