Question

我想要显示缩略图网格＆amp;帖子标题是自定义帖子类型。我也使用fullpage.js显示内容全宽＆amp;浏览器窗口的高度。在每个完整页面＆＃39;部分中，我想显示6x缩略图/标题。

如何分割循环以达到此效果？到目前为止，这是我的代码：

<?php   
        $work_args = array(
            'post_type'      => 'bp_work_post_type',
            'post_status'    => 'publish',
            'posts_per_page' => 6,
            'offset'         => 6
        );
        $work_query = new WP_Query( $work_args );
    ?>

<?php if ( $work_query->have_posts() ) : ?>
 <div class="section">
  <?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
   <div class="post-grid">
    //Grid Content in here
   </div>
  <?php endwhile;?>
</div>
<?php endif; ?>

Answer 1

你可以使用boostrap css来分割div。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<?php   
        $work_args = array(
            'post_type'      => 'bp_work_post_type',
            'post_status'    => 'publish',
            'posts_per_page' => 6,
            'offset'         => 6
        );
        $work_query = new WP_Query( $work_args );
    ?>

<?php if ( $work_query->have_posts() ) : ?>
 <div class="section row">
  <?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
   <div class="post-grid col-md-2">
    //Grid Content in here
   </div>
  <?php endwhile;?>
</div>
<?php endif; ?>

Answer 2

使用模数符号（％）

<?php   
$work_args = array(
    'post_type'      => 'bp_work_post_type',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
);
$work_query = new WP_Query( $work_args );
$nb_posts = $work_query->post_count; 
$post_per_section = 6;
?>

<?php if ( $work_query->have_posts() ) : ?>
    <div class="section">
      <?php $count=0; ?>
      <?php while ( $work_query->have_posts() ) : $work_query->the_post(); $count++; ?>
        <div class="post-grid"></div>
        <?php if($count % $post_per_section == 0 && $nb_posts !== $post_per_section ):  ?>
          </div><div class="section">
        <?php endif;?>
      <?php endwhile;?>
    </div>
<?php endif; ?>

拆分WordPress循环

2 个答案:

你可以使用boostrap css来分割div。