php - 带有引导行问题的 ACF 中继器循环
问题描述
我正在尝试连续输出 3 个帖子,如果超过 3 个则移动到下一行。如果帖子数量不是 3 的倍数,则需要关闭该行。目前,此代码下的内容正在中断,具体取决于有多少帖子(该行没有按应有的方式关闭)。
<div class="choose-style">
<h2>Choose a style</h2>
<?php
$f = 1;
//Start loop
$loop = new WP_Query( array( 'post_type' => 'styles', 'orderby' => 'date', 'order' => 'ASC', 'posts_per_page' => '6' ) );
if ( $loop->have_posts() ) : ?>
<!-- Wrapper for slides -->
<div class="image-grid-wrapper">
<?php while ( $loop->have_posts() ) : $loop->the_post();
if ($f == 1) { ?>
<div class="row">
<?php } ?>
<div class="col-sm-4">
<div class="image-grid-item">
<?php
$carousel = get_field('styles_slider');
$first = $carousel[0]['image'];
if ($first != NULL) {
$image = $first['sizes']['medium'];
} else {
$image = get_template_directory_uri() . "/assets/img/placeholder.png";
}
?>
<div class="image-wrapper">
<a href="<?php the_permalink(); ?>">
<div class="image" style="background-image: url('<?php echo $image; ?>')">
<div class="overlay">
<div class="overlay-inner">
<p><?php the_title(); ?></p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<?php if ($f == 3 ) { ?>
</div>
<?php $f = 1; continue; };
$f++; ?>
<?php endwhile; endif;
if($f < 3) { ?>
</div><!--END OF POSTS -->
<?php }; wp_reset_postdata(); ?>
</div><!-- end image grid wrapper -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<?php the_field('choose_style_text'); ?>
</div>
</div>
</div><!-- end choose-style -->
任何帮助将不胜感激,谢谢!
解决方案
这个怎么样……换
if ($f == 1) { ?>
<div class="row">
<?php } ?>
To(如果 $f 是 1 或 4、7、10 等开始行)
if ($f == 1 || ($f-1)%3 == 0) { ?>
<div class="row">
<?php } ?>
并改变
<?php if ($f == 3 ) { ?>
</div>
<?php $f = 1; continue; };
To(如果 $f 可以被 3 整除,则关闭该行)
if ($f%3 === 0) { ?>
</div>
<?php } ?>
推荐阅读
- swift - 在uitableview swift中同时添加两行
- angular - 未知字段结果接口
- youtube - 如何使用新标签制作 youtube 订阅按钮并在关闭窗口后获取值?
- reactjs - 阻止 FlowType 检查 node_modules 中的错误
- kotlin - 当公证人生成其节点信息时,在corda中构建失败
- db2 - 获取有关架构、表、主键的信息
- java - Spring boot 字段需要一个找不到类型的 bean
- java - Google zxing api无法解码条形码
- php - 获取最后一条推文 Twitter api
- android-testing - Android Robolectric 检查编辑文本是否显示错误消息