图片轮播 data-slide-to="?"使用 WordPress PHP

Posted 2023-05-08

【中文标题】图片轮播 data-slide-to="?"使用 WordPress PHP

【英文标题】：Image Carousel data-slide-to="?" with WordPress PHP

【发布时间】：2014-09-20 09:26:02

【问题描述】：

我在 WordPress 中有一个自定义帖子类型，用于添加精选图片列表。 这些特色图片通过 WP_Query 被拉入 Bootstrap 轮播。

一切都很好：图像被拉得很好，如果存在缩略图，我已经设法让轮播指示器显示出来。我目前有 3 个自定义帖子类型。

我的问题是：通常（静态地）创建带有列表的轮播指示器，并且有一个 data-slide-to="0"、"1"、"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】：

您可以只使用一个 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>

【讨论】：

这太棒了！谢谢！我发现的唯一问题是第一个轮播指示器“0”不能用作选择该幻灯片的链接。

另外，使用轮播返回会丢失淡入/淡出。不确定这是否是我在此处粘贴的代码之前的问题。

此代码仅根据getbootstrap.com/javascript/#carousel 生成 html 标记。额外的问题可能与 JS 有关，您可以将链接发布到您的测试页面以便我检查吗？