以 4 列布局显示 Wordpress 循环答案

【问题标题】：Display Wordpress Loop in 4 column layout以 4 列布局显示 Wordpress 循环
【发布时间】：2014-12-13 21:31:52
【问题描述】：

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

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

有人可以就如何纠正这个问题提供建议吗？提前致谢。

【问题讨论】：

标签： php wordpress grid custom-post-type archive

【解决方案1】：

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

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

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

【讨论】：

如何考虑第一行和最后一行？第一个只显示 1 列，接下来的行显示 4 列，最后一行是空的。
我可以通过将 if($i % 4 == 0) { ?> 替换为 if($i++ % 4 == 3) { ?> 并删除 endwhile 之前的最后一个 i++ 来使其正常工作。最后一期：如果最后一行仅包含 1 或 3 个帖子，我如何才能将一个类添加到最后一列？再次感谢您的帮助！

【解决方案2】：

我能够弄清楚。对于任何寻求在 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>

【讨论】：