循环中有2种不同的帖子布局

时间:2016-10-13 00:30:53

标签: php wordpress twitter-bootstrap-3

我刚创建了BEAUTIFUL循环

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div class="row sectionrow" onclick="void(0)">
 <div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
  <div class="textsmall" >
 <?php the_field(titlebreak); ?>
    </div>
 </div>
 <div class="col-sm-8">
  <div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
     <div class="textbigrecipes">  
        <div class="inner">
    <?php the_excerpt(); ?> 
       <a href="<?php the_permalink(); ?>"><button type="button" class="btn btn-default">READ MORE</button></a>
        </div>
     </div>
  </div>
 </div>
 </div>
</div>

但是我想在第二篇文章中反转bootstrap div的位置并返回第三篇的原始文件......

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="row sectionrow" onclick="void(0)">
  <div class="col-sm-8">
  <div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
     <div class="textbigrecipes">  
        <div class="inner">
    <?php the_excerpt(); ?> 
       <a href="<?php the_permalink(); ?>"><button type="button" class="btn btn-default">READ MORE</button></a>
        </div>
     </div>
   </div>
  </div>
   </div>
    <div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
  <div class="textsmall" >
 <?php the_field(titlebreak); ?>
    </div>
 </div>

</div>

有可能吗?

1 个答案:

答案 0 :(得分:0)

1. First declare a variable Outside the loop (like as $i =1), 
  1. 然后检查条件。     我的模式

    example: 
    if($i% 2 == 0) {
    
    -----layout First code-----
    
    }else
    {
    
    -----layout Second code-----
    } 
    
  2. 增加变量值($ i ++)