PHP和Wordpress，如何将帖子分成三个 - 初学者

Question

I looked at a few examples on Stackoverflow concerning dividing posts into three columns. I had some difficulty implementing the examples. Hope someone can help.

I have an FAQ page with questions. When user clicks read more the block of text expand. I want to place the questions in three columns. The order of the questions does not matter. As long as it fills up the rows evenly.

It should look like this:
[question X] [question A] [question Z]
[question H] [question J] [question K]
[question B] [question V]

I have structured the Bootstrap grid in such away, to solve my blank row problem, when someone clicks read more and the text expand.

<?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-->

At the moment i am getting the post three times. I just want to get the post once and divide that post into three columns.

Everything that goes into the first column, needs to go into column one in the code and the same goes for everything that needs to go into the second column needs to go into column two in the code ect..

I have been struggling with this. Could not get the examples on Stackoverflow to work for me.

Thanks in advance

Answer 1

I am pretty sure this is what you are looking for. An easy way to pull this off is by adding a "counter" variable and add to the count each time a new post is added ex($counter++). Then lastly we see if the "counter" / "number of rows" has a remainder of zero.

<?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; ?>