WordPress的環路特殊的HTML輸出

Question

我想獲得一個特殊的WordPress循環HTML輸出：

<div id="main"> 

    <!-- Line number 1 --> 
    <div class="article-thumbnail" data-target="article-1" > 
     <div class="article-open"><img src="" /></div> 
    </div> 
    <div class="article-thumbnail" data-target="article-2" > 
     <div class="article-open"><img src="" /></div> 
    </div> 
    <div class="article-thumbnail" data-target="article-3" > 
     <div class="article-open"><img src="" /></div> 
    </div> 

    <div class="container"> 
     <article id="article-1" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 1 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 1 body</p>  
      </div> 
     </article> 
     <article id="article-2" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 2 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 2 body</p>  
      </div> 
     </article> 
     <article id="article-3" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 3 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 3 body</p>  
      </div> 
     </article> 
    </div> 


    <!-- Line number 2 --> 
    <div class="article-thumbnail" data-target="article-4" > 
     <div class="article-open"><img src="" /></div> 
    </div> 

    <div class="article-thumbnail" data-target="article-5" > 
     <div class="article-open"><img src="" /></div> 
    </div> 
    <div class="article-thumbnail" data-target="article-6" > 
     <div class="article-open"><img src="" /></div> 
    </div> 
    <div class="container"> 
     <article id="article-4" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 4 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 4 body</p>  
      </div> 
     </article> 
     <article id="article-5" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 5 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 5 body</p>  
      </div> 
     </article> 
     <article id="article-6" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article 6 text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article 6 body</p>  
      </div> 
     </article> 
    </div> 
</div> 

檢查此琴文件：http://jsfiddle.net/PkZrZ/5/得到什麼，我想實現的想法。

基本上，我想從Wordpress循環獲取的是1行3個縮略圖（精選文章的圖像），並且在它們之下爲每個縮略圖，每個縮略圖，之後的另一行等發佈條目。

我已經設法實現了某些目標，但說實話，這是令人難以置信的錯誤（一旦它工作了，事後它沒有），似乎是錯誤的。總之，這裏是WordPress的環我到目前爲止有：

<?php 
$post_array = array(); 
$i = 0; 
$j = 0; 
$index = 0; 
$post_total = $wp_query->post_count; // buggy 
/*$post_total = get_term_by('name','ventures','category'); 
$post_total = $post_total->count;*/ 
// echo $post_total; 
if (have_posts()) : while (have_posts()) : the_post(); 
    $i++; 
    // echo $i; 
    $post_array[] = get_object_vars($post); 
?> 
    <div id="post-ventures-image-<?php the_ID();?>" class="post-ventures-image"> 
     <?php the_post_thumbnail('hnp-thumb-ventures-180'); ?> 
    </div> 

    <?php if($i%3 == 0 && $post_total >= 3) : ?> 
     <?php for($j = 0; $j < 3; $j++) : ?> 

      <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article"> 
       <header class="article-header"> 
        <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3> 
       </header> <!-- end article header --> 
       <section class="entry-content clearfix"> 
        <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?> 
       </section> <!-- end article section --> 
      </article> <!-- end article --> 

     <?php endfor; $index = $index + $j; $j = 0; $post_total = $post_total - 3; $i = 0; ?> 

    <?php elseif($i%2 == 0 && $post_total == 2) : ?> 
     <?php for($j = 0; $j < 2; $j++) : ?> 

      <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article"> 
       <header class="article-header"> 
        <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3> 
       </header> <!-- end article header --> 
       <section class="entry-content clearfix"> 
        <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?> 
       </section> <!-- end article section --> 
      </article> <!-- end article --> 

     <?php endfor; $index = $index + $j ; $j = 0; $post_total = $post_total - 2; $i = 0; ?> 

    <?php elseif($i%1 == 0 && $post_total == 1) : ?> 
     <?php for($j = 0; $j < 1; $j++) : ?> 

      <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article"> 
       <header class="article-header"> 
        <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3> 
       </header> <!-- end article header --> 
       <section class="entry-content clearfix"> 
        <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?> 
       </section> <!-- end article section --> 
      </article> <!-- end article --> 

     <?php endfor; $index = $index + $j + 1; $j = 0; $i = 0; ?> 

    <?php endif;?> 
    <?php endwhile; ?> 
    <?php endif; ?> 

我認爲這是免談，這最糟糕的improvized編碼見過。 如果任何人都可以寫我就怎麼寫循環，將膨脹:)

Answer 1

更新快速標記：

$posts = get_posts(); 
    $first_three = array_chunk($posts, 3); 
    $count = 0; 
    foreach($first_three as $posts){ 
     foreach($posts as $post){?> 
     <div class="article-thumbnail" data-target="article-1" > 
      <div class="article-open"><?php echo $post->post_title; ?></div> 
     </div><?php 
     }?> 
    <div class="container"><?php 
    foreach($posts as $post){$count++?> 
     <article id="article-<?php echo $count; ?>" class="article-entry"> 
      <header class="article-header"> 
       <h2>This is the article <?php echo $count; ?> text</h2>  
      </header> 
      <div class="article-body"> 
       <p>This is the article <?php echo $count; ?> body</p>  
      </div> 
     </article><?php 
    }?> 
    </div><?php 
    } 

工作非常適合我，只是改變什麼u需要標記或數組。