不同行上的循環內有多個循環

我需要一個循環來調用稱爲'團隊成員'的自定義帖子類型，它是'團隊'的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

不同行上的循環內有多個循環

回答

相關問題