说说密码保护首页样式问题 – cmWeblog

见到这个，你会发现这和Argon主题默认的密码保护样式十分违和。于是我修整了一下Argon的代码。

鄙人较为粗犷，直接加的过滤器。


add_filter( 'the_password_form', 'replace_password_form' );
function replace_password_form() {
    global $post;
    $label = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
    $output = '<div class="text-center container">
        <form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">
            <div class="post-password-form-text">这是一篇受密码保护的内容，您需要提供访问密码</div>
            <div class="row justify-content-center">
                <div class="form-group col-lg-6 col-md-8 col-sm-10 col-xs-12 post-password-form-input">
                    <div class="input-group input-group-alternative">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-key"></i></span>
                        </div>
                        <input name="post_password" id="' . $label . '" class="form-control" placeholder="密码" type="password" />
                    </div>
                </div>
            </div>
            <input class="btn btn-primary" type="submit" name="Submit" value="确认" />
        </form>
    </div>';
    return $output;
}

这段代码是从/template-parts/content-shuoshuo.php抄过来的，稍微动了动。然后就出问题了。

密码框偏左且小。经过与说说页面的密码框的对比发现，首页上面多了一堆p标签。

<div class="text-center container">
  <form action="https://muidar.com/wp-login.php?action=postpass" class="post-password-form" method="post">
    <div class="post-password-form-text">这是一篇受密码保护的内容，您需要提供访问密码</div>
    <div class="row justify-content-center">
      <div class="form-group col-lg-6 col-md-8 col-sm-10 col-xs-12 post-password-form-input">
        <div class="input-group input-group-alternative">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-key"></i></span>
          </div>
          <p> <input name="post_password" id="pwbox-2021" class="form-control" placeholder="密码" type="password">
          </p>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p> <input class="btn btn-primary" type="submit" name="Submit" value="确认"><br>
    </p>
  </form>
  <p></p>
</div>

问了DeepSeek才知道，标签是wpautop函数 (WordPress Auto Paragraphs)自动添加的。这个函数的优先级为10，因此我们只需要把我们这个函数优先级改一改就行了，即将最初第一行代码改为：

add_filter('the_content', 'replace_password_form', 11);

如你在首页所见，成功了。

推荐订阅源

cmWeblog