我在WordPress中有一个自定义的帖子类型来添加一个特色图像列表。这些特色图像通过WP_Query被拉入Bootstrap旋转木马。
一切都很好:图像被拉得很好,我已经设法让旋转木马指标显示,如果缩略图存在。我目前有3个自定义的帖子类型。
我的问题是:通常(静态)会创建带有列表的旋转指示器,并且有data-slide-to="0","1","2"等,以便您单击指示器以查看每个指示器的幻灯片。
当使用WordPress和PHP时,我如何设置它,使它知道根据幻灯片的数量从零自动计数?
在下面的代码中,它是手动设置的,对于1和2可以正常工作,但是添加的任何幻灯片都将以数字1作为其data-slide-to - number。
<div class="featured-carousel">
<div class="carousel-shadow">
<div id="carousel-home-featured" class="carousel-fade slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 1
));
while ( $items->have_posts() ) :
$items->the_post();
?>
<?php
if ( '' != get_the_post_thumbnail() ) { ?>
<li data-target="#carousel-home-featured" data-slide-to="0" class="active"></li>
<?php } else { ?>
<?php } ?>
<?php endwhile; ?>
<?php
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 10,
'offset' => -1,
));
while ( $items->have_posts() ) :
$items->the_post();
?>
<?php
if ( '' != get_the_post_thumbnail() ) { ?>
<li data-target="#carousel-home-featured" data-slide-to="1"></li>
<?php } else { ?>
<?php }
?>
<?php endwhile; ?>
</ol>
<div class="carousel-inner">
<?php
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 1
));
while ( $items->have_posts() ) :
$items->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$custom = get_post_custom($post->ID);
$link = $custom["more-link"][0];
?>
<div class="item active" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
<?php endwhile; ?>
<?php
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 10,
'offset' => -1,
));
while ( $items->have_posts() ) :
$items->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$custom = get_post_custom($post->ID);
$link = $custom["more-link"][0];
?>
<div class="item" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
您可以使用一个WP_Query调用来做到这一点,并且通过将'meta_key' => '_thumbnail_id'
参数传递给WP查询,实际上只获取具有特色图像的项目。我将修改你的代码为:
<?php
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 10,
'meta_key' => '_thumbnail_id'
));
$count = $items->found_posts;
?>
<div class="featured-carousel">
<div class="carousel-shadow">
<div id="carousel-home-featured" class="carousel-fade slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-home-featured" data-slide-to="0" class="active"></li>
<?php for($num = 1; $num < $count; $num++){ ?>
<li data-target="#carousel-home-featured" data-slide-to="<?php echo $num; ?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner">
<?php
$ctr = 0;
while ( $items->have_posts() ) :
$items->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$custom = get_post_custom($post->ID);
$link = $custom["more-link"][0];
$class = $ctr == 0 ? ' active' : '';
?>
<div class="item<?php echo $class; ?>" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
<?php $ctr++;
endwhile; ?>
</div>
</div>
</div>
</div>