不同行上的循环内的多个循环答案

【问题标题】：Multiple loops within loops on different rows不同行上的循环内的多个循环
【发布时间】：2015-05-19 14:36:22
【问题描述】：

我需要一个循环来调用名为“团队成员”的自定义帖子类型，其中的 slug 是“团队”。团队成员以五行显示，每个成员由自己的头像组成，并在头像列表之外的单独 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 -->

【问题讨论】：

您不需要执行 3 个单独的循环来获得 3 行。在你的循环之前，初始化一个计数器，比如$x=0;，然后每次迭代你都会像$x++;一样增加$x，然后你可以用if($x%5==0)检查你是否在5的倍数上，如果把你的html 结束/开始下一行。此外，当您在循环中时，您可以写出隐藏的 div 内容，使用该计数器为每个内容分配一个唯一的 id，然后使用 javascript 进行隐藏/显示。

标签： php wordpress loops

【解决方案1】：

查看 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>

【讨论】：

感谢 Geoffrey，这为我指明了正确的方向，但没有解决我如何将头像从向下滑动的内容中拆分出来，根据我的 html 结构，该内容需要位于不同的容器 div 中。所以头像和标题不会在同一个while循环中。这有意义吗？
你把头像放在哪里了？它是自定义帖子类型 (CPT) 的一部分吗？如果是这样，那么您不需要为头像设置单独的循环。上面的循环将从 CPT 中提取所有内容，您只需告诉循环您想要什么内容并将其包装在一个 div 中。
我已将 cmets 添加到 html 结构中，以便您了解我的意思。所有头像都在一个 div 中，每个头像的向下滑动内容显示在下面的单独 DIV 中。