WordPress头部添加类Facebook登录表单求助：自定义代码无效

嘿，我来帮你搞定这个WordPress头部加Facebook风格登录表单的问题！你之前的代码大概率是因为字段不完整、缺少必要的功能逻辑，还有没加对应样式导致没法正常工作。下面给你一套完整的解决方案，从代码到样式都给你安排明白：

我把你的代码补全了，还加了登录错误提示、记住密码、找回密码链接这些实用功能，同时用WordPress标准的函数替代了弃用的写法，安全性和兼容性更好。你可以把这段代码放到主题的header.php文件里合适的位置（比如导航栏右侧、头部侧边区域）：

<?php
// 检查用户是否未登录，用WordPress标准函数替代旧的等级判断
if (!is_user_logged_in()) {
    // 获取登录失败的错误标识
    $login_error = isset($_GET['login']) ? $_GET['login'] : '';
?>
    <div class="fb-style-login-form">
        <h3>Login</h3>
        <!-- 登录失败时显示错误提示 -->
        <?php if ($login_error === 'failed') : ?>
            <p class="login-error">Invalid username or password. Please try again.</p>
        <?php endif; ?>
        <!-- 表单提交地址设为当前页面的登录处理地址，登录后跳回当前页 -->
        <form action="<?php echo wp_login_url(get_permalink()); ?>" method="post">
            <div class="form-group">
                <label for="log">Email or Phone</label>
                <input type="text" name="log" id="log" 
                       value="<?php echo isset($_COOKIE['wp_user_cookie']) ? esc_attr($_COOKIE['wp_user_cookie']) : ''; ?>" 
                       size="20" required />
            </div>
            <div class="form-group">
                <label for="pwd">Password</label>
                <input type="password" name="pwd" id="pwd" size="20" required />
            </div>
            <div class="form-options">
                <label>
                    <input type="checkbox" name="rememberme" id="rememberme" value="forever" /> Remember me
                </label>
                <!-- 调用WordPress内置的找回密码链接 -->
                <a href="<?php echo wp_lostpassword_url(); ?>" class="forgot-password">Forgot password?</a>
            </div>
            <input type="submit" name="submit" id="submit" value="Log In" class="login-btn" />
            <!-- 隐藏字段：登录后跳转回当前页面 -->
            <input type="hidden" name="redirect_to" value="<?php echo get_permalink(); ?>" />
            <!-- 添加CSRF令牌，提升表单安全性 -->
            <?php wp_nonce_field('login_form', 'login_nonce'); ?>
        </form>
    </div>
<?php } else {
    // 用户已登录时，显示用户名和退出链接
    $current_user = wp_get_current_user();
?>
    <div class="logged-in-user">
        <p>Hi, <?php echo esc_html($current_user->display_name); ?>!</p>
        <a href="<?php echo wp_logout_url(get_permalink()); ?>" class="logout-btn">Log Out</a>
    </div>
<?php } ?>

接下来把这段CSS加到你的主题style.css文件里，或者通过WordPress后台的「外观-自定义-额外CSS」添加，这样表单就会和Facebook登录框风格一致：

/* Facebook风格登录表单核心样式 */
.fb-style-login-form {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
    padding: 16px;
    width: 320px;
    margin: 10px 0;
}

.fb-style-login-form h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    color: #1c1e21;
}

.login-error {
    color: #f02849;
    text-align: center;
    margin-bottom: 12px;
    font-size: 14px;
}

.fb-style-login-form .form-group {
    margin-bottom: 12px;
}

/* 隐藏标签，贴合Facebook的无标签输入风格，需要的话可以删掉这行显示标签 */
.fb-style-login-form label {
    display: none;
}

.fb-style-login-form input[type="text"],
.fb-style-login-form input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 17px;
    color: #1d2129;
    box-sizing: border-box;
}

.fb-style-login-form input[type="text"]:focus,
.fb-style-login-form input[type="password"]:focus {
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
    outline: none;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
}

.forgot-password {
    color: #1877f2;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    padding: 14px;
    background-color: #1877f2;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.login-btn:hover {
    background-color: #166fe5;
}

/* 已登录用户信息样式 */
.logged-in-user {
    padding: 10px;
    color: #1c1e21;
    font-size: 14px;
}

.logout-btn {
    color: #1877f2;
    text-decoration: none;
    margin-left: 8px;
}

.logout-btn:hover {
    text-decoration: underline;
}

• 替换了旧的current_user_can('level_0')判断，用is_user_logged_in()这个WordPress官方推荐的函数，兼容性和准确性更好。
• 加了wp_nonce_field()来防止跨站请求伪造（CSRF），提升表单安全性，这是WordPress开发的最佳实践。
• 设置了redirect_to隐藏字段，用户登录后会自动跳回当前页面，体验更友好。
• 处理了登录失败的提示逻辑，当用户输入错误账号密码时，会显示对应的错误信息。
• 如果你的主题是子主题，记得修改子主题的header.php和style.css，避免主题更新后代码丢失。

内容的提问来源于stack exchange，提问作者Shane