如何在已上线WordPress站点中添加前端登录页实现全站访问权限控制

方案1：自定义空白登录页模板（最推荐，彻底解决导航显示问题） #

• 第一步：在当前主题根目录新建自定义模板文件，命名为page-custom-login.php，文件开头加入模板标注，全程不调用主题的get_header()方法，从根源上避免加载站点导航菜单：

<?php
/*
 * Template Name: 自定义独立登录页
 * Template Post Type: page
 */
// 已登录用户直接跳转到站点首页
if (is_user_logged_in()) {
    wp_redirect(home_url());
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点登录</title>
    <!-- 可自行引入需要的独立样式，不加载主题全局样式即可避免导航出现 -->
    <style>
        .login-container {max-width: 400px; margin: 100px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px;}
        .form-group {margin-bottom: 15px;}
        .form-group label {display: block; margin-bottom: 5px;}
        .form-group input {width: 100%; padding: 8px; box-sizing: border-box;}
        .submit-btn {background: #007cba; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer;}
        .error-tip {color: #dc3232;}
    </style>
</head>
<body>
    <div class="login-container">
        <h2>请登录访问站点</h2>
        <?php
        // 登录错误提示
        if (isset($_GET['login_error'])) {
            echo '<p class="error-tip">用户名或密码错误，请重试</p>';
        }
        // 处理登录请求
        if (isset($_POST['custom_login_submit'])) {
            $creds = array(
                'user_login'    => sanitize_text_field($_POST['username']),
                'user_password' => $_POST['password'],
                'remember'      => isset($_POST['remember']) ? true : false,
            );
            $user = wp_signon($creds, is_ssl());
            if (is_wp_error($user)) {
                wp_redirect(add_query_arg('login_error', '1', get_permalink()));
                exit;
            } else {
                wp_redirect(home_url());
                exit;
            }
        }
        ?>
        <form method="post">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="password" required>
            </div>
            <div class="form-group">
                <label><input type="checkbox" name="remember"> 记住我</label>
            </div>
            <button type="submit" name="custom_login_submit" class="submit-btn">登录</button>
        </form>
    </div>
</body>
</html>

• 第二步：进入WordPress后台新建页面，页面名称可设为「登录」，页面模板选择刚才创建的自定义独立登录页，发布后记下该页面的链接，就是和后台wp-admin完全独立的前端登录入口。
• 第三步：添加全站强制登录校验逻辑，将以下代码加到主题的functions.php文件中：

add_action('template_redirect', 'custom_force_login');
function custom_force_login() {
    $login_page_id = 123; // 替换为你刚才新建的登录页的页面ID
    // 排除登录页、后台登录相关路径、AJAX请求，避免重定向循环
    if (
        !is_user_logged_in()
        && !is_page($login_page_id)
        && !$GLOBALS['pagenow'] === 'wp-login.php'
        && !defined('DOING_AJAX')
    ) {
        wp_redirect(get_permalink($login_page_id));
        exit;
    }
    // 禁止普通用户访问后台，实现前后台登录入口完全隔离
    if (is_admin() && !current_user_can('manage_options') && !defined('DOING_AJAX')) {
        wp_redirect(home_url());
        exit;
    }
}

方案2：现有登录页隐藏导航（快速适配方案） #

如果不想重新搭建登录页，不管是Ultimate Member生成的还是自建的页面，可直接通过CSS隐藏导航，再配套权限控制实现需求：

• 先获取登录页的页面ID，在主题自定义CSS面板中添加以下代码：

/* 把123替换为你的登录页实际ID */
.page-id-123 .site-header, 
.page-id-123 .nav-menu,
.page-id-123 .main-navigation {
    display: none !important;
}

• 再配套方案1中的全站强制登录代码即可生效。

注意事项 #

• 如果站点启用了缓存插件，需要将登录页添加到缓存排除列表，避免登录功能异常
• 修改代码前建议提前备份主题文件，防止操作错误导致站点异常

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