douqianmin5367
douqianmin5367
2018-02-18 15:56

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

已采纳

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();  ?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douyanjing8287 douyanjing8287 3年前

    [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(); ?>
    点赞 评论 复制链接分享
提交

为你推荐