[英]WordPress loop alternate rows and columns each two posts with bootstrap
我想为wordpress创建一个循环,该循环返回其自己的div中的每两个帖子,并在每个新行中交替显示列(请参见示例)...我没有在php中进行足够的实验来实现此目的。 我没有设法使其正常工作。 并查看如果没有另一个列,如何使最后一个div的蜂宽度达到100%。
由于我尝试了很多事情,但仍然没有运气,因此,感谢您的支持,以实现这一目标。 (即使用Visual Composer引导程序类,它确实可以工作,但没有达到预期的效果。这是我要创建的示例
这是我的代码:
<?php
$args = array(
'posts_per_page' => '-1',
'post_type' => 'inversion',
'category_name' => '',
'order' => 'DESC',
'orderby' => 'DATE'
);
$the_query = new WP_Query( $args );?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="vc_row">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; $imagen = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<?php if(($i % 2) == 2) : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
</div>
</div>
<?php else : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php endif; endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
[EDIT]尝试一下:
<?php
$args = array(
'posts_per_page' => '-1',
'post_type' => 'inversion',
'category_name' => '',
'order' => 'DESC',
'orderby' => 'date',
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="vc_row">
<?php
$float_class = '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
if ( $the_query->current_post &&
$the_query->current_post % 2 === 0 ) {
$float_class = $float_class ? '' : 'vc_pull-right';
}
$imagen = get_the_post_thumbnail_url( get_the_ID(), 'full' );
?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-der <?php echo $float_class; ?>">
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url('<?php echo esc_url( $imagen ); ?>') no-repeat; background-size:cover;">
</div>
</div>
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php endwhile; // end have_posts() loop ?>
</div><!-- .vc_row -->
<?php endif; // end have_posts() check ?>
<?php wp_reset_query(); ?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.