share Membuat Carousel di Wordpress dengan Bootstrap

Carousel bisa di gunakan buat membikin seperti Headline di blog. contoh nya seperti di <a href='http://getbootstrap.com/javascript/#carousel'>http://getbootstrap.com/javascript/#carousel</a> Pertama kita masukan dulu css dan js dari bootstrap nya ke function.php

function carousel_script(){
  wp_enqueue_style('bootstap',get_template_directory_uri().'/css/bootstrap.css', false, NULL,'all');
  wp_enqueue_script('bootstrap.min',get_template_directory_uri() . '/js/bootstrap.min.js',array('jquery'));
}
add_action('wp_enqueue_scripts','carousel_script');

selanjut nya kita buat 1 text lagi, dan beri nama sidebar-carousel.php dan kita masukan code berikut

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <?php
   $the_query = new WP_Query(array(
    'category_name' => 'bm',
    'posts_per_page' => 1
    ));
   while ( $the_query->have_posts() ) :
   $the_query->the_post();
  ?>
   <div class="item active">
    <?php the_post_thumbnail('carousel-thumbnail',array('class'=>'carousel-img'));?>
    <div class="carousel-caption">
     <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
     <p><?php the_excerpt();?></p>
    </div>
   </div><!-- item active -->
  <?php
   endwhile;
   wp_reset_postdata();
  ?>
  <?php
   $the_query = new WP_Query(array(
    'category_name' => 'bm',
    'posts_per_page' => 5,
    'offset' => 1
    ));
   while ( $the_query->have_posts() ) :
   $the_query->the_post();
  ?>
   <div class="item">
    <?php the_post_thumbnail('carousel-thumbnail',array('class'=>'carousel-img'));?>
    <div class="carousel-caption">
     <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
     <p><?php the_excerpt();?></p>
    </div>
   </div><!-- item -->
  <?php
   endwhile;
   wp_reset_postdata();
  ?>
 </div><!-- carousel-inner -->
 <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div><!-- #myCarousel -->

Setelah itu kita panggil Carousel di index.php dengan cara

<?php get_sidebar('carousel'); ?>

Penjelasan untuk

$the_query = new WP_Query(array(
    'category_name' => 'bm',
    'posts_per_page' => 1
    ));

category_name yang kita masukan bukan nama category tapi nama Slug di category tersebut. #Catatan TS nya juga masih belajar soal Themes Wordpress, jadi kalau ada error kita cari tau bareng salah nya dimana :D

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Diperbarui 8 tahun yang lalu

5 Jawaban:

Mantap bro @ardyhim Keep sharing!

avatar cescgie
@cescgie

105 Kontribusi 5 Poin

Dipost 8 tahun yang lalu

wah ,, ini yang di cari :D thanks

avatar Saputroandhi
@Saputroandhi

509 Kontribusi 162 Poin

Dipost 8 tahun yang lalu

terima kasih bro @cescgie :D

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 8 tahun yang lalu

Wah kapan-kapan masukin di list tutorial wordpress ah, mantep nih

avatar hilmanski
@hilmanski

2670 Kontribusi 2132 Poin

Dipost 8 tahun yang lalu

dan buat tutorial load more ajax di wordpress juga mas @hilmanrdn :D

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban