我希望 WP While Loop 中的每四个元素都包装在一个 Div 容器 (Index.php) Wordpress 中

Question

我希望每四个 Cfcolumns 都包含在一个 Div 容器中，其中包含一个 Class

这是我在索引页中的 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 -->

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

这应该可行 - 但尚未测试。

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

Answer 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();
?>`

我希望 WP While Loop 中的每四个元素都包装在一个 Div 容器 (Index.php) Wordpress 中

I want every four elements in WP While Loop wrapped in a Div Container (Index.php) Wordpress

php

wordpress

wordpress-theming

while-loop

custom-wordpress-pages