Image Carousel data-slide-to="?" with WordPress PH - Image Carousel data-slide-to="?" with WordPress PHP

我在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>