如何解决 Wordpress 的 Bootstrap 轮播缩略图中的项目活动和数据源部分？

Posted 2023-03-06

【中文标题】如何解决 Wordpress 的 Bootstrap 轮播缩略图中的项目活动和数据源部分？

【英文标题】：How to solve item active and datasource part in Bootstrap carousel thumbnail for Wordpress?

【发布时间】：2014-08-27 19:18:00

【问题描述】：

我只是尝试为我的产品滑块添加一个带有缩略图的引导驱动轮播。一些我如何能够为主图像（大图像）做到这一点，但我无法解决缩略图部分的问题。

这是我正在尝试更改为 Wordpress 的 html 版本 http://codepen.io/RetinaInc/pen/rxksh

顶部现在可以工作了，所以我尝试了类似的缩略图滑块部分的方法，但无法修复它 按原样运行下面的代码会产生语法错误，因此请删除缩略图部分并将其替换为 html 然后主滑块起作用。但我希望缩略图滑块可以使用它。

<?php get_header();?>
  <div class="container">
  <div class="content">
  <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
      <?php
          $image_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
          $attachments = get_posts( $image_args );

          if ( $attachments ) 
              $i = 1;
              foreach ( $attachments as $attachment ) ?>

                <div class=
                  <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) 
                      echo 'active';
                    
                    $i++;
                    echo '"';
                    ?>>
                <?php
                    echo wp_get_attachment_image( $attachment->ID, 'image' );
                    ?>
                </div>
                <?php

              

              



      ?>

            </div>
        </div>

        <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">

                <?php
                $thumb_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
                $thumb_attachments = get_posts( $thumb_args );
                 if ( $thumb_attachments ) 
              $i = 1;
              foreach ( $thumb_attachments as $thumbattachment ) ?>

              <?php

                

                ?>
              <?php

                if (($count % 4) == 0) 
                    
                ?>
                    <div class=
                    <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) 
                      echo 'active';
                    
                    $i++;
                    echo '"';
                    ?>> 
                    <?php $count= 1;?>
                    <div data-target="#carousel" data-slide-to="<?php echo $count++; ?>" class="thumb"><img src="img/doubleRound/front_side.JPG"  ></div>

                    <?php $count++;?>
                    </div><!-- /item -->

                <?php
                    
                ?>


            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
      </div> 



    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
                <div class="item active ">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item ">
                    <img class="image" src="img/doubleRound/top.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/bottom.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front_side.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
            </div>
        </div> 
    <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG"  ></div>
                </div><!-- /item -->
                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG"  ></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG"  ></div>
                </div><!-- /item -->
            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <h2>Products</h2>
             <h3><?php the_title_attribute(); ?>: </h3>
        <p><?php the_content(); ?></p>


    </div> <!-- /col-sm-6 -->
            <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
  </div> <!-- /row -->
  </div>
</div> <!-- /container -->

<?php get_footer();?>

【问题讨论】：

你在哪里为“$current_featured_image_id”赋值？？不应该是“get_post_thumbnail_id()”吗？ '排除' => get_post_thumbnail_id(),

@wingskush 在这种情况下不需要它。所以我离开了。实际上它只是从轮播中排除了特色图片。

">"??你为什么要把这个复杂化？ @wingskush 你想得到想法，或者你认为它没用。该代码仅将活动类回显到第一个元素。你知道替代品吗？ 如果与它无关，为什么会存在这个循环？你刚刚随机关闭它？ foreach ( $thumb_attachments 作为 $thumbattachment ) ?>

【参考方案1】：

如果您按照wingskush 建议的添加另一个变量的简单方式执行此操作，您的代码将可以正常工作。

之后

$thumb_attachments = get_posts( $thumb_args );

做

if ( $thumb_attachments  ) 
$j = 1; $count = 0;

之后

foreach ( $thumb_attachments as $thumbattachment ) ?>

使用

if (($count % 4) == 0) 
                              
  if ($j == 1) 

           echo '<div class="item active">';
             
             else
             
            echo '</div><!-- /item --><div class="item">';
              
             $j++;

      ?>

这在我尝试时有效。