Image Carousel data-slide-to =“?”用WordPress PHP

时间:2014-07-29 03:54:55

标签: php wordpress twitter-bootstrap carousel

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

1 个答案:

答案 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>