不同行上的循环内有多个循环
问题描述:
我需要一个循环来调用称为'团队成员'的自定义帖子类型,它是'团队'的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 -->
答
退房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>
你不需要做3个独立的循环来获得3行。在你的循环之前,初始化一个计数器,比如'$ x = 0;',然后每次迭代你会像$ x ++那样增加$ x;然后你可以用if来检查你是否是5的倍数$ x%5 == 0)'和里面,如果把你的HTML结束/开始下一行。此外,当你在你的循环中,你可以写出你的隐藏的div内容,使用该计数器给每个唯一的ID,然后使用JavaScript做隐藏/显示。 – RightClick