while语句中每两个div显示容器

Question

我正在使用带有高级自定义字段的基础和 Wordpress 来构建服务模块。

我正在使用转发器字段插入数据。

目前我在 while 循环之外有 row 元素。

我需要 div 行每两个 "small-6 columns tgs-single-service" div 换行，以便基础网格正确显示。如果我在 while 语句中插入行 div，它会将每个 div 换行，这是我不想要的。

<?php if( have_rows('services_content') ): 
    $classNumber = 0

?>
    <section class="full-width tgs-services-section">
        <div class="row">
        <?php while( have_rows('services_content') ): the_row(); ?>
             <div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
                 <figure class="effect-goliath">
                 <?php while( have_rows('service_images') ): the_row(); ?>
                 <img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
                 <?php endwhile; ?>
                <figcaption>
                     <h3><?php the_sub_field('service_title');?></h3>
                     <?php the_sub_field('service_text');?>
                    </figcaption>   
                 </figure>
             </div><!-- end service section -->
        <?php endwhile; ?>
        </div><!--end row -->
    </section>
<?php endif; ?>

目前显示为：

<div class="row">
  <div class="small-6 columns tgs-service-section-1"></div>
  <div class="small-6 columns tgs-service-section-2"></div>
  <div class="small-6 columns tgs-service-section-3"></div>
  <div class="small-6 columns tgs-service-section-4"></div>
</div>

我要实现

<div class="row">
  <div class="small-6 columns tgs-service-section-1"></div>
  <div class="small-6 columns tgs-service-section-2"></div>
</div>
<div class="row">
  <div class="small-6 columns tgs-service-section-3"></div>
  <div class="small-6 columns tgs-service-section-4"></div>
</div>

有没有办法让每两个 tgs-single-service divs 换行？

Answer 1

声明一个计数器，然后判断计数是否是2的倍数：

$i = 0;
//during your loop:
if(($i % 2) == 0){
      //echo opening and closing tag 
}

Answer 2

<section class="full-width tgs-services-section">
    <div class="row">
    <!-- Create a counter i -->
    <?php $i=1; while( have_rows('services_content') ): the_row(); ?>
         <div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
             <figure class="effect-goliath">
             <?php while( have_rows('service_images') ): the_row(); ?>
             <img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
             <?php endwhile; ?>
            <figcaption>
                 <h3><?php the_sub_field('service_title');?></h3>
                 <?php the_sub_field('service_text');?>
                </figcaption>   
             </figure>
         </div><!-- end service section -->
         <?php if($i % 2 == 0): ?><!-- Check if its divisable by 2 -->
            </div>
            <div class="row">
        <?php endif; ?>
        <?php $i++; ?>
    <?php endwhile; ?>
    </div><!--end row -->
</section>

Answer 3

请试试这个：

<?php
if( have_rows('services_content') ): 
    $classNumber = 0
    $rowPerSection = 2;
    $rows = get_field('services_content');
    $sections = array_chunk($rows, $rowPerSection);
?>
    <?php foreach ($sections as $section): ?>
        <section class="full-width tgs-services-section">
            <div class="row">
                <?php foreach ($section as $row): ?>
                    # code...
                <?php endforeach; ?>
            </div>
        </section>
    <?php endforeach; ?>
<?php endif; ?>

while语句中每两个div显示容器

Display container for every two divs in while statment

php

wordpress

advanced-custom-fields