我在WordPress中有一个自定义帖子类型,可以添加精选图片列表。 这些特色图像通过WP_Query拉入Bootstrap轮播。
一切都很好:图片被拉得很好,我设法让旋转木马指示器显示是否存在缩略图。我目前在自定义帖子类型中有3个。
我的问题是:通常(静态地)可以创建带有列表的轮播指示符,并且存在数据 - 幻灯片 - =" 0"," 1",& #34; 2"等允许您单击指示器以查看每个指示器的幻灯片。
使用WordPress和PHP时,如何设置它以便根据幻灯片的数量自动从零开始计算?
在下面的代码中,它是手动设置的,适用于1和2,但是添加的任何幻灯片都会将数字1作为数据滑动到数字。
<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>
答案 0 :(得分:1)
您只需使用一个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>