在無插件的WordPress中集成Bootstrap旋轉木馬

Question

我已經將引導轉盤集成到了我的wordpress中。幻燈片將從帖子被採取將被標記爲「精選」，因此最近只有5個輸入「精選」的帖子將被顯示。

下面是我的代碼：

<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs"> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-captions" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-captions" data-slide-to="1" class=""></li> 
      <li data-target="#carousel-captions" data-slide-to="2" class=""></li> 
      <li data-target="#carousel-captions" data-slide-to="3" class=""></li> 
      <li data-target="#carousel-captions" data-slide-to="4" class=""></li> 
     </ol> 
     <div class="carousel-inner"> 

<?php $the_query = new WP_Query('tag=featured&orderby=date&posts_per_page=5'); ?> 

<?php if ($the_query->have_posts()) : ?> 

    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
    <div class="item"> 
      <a href="<?php the_permalink() ?>"> 
      <img src="<?php the_field('header_banner', $post_id); ?>" alt=""> 
      <div class="carousel-caption"> 
       <h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr> 
       <p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details&nbsp;&nbsp;&nbsp;&rarr;</span> 
      </div></a> 
      </div> 
    <?php endwhile; ?> 
    <?php wp_reset_postdata(); ?> 

<?php else: ?> 
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
<?php endif; ?> 


     </div> 
     <a class="left carousel-control" href="#carousel-captions" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel-captions" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
</div> 

問題是，它不會滑動，因爲「主動」類不是靜態的工作。

我該如何解決這個問題？

謝謝

Answer 1

將第一個查詢限制爲1個帖子。在第一個循環中，將輪播項目類設置爲活動狀態。重置查詢和運行第二個循環，通過一個偏移，並且否定了活動類，像這樣：

<div class="carousel-inner"> 
     <?php 
      $the_query = new WP_Query(array(
      'post_type' =>'post', 
      'posts_per_page' => 1 
     )); 
     while ($the_query->have_posts()) : 
     $the_query->the_post(); 
     ?> 
     <div class="item active"> 
      First Slide 
     </div> 
     <?php endwhile; wp_reset_postdata(); ?> 
     <?php 
     $the_query = new WP_Query(array(
      'post_type' =>'post', 
      'offset' => 1 
     )); 
     while ($the_query->have_posts()) : 
     $the_query->the_post(); 
     ?> 
     <div class="item"> 
      Remaining Slides 
     </div> 
     <?php endwhile; wp_reset_postdata(); ?> 
    </div> 

Answer 2

爲了避免查詢兩次，你可以設置一個變量設置爲1的循環之外。在循環中，當等於1時添加「活動」類，然後增加它。

<?php 
// Previous code here... 
$i = 1; 
while ($the_query->have_posts()) : 
    $the_query->the_post(); 
     ?> 
     <div class="item<?php if ($i == 1) echo 'active'; ?>"> 

     </div> 
<?php 
    $i++; 
endwhile; 
wp_reset_postdata(); 
?> 

Answer 3

引導3自定義後類型（這裏命名爲 「透明正片」）：

<!-- Define the loop --> 
     <?php $diapositivesloop = new WP_Query(array('post_type' => 'diapositives', 'posts_per_page' => -1)); ?> 
     <?php $i=1; ?> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 

     <?php while ($diapositivesloop->have_posts()) : $diapositivesloop->the_post(); ?> 
       <?php the_content(); ?> 


       <div class="item <?php if ($i == 1) echo 'active'; ?>"> 
        <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="..."> 
        <div class="carousel-caption"> 
         <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a> 
        </div> 
       </div> 



     <!-- End of the loop --> 
     <?php $i++; ?> 
     <?php endwhile; wp_reset_query(); ?> 

     <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
    </div> 

Answer 4

這是我想出了一個解決方案：

<?php 
$args = array(
'post_type'  => 'slides', 
'oderby'   => 'menu_order', 
'posts_per_page' => -1 
); 

$slides = new WP_Query($args); 

if($slides->have_posts()): ?> 
<div class="row"> 
    <div class="col-xs-12"> 
     <!--Twitter bootstrap Photo carrousel--> 
    <div id="myCarousel" class="carousel slide center-block"  data-ride="carousel" > 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
    </ol> 
<!-- Wrapper for slides --> 
<div class="carousel-inner" role="listbox"> 
    <?php while($slides->have_posts()) : $slides->the_post(); $index++ ?> 

     <?php if ($index == 1): ?> 
     <div class="item active"> 
     <?php else: ?> 
     <div class="item"> 
     <?php endif; ?> 
     <?php $url = wp_get_attachment_url(get_post_thumbnail_id()); ?> 
      <img src="<?php echo $url; ?>" alt="<?php the_title(); ?>"> 
     </div> 
    <?php endwhile; ?> 
<?php endif; ?> 
     <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div><!-- carrousel ends here --> 

我通過觀看以下視頻瞭解了這一點：Integrating the Bootstrap Carousel into the WordPress theme用戶Ezer Sanbe。所有學分給他。

希望這有助於

Answer 5

集成自舉旋轉木馬在WordPress插件不

<!-- Carousel items --> 
    <div class="carousel-inner"> 
    <?php $slider = new WP_Query(array(
     'post_type' => 'slider', 
     'posts_per_page' => 1, 
    )); ?> 
    <?php 
    if (have_posts()) { 
     $x=0; 
     while ($slider->have_posts()) { 
      $x++; 
      $slider->the_post(); ?> 
       <div class="<?php if($x==1){echo 'active'} ?> item"> 
        <?php if (has_post_thumbnail()) : ?> 
         <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
          <?php the_post_thumbnail(); ?> 
         </a> 
        <?php endif; ?> 
       </div> 
     <?php } // end while 
    } // end if 
    ?> 


    </div> 
    <!-- Carousel nav --> 

    <ol class="carousel-indicators"> 
     <?php for($i=0; $i<$x; $i++;) { ?> 
      <li data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="<?php if($i==0){ echo 'active' }?>"></li> 
     <?php } ?> 
    </ol> 

    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a> 
</div>