Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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
5 Jawaban:
Wah kapan-kapan masukin di list tutorial wordpress ah, mantep nih
dan buat tutorial load more ajax di wordpress juga mas @hilmanrdn :D