Cara membuat carousel “Recent Post” menggunakan Owl Carousel

Seperti yang Anda ketahui, WordPress hadir dengan widget “Recent Posts” yang akan menarik judul posting terbaru Anda ke sidebar dan menautkannya ke posting lengkap. Masalahnya adalah widget Recent Posts sangat terbatas. Bagaimana jika Anda membutuhkan sesuatu yang sedikit lebih elegan dan dengan fungsionalitas yang lebih sedikit? Misalnya, bagaimana jika Anda ingin memasukkan Gambar Unggulan dan kutipan, dan dari jenis kiriman khusus? Pasti ada beberapa plugin di luar sana yang akan melakukan hal ini, seperti Advanced Recent Posts atau Recent Posts Widget Extended. Faktanya, ada banyak plugin hebat di luar sana untuk menampilkan posting dan beberapa bahkan memungkinkan Anda untuk menatanya agar sesuai dengan tema Anda.

Namun, menanyakan posting sebenarnya adalah hal yang cukup mudah untuk dilakukan dan mengikuti rute DIY hampir selalu menjamin bahwa Anda mendapatkan apa yang Anda inginkan dan bahwa korsel Anda akan ditata agar sesuai dengan tema Anda dengan sempurna.

Dalam artikel ini, saya akan menunjukkan kepada Anda cara membuat carousel “Recent Posts” menggunakan pustaka JavaScript Owl Carousel yang populer.

Mari kita mulai. Jika Anda meninjau contoh di situs Owl Carousel, hal pertama yang akan Anda perhatikan adalah bahwa contoh mereka ditulis untuk situs HTML biasa. Agar Owl Carousel berfungsi di WordPress, Anda harus melakukan hal-hal yang sedikit berbeda.

Pertama, Anda perlu mengunduh file dari situs Owl Carousel atau fork dari Github. Setelah Anda memiliki file secara lokal, Anda akan ingin menambahkan file CSS utama ke direktori /css/ tema Anda. File itu adalah owl.carousel.min.css. Ada file CSS lain di sana untuk sebuah tema dan itu adalah owl.theme.default.min.css . Ini bukan file yang diperlukan, oleh karena itu, saya tidak akan menggunakannya dalam tutorial ini.

Setelah diunggah ke tema Anda, jalur ke file akan terlihat seperti ini:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Anda juga perlu menyertakan file JS

Jika tema anak Anda belum memiliki folder /js/ , lanjutkan dan buat sekarang. Kemudian, tambahkan owl.carousel.min.js ke direktori /js/ tema Anda sehingga terlihat seperti berikut: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Selanjutnya, Anda perlu menambahkan beberapa jQuery yang menginisialisasi dan mengontrol korsel Anda

Kode ini akan mengonfigurasi kebutuhan khusus korsel Anda. Jika Anda belum memiliki file JS yang mengontrol konfigurasi skrip lain, buat file settings.js dan letakkan di direktori /js/ yang sama seperti di atas. Itu akan terlihat seperti: /wp-content/themes/your-theme/js/settings.js .

Selanjutnya, Anda akan menambahkan kode berikut ke file JavaScript yang sama dan simpan. Kode inilah yang membuat panggilan ke carousel dan memberi tahunya berapa banyak item yang akan digunakan, apakah akan diulang atau tidak, jenis navigasi apa yang digunakan, dan bagaimana merespons ukuran perangkat yang berbeda.

(function($) {
"use strict";

$(document).ready(function() {

$('#blog .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
dots: false,
nav: true,
navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], //Note, if you are not using Font Awesome in your theme, you can change this to Previous & Next
responsive:{
        0:{
            items:1,
            //nav:true
        },
        767:{
            items:2,
            //nav:false
        },
    }
});
})
})(jQuery);


Anda harus mendaftar dan mengantrekan file baru yang ditambahkan. Jika Anda sudah memiliki settings.js atau custom.js , itu harus sudah ada dalam antrean tema Anda. Namun, karena Anda menambahkan setidaknya dua file baru ( owl.carousel.min.css dan owl.carousel.min.js ), Anda perlu membuka functions.php tema Anda dan menambahkannya dengan benar ke tema Anda. Seharusnya terlihat seperti ini:
		


add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_scripts(){
wp_enqueue_script('owl.carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
wp_enqueue_script('settings', get_template_directory_uri() . '/js/settings.js', array(), '1.0.0', true );
}

function yourtheme_styles() {
wp_register_style('owl-carousel', get_template_directory_uri() .'/css/owl.carousel.css', array(), null, 'all' );
wp_enqueue_style( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );


HTML dan PHP yang akan menampilkan carousel di halaman Anda
Bagian ini dapat bervariasi tergantung pada bagaimana tema Anda diatur dan di mana Anda ingin meletakkan carousel. Saya akan menggunakan template khusus yang saya buat menggunakan Bootstrap. Langkah pertama Anda di sini adalah menentukan di mana Anda ingin korsel muncul. Jika Anda ingin berada di beranda Anda, Anda harus mencari home.php atau frontpage.php . Nama bervariasi dari tema ke tema, jadi pastikan Anda memahami struktur tema Anda dan mengedit file yang tepat. Setelah Anda tahu file apa yang akan diedit, Anda harus membuat salinannya di tema anak Anda dan memastikannya berada di struktur direktori yang sama. Misalnya, jika file berada di direktori bernama templates , pastikan Anda membuat folder bernama templates di lokasi yang sama dengan tema induk Anda.
		


Setelah Anda siap untuk pergi, Anda dapat menambahkan berikut ini di lokasi yang sesuai. Dalam file saya, saya menambahkan ini ke bagian bawah frontpage.php saya sehingga ditampilkan tepat di atas footer situs saya.
<!-- ============ BLOG CAROUSEL START ============ -->
<section id="blog">
  <div class="container">
     <div class="row"> <!-- this is the carousel’s header row -->
        <div class="col-sm-12 text-center">
           <h5>Recent posts</h5>
           <h1>Blog</h1>
        </div>
     </div>
     <div class="row"> <!-- this row starts the carousel-->
        <div class="col-sm-12">
           <div class="owl-carousel">
              <!-- query the posts to be displayed -->
              <?php $loop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'orderby'=> 'ASC')); //Note, you can change the post_type to a CPT and set the number to pull and order to display them in here. ?>
              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                 <div class="recent-post"> <!-- I don’t have any unique css here, just needed to make sure every recent post gets wrapped as a block element.  However, you may want to add your own css here... -->
                    <?php
<a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
          <p><a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">More</a></p>
</div> <!-- End the Recent Post div -->
              <?php endwhile; ?>
           </div> <!-- End the Owl Carousel div -->
        </div> <!-- End the recent posts carousel row -->
        <div class="row"> <!-- start of new row for the link to the blog -->
           <div class="col-sm-12 text-center">
              <a href="blog.html" class="btn btn-primary">Read All Posts</a>
           </div>
        </div>
     </div> <!-- End blog button row -->
</section>  <!-- ============ RECENT POSTS CAROUSEL END ============ -->


Setelah selesai, Anda harus memiliki carousel yang menunjukkan gambar unggulan, judul, kutipan, dan tombol "Lainnya" yang menautkan Anda ke posting blog lengkap.
		



		
		
Ingin tips desain lainnya? Berlangganan Tata Letak
		
Kami akan mengirimkan desain terbaru dan konten WordPress langsung ke kotak masuk Anda, seminggu sekali.
		

		
		Ya silahkan!