Products
GG网络技术分享 2025-03-18 16:12 2
I want to create a loop for wordpress that returns each two posts inside its own div and alternating columns every new row (see example)... Im not experimented in php enough to make this happen. I dont manage to get it working appropiatly. And see how to make the last div to bee 100% width if it does not have another column.
I would appreciate your support to make this happen since I tried many things and still no luck. (im using visual composer bootstrap classes, it does work but not as expected.This is the example I want to create
This is my code:
<?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]Try this:
<?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(); ?>
Demand feedback