Menggunakan pagination pada sebuah halaman website mungkin dirasa tidak begitu efektif mengurangi beban data yang akan diambil oleh para pengunjung, namun bagi orang awam hal ini sah-sah saja diterapkan karena memang sudah dari pengaturan defaultnya.

Bagaimana jika kalian ingin menggunakan ajax untuk memuat artikel lebih banyak lagi pada wordpress ?, mungkin ini adalah cara yang sangat bagus untuk mengurangi beban data tanpa perlu menuju halaman berikutnya. seperti contohnya yaitu facebook, mereka menerapkan cara ini untuk menghemat halaman yang dimuat sehingga pengguna tidak perlu lagi mengambil banyak data dari browser.

Apalagi ini dilakukan secara otomatis berdasarkan waktu yang ditentukan, mungkin ini akan menjadi pengalaman terbaik yang akan diterima oleh pengunjung situs wordpress kalian. lalu mungkin ada yang akan bertanya apakah penerapan cara ini begitu susah untuk diimplementasikan ke situs wordpress saya ?, itu tergantung dari sumber yang memberi tahu kalian tentang cara ini.

Bahan yang dibutuhkan untuk menerapkan hal ini

Untuk mengimplementasikan ajax load article ini kalian akan sedikit membutuhkan sebuah bahan yang nantinya akan dijadikan proses pengambilan data artikel sehingga kalian tidak perlu lagi membuka halaman baru untuk memuat artikel lebih banyak.

  1. Plugins jetpack yang sudah tersedia pada situs wordpress sendiri.
    • Kali ini kita akan menggunakan sebuah plugins yang bernama jetpack, kebetulan plugins ini memiliki module ini sehingga kita hanya perlu mengimplementasikan yang mana saja yang kita akan aplikasikan.
  2. file dengan nama content.php yang akan dijadikan objek loop.
    • Ini bersifat opsional karena cara lain seperti template include atau template part juga dapat digunakan asal tidak menggunakan tambahan query.
  3. Pemberian sedikit code function.

Persiapan

Untuk mengimplementasikan ajax load artikel ini pastikan kalian menggunakan query post default dari wordpress atau template bawaan, ini dimaksudkan agar fungsi ajax load ini berfungsi dengan baik tanpa ada kesalahan jika kalian tidak mengerti query post default saya akan memberikan contohnya yang kurang lebih seperti ini.

<?php
    if( have_posts() ) : while( have_posts() ) : the_post();
    get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>    
<?php else : ?>
<?php endif; ?>

Karena pada pembahasan kali ini kita berkaitan dengan plugins jetpack, pastikan juga plugins ini sudah diaktifkan setelah itu kalian cukup mengaktifkan module Infinite Scroll atau Gulir tak terbatas pada pengaturan jetpack. seluruh persiapan yang nantinya berkaitan dengan ajax load article ini pasti akan melalui tahap ini jadi jika kalian ingin menunggu artikel selanjutnya mengenai ajax load article ini dengan cara yang berbeda maka jangan lupakan persiapan dasarnya.

Pemasangan objek loop

Setelah semua persiapan telah dilaksanakan maka tahap selanjutnya adalah pemasangan objek loop, untuk kalian pengguna template default wordpress yang bernama twenty ten, twenty eleven, twenty twelve dan selanjutnya maka kalian bisa loncat ke cara selanjutnya.

pemasangan objek loop pada bahasan kali ini akan membutuhkan sedikit class id untuk bisa menjalankan ajax load article, sehingga jika ajax ini berjalan maka dia akan bisa ditampilkan pada tempat yang sudah ditentukan berdasarkan class id yang diberikan pastinya.

   

Penerapan ajax load article pada function.php

Setelah pemasangan objek loop telah selesai maka selanjutnya yaitu menambahkan sedikit code pada function.php, harap diingat perbedaan nama class id pada loop dan function.php akan membuat sebuah permasalahan tepatnya pada peletakan objek jadi harap disamakan jika ingin berfungsi dengan baik.

add_theme_support( 'infinite-scroll', array(
    'container' => 'ajax-loop',
    'footer' => 'footer',
) );

Untuk penggunaan theme default bawaan wordpress kalian bisa menggunakan code ini :

Twenty Twelve :

/**
 * Add theme support for infinite scroll.
 *
 * @uses add_theme_support
 * @return void
 */
function twenty_twelve_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
    ) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );

Tweny Eleven :

/**
 * Add theme support for infinity scroll.
 */
function twenty_eleven_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5', ),
        'footer'         => 'page',
    ) );
}
add_action( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

Twenty Ten :

/**
 * Add theme support for infinity scroll
 */
function twenty_ten_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'twenty_ten_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
 
/**
 * Set the code to be rendered on for calling posts,
 * hooked to template parts when possible.
 *
 * Note: must define a loop.
 *
function twenty_ten_infinite_scroll_render() {
    get_template_part( 'loop' );
}

Bagaimana apakah cara ini sudah berfungsi dengan baik ?.

Jika kalian memiliki pertanyaan mengenai pembahasan ini, kalian bisa mengirimkan pertanyaan tersebut lewat komentar dibawah namun jika kalian ingin pembahasan ini dilanjutkan maka tunggu saja diartikel selanjutnya karena diartikel selanjutnya saya tidak akan menggunakan plugins.