Множество циклов в циклах в разных строках

Мне нужен цикл, который вызывает особый тип сообщения, называемый «членами команды», для пула, для которого «команда». Члены команды отображаются в строках по пять с каждым членом, состоящим из собственного аватара, и спускаются вниз, чтобы переключить содержимое в отдельной стороне 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 ++;', тогда вы можете проверить, есть ли у вас кратное 5 с 'if ($ x% 5 == 0) 'и внутри, если положить html для завершения/начала следующей строки. Кроме того, пока вы находитесь в своем цикле, вы можете записать свой скрытый контент div, используя этот счетчик, чтобы дать каждому уникальный идентификатор, а затем использовать 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.

EDIT - Забыл добавить 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, при этом снижается содержимое, которое появляется для каждого аватара в отдельном DIV ниже. – Amesey

Множество циклов в циклах в разных строках

ответ

Смежные вопросы