PHP 和 Wordpress，如何将帖子一分为三 - 初学者

Question

我在 Stackoverflow 上查看了一些关于将帖子分为三列的示例。我在实现示例时遇到了一些困难。希望有人能帮忙。

我有一个包含问题的常见问题解答页面。当用户点击阅读更多时，文本 block 展开。我想将问题分为三列。问题的顺序无关紧要。只要它均匀地填满行即可。

它应该是这样的:
[问题X] [问题A] [问题Z]
[H题] [J题] [K题]
[问题 B] [问题 V]

我以这种方式构建了 Bootstrap 网格，以解决我的空白行问题，当有人点击阅读更多并且文本展开时。

<?php if ( $wp_query->have_posts() ) : ?>
<div class="row custom-gutter-faq">

 <!--COLUMN ONE-->
       <div class="col-lg-4">
         <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
                <?php endwhile; ?>
             </div>
             </div>
            <!--end one-->

            <!--COLUMN TWO-->
           <div class="col-lg-4">
              <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
                <?php endwhile; ?>
             </div>
            </div>
            <!--end two-->

            <!--COLUMN THREE-->
            <div class="col-lg-4">
              <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
                <?php endwhile; ?>
             </div>
           </div>
           <!--end three-->

目前我收到了 3 次帖子。我只想获得一次帖子并将该帖子分为三栏。

进入第一列的所有内容都需要进入代码中的第一列，同样需要进入第二列的所有内容都需要进入代码中的第二列等等。

我一直在努力解决这个问题。无法让 Stackoverflow 上的示例为我工作。

提前致谢

Answer 1

我很确定这就是您要找的。一个简单的方法是添加一个“计数器”变量，并在每次添加新帖子时添加到计数 ex($counter++)。然后最后我们看看“计数器”/“行数”是否余数为零。

<?php if ( $wp_query->have_posts() ) : ?>
        <?php 
            $counter=0;
            $total_posts = $wp_query->post_count;
            $posts_per_column = ceil($total_posts / 3);
        ?>
      <div class="row custom-gutter-faq">
        <div class="col-lg-4">
          <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); $counter++; ?>                 
              <div class="faq-all">
                <div class="faq-item">
                  <h2><?php the_title(); ?></h2>
                  <article>
                    <div class="faq-intro">
                       <?php the_content(); ?>
                    </div>
                    <div class="faq-info">
                       <?php the_content(); ?>
                    </div>   
                    <div class="faq-link">
                      <a href="#" class="read-more">LES HELE SVARET</a>
                      <a href="#" class="read-less">LES MINDRE</a>
                  </div>
                 </article>
                </div>
              </div> 
                <!-- Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero -->
                <?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">'; ?>
                <?php endwhile; ?>
            </div>
        </div>
      </div>
    <?php endif; ?>