Autoload Ajax Scroll Pagination WordPress dengan jQuery

Untuk membuat autoload ajax scroll pagination seperti dalam blog WordPress ini, ada beberapa file yang Anda butuhkan.

Infinite Ajax Scroll

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. File javascript jquery.ias.min.js
  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. 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'/>",
    });
    }
    

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. Simpan semua file jquery.ias.min.js, loader.gif dan jquery.ias.setting.js di dalam folder ajaxscroll yang Anda buat.
  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. Save pekerjaan Anda. Anda bisa melihat pagination artikel menjadi autoload ketika discroll ke bawah.

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

Author: Jevuska

Rachmanuddin Chair Yahya a.k.a Jevuska is the founder of Jevuska.Com, a qualified web about offering medical articles, blogging, tips, and tutorial of WordPress. Having written for Jevuska since 2007.

Leave a Reply

Your email address will not be published. Required fields are marked *

Use tag [php] to add code, e.g. [php]<?php echo $var; ?>[/php]