在循环中每三个项目后添加div? [英] Add div after every three items in a loop?
问题描述
我正在使用WP网站,在我的模板中,我正在像这样运行循环:
I am working with a WP website and in my template I am running the loop like this:
<!-- START LOOP -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<div class="eight columns">
<h3><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h3>
<p><?php the_excerpt() ?></p>
<p><a href="<?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?>" target="_blank"><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></a></p>
</div>
</div>
</div>
<hr />
<?php endwhile; ?>
因为这是一个响应式网站,所以我试图获得一个网格列外观.我遇到的问题是如何在每第三个项目之后插入带有类或行容器"的div?
Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or "row container" after every third item?
我知道我可能只是把您的废话弄糊涂了,因为我混淆了自己,但总之HTML看起来像这样:
I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this:
<div class="row container">
<!-- item 1 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 2 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 3 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 4 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
</div>
依此类推,相反,我希望它显示在网格中,因此HTML应该看起来更像这样:
and so on, instead I would like it to display in a grid so the HTML should look more like this:
<div class="row container">
<!-- row 1 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 1 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 2 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 3 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
<!-- row 2 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 4 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 5 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 6 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
</div>
我可以做其他所有事情,只是不确定如何实现下面的内容,因此得到上面粘贴的结果吗?我在网上找到了这个,觉得这是朝正确方向迈出的一步:
I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction:
<?php ($i % 3) == 0 ?>
推荐答案
您的感觉是正确的.
您可以使用 WP_Query
类的$current_post
属性来获取索引当前在循环中显示的帖子,然后使用模运算符确保您定位的是三个的倍数.
You can use the $current_post
property of the WP_Query
class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.
所以您的循环看起来像这样:
So your loop could look like this:
<div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>
<!-- item -->
<div class="four columns">IMAGE HERE</div>
<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>
您可能需要改进此实现.具体来说,请确保无论发生什么情况,您的HTML都能正确关闭.
You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.
这篇关于在循环中每三个项目后添加div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!