我希望将WP While循环中的每个四个元素包装在Div容器(Index.php)中

我希望每四个Cfcolumns包裹在一个具有一个类的Div容器中

这是我在索引页面中的While循环：

<div id="left-area" style="padding-top: 58px;">
                    <!-- #custom-area -->
                    <?php while ( have_posts() ) : the_post(); ?>
                    <div class="cfcolumn">
                    <a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
    the_title(); ?>" >
                    </a>
                    </div>
                    <?php endwhile; // end of the loop. ?>
                    <!-- #custom-area -->
                    </div> <!-- #left-area -->

#1

我想如果你不想学习模数-你可以重置计数器。

<div id="left-area" style="padding-top: 58px;">
           <!-- #custom-area -->
       <?php 
       //Initiate the counter
       $counter = 0; ?>
       <?php while ( have_posts() ) : the_post(); ?>
                <?php
                 //add 1 to the counter 
                 $counter++;
                 //If the counter = 4, then spit out the HMTL
                 if($counter == 4): ?>
                     <div class="whateverClassWrapper">
                  <?php endif; ?>
                 <div class="cfcolumn">
                     <a href="<?php echo get_field('upload_pdf_book'); ?>"> 
                        <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
                     </a>
                </div>
             <?php 
             //close the HTML tag initiated by your counter
             if($counter == 4): ?>
                 </div>
              <?php 
                //Reset the counter
                $counter = 0;
              endif; ?>
        <?php endwhile; // end of the loop. ?>
        <!-- #custom-area -->
 </div> <!-- #left-area -->

这应该工作-但尚未测试。

#2

你可以设置一个计数器来对当前循环进行计数, 然后检查其是否被4整除以在内容之前和之后插入和关闭容器。

<div id="left-area" style="padding-top: 58px;">
    <?php $i = 1; ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php if( $i % 4 == 0 ): ?>
            <div class="container">
        <?php endif; ?>
        <div class="cfcolumn">
            <a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
                the_title(); ?>" >
            </a>
        </div>
        <?php if( $i % 4 == 0 ): ?>
            </div> <!-- close the container -->
        <?php endif; ?>
        <?php $i++; ?>
    <?php endwhile; ?>
</div>

#3

你还可以使用$ WP_Query的current_post属性, 如下所示：

<?php
$args = array(
  'post_type' => 'page', 'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : 
  $loop->the_post();

  if ($loop->current_post % 4 == 0) {
    echo '<div class="container">';
    echo '<div class="cfcolumn">';
    //more code here
    echo '</div>';
    echo '</div>';
  }
  else {
    echo '<div class="cfcolumn">';
    //more code here
    echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`