WordPress中不同div區塊的每一秒帖子

Question

假設我有兩種風格。樣式1和樣式2 我想顯示每一個奇數後在款式風格1個偶數柱2,4

下面是我的模板文件：

<?php /* Template Name: Home v2 */ get_header(); ?> 
<main role="main"> 
    <!-- section --> 
    <section> 
     <?php 
     $temp = $wp_query; $wp_query= null; 
     $wp_query = new WP_Query(); $wp_query->query('showposts=' . $theme_options['blog-post-per-page'] . '&paged='.$paged); 
     while ($wp_query->have_posts()) : $wp_query->the_post(); ?> 

     <div class="tiles-block w-clearfix"> 
      <div class="float-left"> 
       <div class="content-block w-clearfix"> 
        <h5 class="black travel"><?php echo the_category();?></h5> 
        <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
        <div class="date-block w-container"> 
         <div class="black mini-date"> <?php echo get_the_date(); ?></div> 
         <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>"> 
         <div class="black mini-date">32</div> 
         <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>"> 
         <div class="black mini-date">14</div> 
        </div> 
        <div class="black iltalica"><?php the_excerpt(); ?></div> 
        <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a> 
       </div> 
      </div> 
      <div class="float-left natural-forest"> 
       <div class="thumb"> 
        <?php the_post_thumbnail('full'); ?> 
       </div> 
      </div> 
      <img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" /> 
     </div> 

     <?php endwhile; ?> 
     <?php wp_reset_postdata(); ?> 

上面的代碼工作良好。但它只給出了樣式1. 我已經爲樣式2設置了html，但不知道如何在上面的代碼中實現。

這是我的藍紫魅力塊

<div class="tiles-block w-clearfix"> 
       <div class="float-right"> 
        <div class="content-block w-clearfix"> 
         <h5 class="black photography">PHOTOGRAPHY</h5> 
         <h1 class="black mastheading">title test</h1> 
         <div class="date-block w-container"> 
          <div class="black mini-date">October 26, 2016</div> 
          <img class="mini-icon" src="http://aa.com/aa.png"> 
          <div class="black mini-date">15</div> 
          <img class="mini-icon" src="http://bb.com/bb.png"> 
          <div class="black mini-date">13</div> 
         </div> 
         <div class="black iltalica">Lorem Ipsuim dolor....</div> 
         <a class="a8 cta w-button" href="#">continue reading</a></div> 
        </div> 
       <div class="float-left window-light"> 
        <div class="thumb"> 
         <img src="<?php echo get_template_directory_uri() . '/images/post2.png' ?>" /> 
        </div> 
       </div> 
       <img class="left-arrow" src="http://cc.com/cc.png"> 
      </div> 

Answer 1

這將讓PHP中的有點亂，因爲你需要if語句數。你可能會考慮將一些內部div命名爲相同的，並且只讓外部div具有不同的名稱，並在CSS中完成更多的工作。也就是說，你可以這樣做：

設置一個標誌，每次都在循環中改變，並在輸出HTML之前檢查標誌的值。

$style_flag = 1; 
while ($wp_query->have_posts()) : $wp_query->the_post(); 
    //check the value 
    if ($style_flag == 1){ 
     // output style 1 
    } else { 
     // output style 2 
    } 
    // do everything else you need to do in the loop 

    // switch the value of the flag 
    $style_flag = $style_flag * -1; 
end while; 

回到CSS一會兒，雖然。如果您不熟悉它，請查看第n個子選擇器：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

我找到了解決我的問題的方法。

<?php query_posts('showposts=0'); ?>   
      <?php 

      $i = 1; 
      ?> 
      <?php if (have_posts()) : ?> 
      <?php while (have_posts()) : the_post(); ?> 
      <?php if(($i % 2) == 0) { ?> 
      <div class="tiles-block w-clearfix"> 
       <div class="float-right"> 
        <div class="content-block w-clearfix"> 
         <h5 class="black photography"><?php echo the_category();?></h5> 
         <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
         <div class="date-block w-container"> 
          <div class="black mini-date"><?php echo get_the_date(); ?></div> 
          <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>"> 
          <div class="black mini-date">32</div> 
          <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>"> 
          <div class="black mini-date">14</div> 
         </div> 
         <div class="black iltalica"><?php the_excerpt(); ?></div> 
         <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a></div> 
        </div> 
       <div class="float-left window-light"> 
        <div class="thumb"> 
         <?php the_post_thumbnail('full'); ?> 
        </div> 
       </div> 
       <img class="left-arrow" src="<?php echo get_template_directory_uri() . '/images/left-arrow.png' ?>"> 
      </div> 
      <?php } elseif (($i % 2) !== 0) { ?> 

      <div class="tiles-block w-clearfix"> 
       <div class="float-left"> 
        <div class="content-block w-clearfix"> 
         <h5 class="black travel"><?php echo the_category();?></h5> 
         <h1 class="black mastheading"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
         <div class="date-block w-container"> 
          <div class="black mini-date"><?php echo get_the_date(); ?></div> 
          <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>"> 
          <div class="black mini-date">32</div> 
          <img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>"> 
          <div class="black mini-date">14</div> 
         </div> 
         <div class="black iltalica"><?php the_excerpt(); ?></div> 
         <a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a> 
        </div> 
       </div> 
       <div class="float-left natural-forest"> 
        <div class="thumb"> 
         <?php the_post_thumbnail('full'); ?> 
        </div> 
       </div> 
       <img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" /> 
      </div> 


      <?php } ?> 
       <?php $i++; ?> 
       <?php endwhile; ?> 
      <?php endif; ?>