以4列布局显示Wordpress循环 - Display Wordpress Loop in 4 column layout

我正在为我在Wordpress中创建的自定义帖子类型创建一个4列归档页面模板，但我似乎无法正确显示帖子。我正在镜像Visual Composer的布局以匹配我的网站的其余部分。在看了Bootstrap 3网格布局中的Wordpress Loop帖子后，我已经能够接近以下代码：

<div class="wpb_row">
    <div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?> 
<?php
}
?>
    <div  class="vc_span3 wpb_column column_container">
        <div class="wpb_wrapper">
            <a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>
        </div> 
    </div> 
        </div> 
    </div> 
<?php    
if($i % 4 == 0) { ?> 
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
</div>
</div>

外部div wpb_row和col span_12每4列重复一次。目前，它在4列中显示帖子，但它们在一行中返回了4个以上的帖子（它们溢出到下一行）。理想情况下，布局如下：

<div class="wpb_row">
<div class="col span_12">
<div class="vc_span3 wpb_column column_container">
<!--Post #1 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #2 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #3 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #4 Content-->
</div>
</div>
</div>
<!--Repeat everything in wpd_row on next row starting at Post #5 and so on -->

有人能就如何纠正这一问题提供建议吗？提前谢谢。

您有这些if($i % 4 == 0)条件，但其中没有任何输出。你应该在其中一行中结束一行并开始另一行：

if($i % 4 == 0) { ?>
         </div>
    </div>
    <div class="wpb_row>
        <div class="col span_12>            
<?php }

还要确保考虑到第一行/最后一行。

我想明白了。对于任何正在寻找在4列行中显示自定义帖子类型循环的解决方案的人来说，如果返回的帖子数量为奇数，则在最后一篇帖子中添加一个类

<div class="wpb_row">
    <div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?> 
<?php
}
?>
    <div  class="vc_span3 wpb_column column_container <?php echo ($my_query->current_post + 1 === $my_query->post_count) && ($my_query->post_count % 2 != 0) ? ' classtoadd' : '' ?>">
        <div class="wpb_wrapper">
            <a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>
        </div> 
    </div> 
        </div> 
    </div> 
<?php    
if($i++ % 4 == 3) { ?>  
         </div>
    </div>
<div class="wpb_row">
    <div class="col span_12">
<?php
}
endwhile;
}
wp_reset_query();
?>
</div>
</div>