WordPress登录表单弹窗实现咨询：已有重定向代码需改造

嘿，很高兴你的登录重定向已经正常跑起来了！想要把登录改成弹窗形式，咱们可以一步步来实现，下面是具体的实操方案：

1. 搭建弹窗的HTML结构与基础样式 #

首先咱们得先搭好弹窗的架子，你可以在主题的 header.php 文件末尾（</body> 标签前）添加这段代码：

<!-- 登录弹窗容器 -->
<div id="login-modal" class="modal">
  <div class="modal-content">
    <!-- 关闭按钮 -->
    <span class="close-modal">&times;</span>
    
    <!-- 调用WordPress原生登录表单，也可以自定义字段 -->
    <?php
    wp_login_form(array(
      'redirect' => home_url(), // 登录成功后跳转的页面
      'form_id' => 'login-form-modal',
      'label_username' => '用户名',
      'label_password' => '密码',
      'label_remember' => '记住我',
      'label_log_in' => '立即登录',
    ));
    ?>

    <!-- 附加链接：找回密码/注册 -->
    <div class="modal-links">
      <a href="<?php echo wp_lostpassword_url(); ?>">忘记密码？</a>
      <?php if (get_option('users_can_register')) : ?>
        <a href="<?php echo wp_registration_url(); ?>">注册新账号</a>
      <?php endif; ?>
    </div>
  </div>
</div>

接着把弹窗的样式加到主题的 style.css 或者后台的「自定义CSS」面板里：

/* 弹窗遮罩层 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  overflow: auto;
}

/* 弹窗内容区 */
.modal-content {
  background-color: #fff;
  margin: 12% auto;
  padding: 25px;
  border-radius: 8px;
  width: 90%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 关闭按钮样式 */
.close-modal {
  color: #999;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close-modal:hover {
  color: #333;
}

/* 表单样式优化 */
#login-form-modal p {
  margin-bottom: 18px;
}
#login-form-modal input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 底部链接样式 */
.modal-links {
  margin-top: 20px;
  text-align: center;
}
.modal-links a {
  margin: 0 12px;
  color: #2d7dd2;
  text-decoration: none;
}
.modal-links a:hover {
  text-decoration: underline;
}

2. 用JS控制弹窗的显示/隐藏 #

现在需要加一段JavaScript，让点击登录链接时弹出窗口，点击关闭按钮或遮罩层时隐藏窗口。同样放在 header.php 里，或者主题的自定义JS文件中：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('login-modal');
  const closeBtn = document.querySelector('.close-modal');
  // 匹配所有指向你原登录页面的链接
  const loginLinks = document.querySelectorAll('a[href="<?php echo home_url('/login-2/'); ?>"]');

  // 点击登录链接时阻止跳转，显示弹窗
  loginLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      modal.style.display = 'block';
    });
  });

  // 点击关闭按钮隐藏弹窗
  closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
  });

  // 点击遮罩层隐藏弹窗
  window.addEventListener('click', function(e) {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
});
</script>

3. 调整现有重定向代码适配弹窗 #

你原来的代码是把wp-login.php重定向到/login-2/，现在需要修改一下，让直接访问/login-2/时自动弹出弹窗，而不是跳转到单独页面：

function custom_login_page() { 
  $new_login_page_url = home_url( '/login-2/' ); 
  global $pagenow; 

  // 访问wp-login.php的GET请求，直接重定向到首页
  if( $pagenow == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { 
    wp_redirect(home_url()); 
    exit; 
  }

  // 如果访问/login-2/页面，自动触发弹窗
  if(is_page('login-2')){
    add_action('wp_footer', 'trigger_login_modal');
  }
} 

// 触发弹窗的函数
function trigger_login_modal() {
  echo '<script>document.getElementById("login-modal").style.display = "block";</script>';
}

if(!is_user_logged_in()){ 
  add_action('init','custom_login_page'); 
}

4. 处理登录成功/失败的反馈 #

WordPress默认登录表单会提交到wp-login.php处理，咱们得确保登录成功后跳回首页，失败时回到弹窗并显示错误提示：

// 登录成功后跳转首页
function custom_login_redirect($redirect_to, $request, $user) {
  return home_url();
}
add_filter('login_redirect', 'custom_login_redirect', 10, 3);

// 登录失败时带错误参数跳回首页
function custom_login_failed() {
  wp_redirect(home_url() . '?login_error=1');
  exit;
}
add_action('wp_login_failed', 'custom_login_failed');

// 处理用户名/密码为空的错误
function custom_empty_login() {
  if(isset($_POST['log']) && empty($_POST['log']) || isset($_POST['pwd']) && empty($_POST['pwd'])){
    wp_redirect(home_url() . '?login_error=1');
    exit;
  }
}
add_action('init', 'custom_empty_login');

最后在弹窗的HTML里，登录表单上方加一段错误提示：

<!-- 登录错误提示 -->
<?php if(isset($_GET['login_error'])) : ?>
  <div class="login-error" style="color: #dc3232; margin-bottom: 18px; text-align: center;">
    用户名或密码错误，请重试！
  </div>
<?php endif; ?>

这样一套下来，登录弹窗就完全实现啦，你可以根据自己的主题风格调整CSS样式，让弹窗更贴合网站设计~

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