Tích hợp băng chuyền Bootstrap vào WordPress mà không cần plugin

Question

Tôi đã tích hợp băng chuyền bootstrap vào wordpress của mình. Các trang trình bày sẽ được lấy từ các bài đăng sẽ được gắn thẻ là "nổi bật" vì vậy chỉ 5 bài đăng mới nhất được nhập vào "nổi bật" sẽ được hiển thị.

Dưới đây là mã của tôi:

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

Vấn đề là Nó không trượt vì lớp "hoạt động" không hoạt động tĩnh.

Tôi làm cách nào để sửa lỗi này?

Cảm ơn

Answer 1

Giới hạn truy vấn đầu tiên cho 1 bài đăng. Trong vòng lặp đầu tiên đó, hãy đặt lớp mục carousel thành hoạt động. Đặt lại truy vấn và chạy vòng lặp thứ hai, được bù trừ bằng một và hủy bỏ lớp đang hoạt động, như vậy:

<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

Để tránh phải truy vấn hai lần, bạn có thể đặt một biến thành 1 bên ngoài vòng lặp của bạn. Trong vòng lặp, bạn thêm lớp "hoạt động" khi nó bằng 1, sau đó bạn tăng nó.

<?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

Bootstrap 3 với bài tùy loại (ở đây có tên là "diapositives"):

<!-- 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

Đây là giải pháp tôi đến với:

<?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 --> 

tôi đã học được điều này bằng cách xem video sau đây: Integrating the Bootstrap Carousel into the WordPress theme bởi người dùng Ezer Sanbe. Tất cả các khoản tín dụng cho anh ta.

Hope this helps

Answer 5

Lồng ghép băng chuyền Bootstrap trong WordPress mà không cần cắm

<!-- 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>