Menambahkan Infinite Scroll Pada WordPress Theme Tanpa Plugin

Beberapa hari yang lalu saya mendapatkan projek untuk mebuat web. Web yang saya buat menggunakan CMS WordPress. Pada projek ini saya harus bisa membuat automatic scroll layak pinterst. Disini kita dalam dunia web menyebutnya “Infinite Scroll”.

Menambahkan Infinite Scroll Pada WordPress Theme

Apa itu Infinite Scroll?

Pada biasanya seseorang yang ingin mengarahkan ke next atau pervious page akan menekan tombol next atau pervious bukan? Infinite Scroll ini adalah metode baru, yang dipopulerkan oleh facebook dan twitter. Ketika kamu men-scroll mouse kebawah, maka page  (konten post) berikutnya akan men-load secara otomatis. Jika kamu seseorang pengguna facebook dan twitter pasti kamu akan mengerti maksudnya.

Bagaimana cara membuatnya pada wordpress?

Disini saya akan menjelaskan cara menyisipkannya pada wordpress theme. Metode ini tidak perlu menggunakan plugin atau sejenisnya.

Untuk langkah pertama, donwload terlebih dahulu jquery.infinitescroll.min.js masukan ke folder js pada theme (tempat kamu menaruh file .js) kemudian download ajax-loader.gif dan masukan ke filder image yang pada theme, dan pilih sesuai dengan selera yang kamu inginkan.

Buka functions.php dan tambahkan code berikut.

/**
 * Load javascripts pada theme
 */
function infinite_scroll_theme_js(){
    wp_register_script( 'infinite_scroll',  get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
    if( ! is_singular() ) {
        wp_enqueue_script('infinite_scroll');
    }
}
add_action('wp_enqueue_scripts', 'infinite_scroll_theme_js');

Script diatas berfungsi untuk men-register dan enqueue script js yang akan mendukung untuk menajalankan infinite scroll.

/**
 * Infinite Scroll
 */
function custom_infinite_scroll_js() {
    if( ! is_singular() ) { ?>
    <script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nav-below .nav-previous a",
        "navSelector":"#nav-below",
        "itemSelector":"article",
        "contentSelector":"#content"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

• img: path folder tempat kamu menyimpan ajax-loader.gif
• nextSelector: Selector  “previous posts” link yang ada pada theme wordpresmu.
• navSelector: terdapat selector  previous/next navigasi links.
• itemSelector: Selector pada posts. biasanya theme wordpress secara default menggunakan .post
• contentSelector: Div content untuk keseluruhan post theme kamu.

Untuk menambahkan infinite scroll dengan plugin sudah saya tulisakan pada artikel lainnya

Selamat mencoba! jika terjadi kesalahan atau ada hal yang kurang dimengerti, silahkan tambahkan komentar dengan sebisa mungkin kami akan membantu. Good luck 🙂