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

我认为这是有史以来最糟糕的即兴编码。 如果有人可以给我写一个关于如何编写会膨胀的循环的快速标记:)

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
  }

非常适合我，只需更改您需要的任何标记或数组。