Question

我在wordpress中有一个自定义帖子类型，我使用以下代码在wordpress页面中显示南非类别中此案例包中的自定义帖子类型的6个缩略图：

<?php 
     $args = array('post_type' => 'package','package-category'=>'South Africa',   'posts_per_page'=>6 );
     $loop = new WP_Query( $args );
     while ( $loop->have_posts() ) : $loop->the_post();
?>

<div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
                 <?php the_post_thumbnail(); ?>
            </div>
    </div>

目前缩略图显示正确，并以三个缩略图显示，每个缩略图的第一行的色度宽度为33％，第二行的色度宽度为3。

我想动态插入div class="row"，以便每3个缩略图放在此类中。呈现的html如下：

 <div class= "row">
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="1.jpg">
            </div>
  </div>
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="2.jpg">
            </div>
  </div>
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="3.jpg">
            </div>
  </div>
 </div>

<div class= "row">
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="4.jpg">
            </div>
  </div>
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="5.jpg">
            </div>
  </div>
  <div class="four columns gdl-package-grid2">
    <div class="package-content-wrapper">
               <img src="6.jpg">
            </div>
  </div>

 </div>

Answer 1

您可以简单地使用变量来跟踪循环并添加适当的HTML标记，如下所示：

<?php 
    $args = array(
        'post_type' => 'package',
        'package-category' => 'South Africa',
        'posts_per_page' => 6
    );
    $loop = new WP_Query($args);
    $loop_count = 0;
?>
<?php while ($loop->have_posts()) : $loop->the_post(); ?>
    <?php
        $loop_count++; // Increase Loop Count
        $loop_count = ($loop_count > 3) ? 1 : $loop_count; // Reset to 1 if > 3
    ?>
    <?php if ($loop_count === 1) : ?>
        <div class="row">
    <?php endif; ?>

    <div class="four columns gdl-package-grid2">
        <div class="package-content-wrapper">
             <?php the_post_thumbnail(); ?>
        </div>
    </div>

    <?php if ($loop_count === 3) : ?>
        </div>
    <?php endif; ?>
<?php endwhile; ?>

我希望它有所帮助！

在wordpress中动态插入div类

1 个答案: