不同行上的循环内有多个循环

我需要一个循环来调用称为'团队成员'的自定义帖子类型，它是'团队'的slu g。团队成员以五行显示，每个成员包含自己的头像，并在切换列表中的单独DIV外侧下拉切换内容。我已经写出了一个基本的循环结构，我不确定它是否是最好的或正确的方法。有人能帮助我吗？不同行上的循环内有多个循环

    /* ROW 1 */ 

       query_posts('showposts=5'); 
       $ids = array(); 

       /* Loop 1 A - displays the row of avatars */ 
       while (have_posts()) : the_post(); 
        $ids[] = get_the_ID(); 
        the_title(); 
       endwhile; 

       /* Loop 1 B - displays the slide down content in new row for each avatar above */ 
       while (have_posts()) : the_post(); 
        $ids[] = get_the_ID(); 
        the_content(); 
       endwhile; 



       /* ROW 2 */ 

       //Write code to do second row if number posts greater than 5. 
       //If post greater than 5 do... 

       /* Loop 2 A - displays the row of avatars */ 
       query_posts(array('post__not_in' => $ids, 'showposts=5'); 

       while (have_posts()) : the_post(); 
        the_title(); 
       endwhile; 

       /* Loop 2 B - displays the slide down content in new row for each avatar above */ 
       while (have_posts()) : the_post(); 
        the_content(); 
       endwhile; 



       /* ROW 3 */ 

       //Write code to do third row if number posts greater than 15. 
       //If post greater than 10 do... 

       /* Loop 3 A - displays the row of avatars */ 
       $ids_row_two = query_posts(array('post__not_in' => $ids)); 
       $ids_row_three = query_posts(array('post__not_in' => $ids_row_three)); 
       query_posts(array('post__not_in' => $ids_row_three, 'showposts=5')); 

       while (have_posts()) : the_post(); 
        $ids[] = get_the_ID(); 
        the_title(); 
       endwhile; 

       /* Loop 3 B - displays the slide down content in new row for each avatar above */ 
       while (have_posts()) : the_post(); 
        $ids[] = get_the_ID(); 
        the_content(); 
       endwhile;

下面是HTML的结构我想输出...

<!-- row 1 --> 
       <!-- Avatars --> 
       <div class="member_block"> 
        <div class="container avatars"> 

        <!-- avatar 1 ---> 
         <div id="show_ryan" class="box five columns" data-target="#member_ryan"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.png"> 
           <h4 class="name">Ryan</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.jpg"> 
          </div> 
         </div> 

        <!-- avatar 2 ---> 

         <div id="show_brian" class="box five columns" data-target="#member_brian"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/brian.png"> 
           <h4 class="name">Brian</h4> 
           <p class="position">Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/brian.jpg"> 
          </div> 
         </div> 

        <!-- avatar 3 ---> 

         <div id="show_emma" class="box five columns" data-target="#member_emma"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/emma.png"> 
           <h4 class="name">Emma</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/emma.jpg"> 
          </div> 
         </div> 

        <!-- avatar 4 ---> 

         <div id="show_john" class="box five columns" data-target="#member_john"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/john.png"> 
           <h4 class="name">John</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/john.jpg"> 
          </div> 
         </div> 

        <!-- avatar 5 ---> 

         <div id="show_neil" class="box five columns" data-target="#member_neil"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/neil.png"> 
           <h4 class="name">Neil</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/neil.jpg"> 
          </div> 
         </div> 

        </div><!-- container --> 

       <!-- each team member's slide down content --> 
        <div class="member_row"> 
         <div class="container"> 

        <!-- avatar 1 content ---> 

          <div id="member_ryan" class="member-info"> 
           <? the_content(); ?> 
          </div><!-- //Ryan --> 

        <!-- avatar 2 content ---> 

          <div id="member_brian" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 3 content ---> 

          <div id="member_emma" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 4 content ---> 

          <div id="member_john" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 5 content ---> 

          <div id="member_neil" class="member-info"> 
           <? the_content(); ?> 
          </div> 
         </div><!-- .container --> 
        </div><!-- .member_row --> 

<!-- row 2 --> 
       <!-- Avatars --> 
       <div class="member_block"> 
        <div class="container avatars"> 

        <!-- avatar 1 ---> 
         <div id="show_ryan" class="box five columns" data-target="#member_ryan"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.png"> 
           <h4 class="name">Ryan</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/ryan.jpg"> 
          </div> 
         </div> 

        <!-- avatar 2 ---> 

         <div id="show_brian" class="box five columns" data-target="#member_brian"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/brian.png"> 
           <h4 class="name">Brian</h4> 
           <p class="position">Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/brian.jpg"> 
          </div> 
         </div> 

        <!-- avatar 3 ---> 

         <div id="show_emma" class="box five columns" data-target="#member_emma"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/emma.png"> 
           <h4 class="name">Emma</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/emma.jpg"> 
          </div> 
         </div> 

        <!-- avatar 4 ---> 

         <div id="show_john" class="box five columns" data-target="#member_john"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/john.png"> 
           <h4 class="name">John</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/john.jpg"> 
          </div> 
         </div> 

        <!-- avatar 5 ---> 

         <div id="show_neil" class="box five columns" data-target="#member_neil"> 
          <div class="avatar avatar-on-hidden"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/neil.png"> 
           <h4 class="name">Neil</h4> 
           <p class="position">Creative Director</p> 
          </div> 
          <div class="avatar2 avatar-on-hover"> 
           <img src="<?php bloginfo('template_directory'); ?>/img/team/neil.jpg"> 
          </div> 
         </div> 

        </div><!-- container --> 

       <!-- each team member's slide down content --> 
        <div class="member_row"> 
         <div class="container"> 

        <!-- avatar 1 content ---> 

          <div id="member_ryan" class="member-info"> 
           <? the_content(); ?> 
          </div><!-- //Ryan --> 

        <!-- avatar 2 content ---> 

          <div id="member_brian" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 3 content ---> 

          <div id="member_emma" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 4 content ---> 

          <div id="member_john" class="member-info"> 
           <? the_content(); ?> 
          </div> 

        <!-- avatar 5 content ---> 

          <div id="member_neil" class="member-info"> 
           <? the_content(); ?> 
          </div> 
         </div><!-- .container --> 
        </div><!-- .member_row --> 
       </div><!-- .member_block -->

来源

2015-05-19 Amesey

你不需要做3个独立的循环来获得3行。在你的循环之前，初始化一个计数器，比如'$ x = 0;'，然后每次迭代你会像$ x ++那样增加$ x;然后你可以用if来检查你是否是5的倍数$ x％5 == 0）'和里面，如果把你的HTML结束/开始下一行。此外，当你在你的循环中，你可以写出你的隐藏的div内容，使用该计数器给每个唯一的ID，然后使用JavaScript做隐藏/显示。 – RightClick

退房WP的使用WP_QUERY多个循环引用。看完你的代码后，你不正确地查询WordPress表格。

尝试这种情况：

$args = array(
    'post_type' => 'team', 
    'post_status' => 'publish' 
); 

$the_query = new WP_Query($args); 

if($the_query->have_posts()); 

while($the_query->have_posts()) : $the_query->the_post(); 
?> 
<h1 class="entry-title"> 
    <?php the_title(); ?> 
</h1> 
<div class="content"> 
    <?php the_content(); ?> 
</div> 
<?php 

endwhile;

wp_reset_postdata（）;

然后，您可以重复上面的循环，只需将变量重命名为$ the_query2即可。

编辑 - 忘了添加wp_rest_postdata（），这样做是重置循环，并允许您运行第二个。

编辑2 - 这是更新后的代码，使用此代码，您应该能够修改代码以适合您的需求，因为我不打算为您编写整个页面。还请确保您的theme supports thumbnails。

<div class="avatar_block"> 
    <div class="container"> 
     <?php 
      // Query for Member Info 
      $args = array(
       'post_type' => 'team', 
       'post_status' => 'publish' 
      ); 

      $the_query = new WP_Query($args); 
      if ($the_query->have_posts()) 
       ; 

      while ($the_query->have_posts()) : $the_query->the_post(); 
     ?> 

      <div id="<?php the_tags(); ?>" class="box five_columns"> 
       <?php echo get_the_post_thumbnail(); ?> 
       <h4 class="name"><?php the_title(); ?></h4> 
       <?php the_content(); ?> 
      </div> 

     <?php 
      endwhile; 
      wp_reset_postdata(); 
     ?> 
    </div> 
</div> 
<div class="member_block"> 
    <div class="container"> 
     <?php 
      // Query for Member Info 
      $args2 = array(
       'post_type' => 'team', 
       'post_status' => 'publish' 
      ); 

      $the_query2 = new WP_Query($args2); 
      if ($the_query2->have_posts()) 
       ; 

      while ($the_query2->have_posts()) : $the_query2->the_post(); 
     ?> 

      <div id="<?php the_tags(); ?>" class="member_info"> 
       <?php the_content(); ?> 
      </div> 

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

来源

2015-05-19 14:51:36 Geoffrey

谢谢杰弗里这指出我在正确的方向，但没有解决我如何拆分头像形式向下滑动的内容需要在不同的容器div进一步根据我的html结构。所以头像和标题不会在while循环中。那有意义吗？ – Amesey

你在哪里放置头像？它是自定义帖子类型（CPT）的一部分吗？如果是这样，那么你不需要一个单独的头像循环。上面的循环将从CPT中提取所有内容，您只需告诉循环所需的内容并将其包装在div中即可。 – Geoffrey

我已将注释添加到html结构中，以便您可以看到我的意思。所有的头像都在一个div中，下面的每个头像都会出现下滑的内容。 – Amesey

不同行上的循环内有多个循环

回答

相关问题