网站优化

网站优化

Products

当前位置:首页 > 网站优化 >

WordPress循环交替行和列每两个帖子与bootstrap

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

enter image description here

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