Jeder zweite Beitrag in verschiedenen Div-Block in WordPress

Question

Lassen Sie uns sagen, ich habe 2 Stile. Style 1 und Art 2 Ich möchte jede ungerade Zahl des im Stil 1 und gerade Zahl Beiträge in der Art zeigen 2

Unten ist mein Template-Datei:

<?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(); ?> 

Der obige Code funktioniert gut. aber es gibt nur Stil 1. Ich habe bereits HTML-Setup für Stil 2, aber weiß nicht, wie Sie in den Code oben implementieren.

Das ist mein style2 Block

<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

Dies wird ein wenig chaotisch in PHP bekommen, weil Sie mehr if-Anweisungen benötigen würden. Sie könnten erwägen, einige der inneren Divs gleich zu benennen und nur den äußeren Divs andere Namen zu geben und mehr von der Arbeit in CSS zu erledigen. Das heißt, hier ist, wie Sie es tun würden:

Setzen Sie ein Flag, das jedes Mal durch die Schleife ändert, und überprüfen Sie den Wert des Flags, bevor Sie Ihre HTML ausgeben.

$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; 

Zurück zu CSS für einen Moment, obwohl. Schauen Sie sich den n-ten Kind-Selektor an, wenn Sie sich noch nicht damit auskennen: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

Ich habe die Lösung für mein Problem gefunden.

<?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; ?>