Каждый второй пост в другом блоке div в WordPress

Question

Предположим, у меня есть 2 стиля. Стиль 1 и 2 типа Я хотел бы показать каждый нечетный номер пост в стиле 1 и даже сообщения номер в стиле 2

Ниже мой файл шаблона:

<?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. У меня уже есть html-настройка для стиля 2, но не знаю, как реализовать в коде выше.

Это мой блок style2

<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, потому что вы должны были бы несколько, если заявления. Вы можете подумать о том, чтобы назвать некоторые из внутренних divs одинаковыми и сделать только внешние divs разными именами и выполнять большую часть работы в 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 на мгновение. Проверьте селектор nth-child, если вы еще не знакомы с ним: 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; ?>