Autoload ajax scroll pagination di WordPress ini menggunakan plugin jQuery. Jika Anda melihat halaman homepage atau halaman kategori blog Jevuska, halaman pagination akan loading secara otomatis ketika discroll ke bawah. Untuk membuat pagination tersebut menjadi autoload seperti dalam blog ini, ada beberapa file yang Anda butuhkan, yaitu:


    

  1. File javascript jQuery 1.4 ke atas
    2. 

  2. File javascript jquery.ias.min.js
    3. 

  3. File gambar loader.gif
    
Untuk file ke-2 dan ke-3 Anda bisa download di sini (Infinite Ajax Scroll). Anda hanya membutuhkan 2 file yang di atas saja.
    4. 

  4. Skrip dasar jQuery. (Simpan skrip berikut dengan nama jquery.ias.setting.js)

    jQuery('document').ready(function($) {
	setup_ajax_pagination();
});
 
function setup_ajax_pagination()
{
jQuery.ias({
	container : '#content',
	item: '.post',
	pagination: '#nav-below',
	next: '#nav-below .nav-previous a',
	history:false,
	loader: gl_theme_url + "/ajaxscroll/loader.gif'/>",
});
}
    

    5. 



Cara membuat Autoload Ajax Scroll Pagination (Infinite Ajax Scroll)


    

  1. Buat folder di dalam root folder theme WordPress yang Anda gunakan dan berikan nama foldernya yaitu ajaxscroll.
    2. 

  2. Simpan semua file jquery.ias.min.js, loader.gif dan jquery.ias.setting.js di dalam folder ajaxscroll yang Anda buat.
    3. 

  3. Tempatkan skrip berikut tepat sebelum kode </head> dalam file theme Anda, biasanya di header.php.

     
<!-- jQuery versi 1.6.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
 
<!-- skrip dasar jQuery -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ajaxscroll/jquery.ias.setting.js"></script>
 
<!-- skrip Infinite Ajax Scroll -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/ajaxscroll/jquery.ias.min.js"></script>
 
<!-- skrip untuk menampilkan gambar loader.gif -->
<script type="text/javascript">
	var gl_theme_url = "<img src='<?php echo get_template_directory_uri(); ?>";
</script>
    

    4. 

  4. Save pekerjaan Anda. Anda bisa melihat pagination artikel menjadi autoload ketika discroll ke bawah.
    5. 



Tutorial ini menggunakan theme default WordPres (Twenty Eleven). Jika Anda menggunakan theme WordPress yang lain. Anda cukup mengubah tag ID dan Class pada Skrip dasar jQuery (file jquery.ias.setting.js).


Deskripsi skrip dasar jQuery Infinite Ajax Scroll (jquery.ias.setting.js)


jQuery.ias({
  container : '#content', 
  // tag yang memuat semua tag ID/class (area postingan dan area pagination).
 
  item: '.post', 
  // tag yang memuat masing-masing artikel (area postingan).
 
  pagination: '#nav-below', 
  //tag yang memuat elemen pagination (link previous dan link next pagination).
 
  next: '#nav-below .nav-previous a', 
  //tag class link yang memuat link previous pagination.
 
  history:false, 
  //false artinya untuk menghilangkan tanda hash ("#/page/") di url ketika discroll.
 
  loader: gl_theme_url + "/ajaxscroll/loader.gif'/>", 
  //gambar loading.
 
});


Sketsa Infinite Ajax Scroll Pagination
Sketsa Infinite Ajax Scroll Pagination


Jadi Anda tinggal menyesuaikan tag ID atau tag class yang ada pada theme WP Anda.


Sumber skrip Infinite Ajax Scroll ini di http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin