Advertisement
Wordpress

Cara Membuat Load More pada WordPress Post dengan Ajax

Dalam artikel ini saya akan menjelaskan bagaimana cara menganti “older post” pada wordpress dengan menggunakan load more. Mungkin jika teman-teman tahu tentang design twitter yang dulu akan lebih tahu tentang load more yang dimaksud. Artikel ini dibuat karena ada pembaca yang menanyakan tetang hal ini, sebelum saya mejelaskan ke tahap selanjutnya, saya berterima kasih kepada problogdesign.com untuk artikelnya. Artikel ini saya dapatkan dari blog tersebut dan akan saya jelaskan kembali dengan bahasa Indonesia, semoga teman-teman pembaca bisa paham dengan apa yang kami jelaskan pada artikel ini.

load-more-wordpress

Konsep dari sistem load more tersebut adalah untuk menggantikan order post yang biasanya digunakan oleh default wordpress theme itu sendiri. Dengan menggunakan sistem seperti ini user tidak perlu melakukan loading halaman, maksudnya tidak berpindah kehalaman lainnya. User akan tetap berada pada halaman yang sama ketika mereka menekan tombol load more dan bisa mendapatkan artikel berikutnya yang sudah pastinya tanpa ada loading halaman. Dalam artikel ini kita akan membuat sebuah wodpress plugin. Mari kita mulai cara membuat load More pada wordpress post menggunakan ajax.

Cara Membuat Load More Pada WordPress Post

Setup

Buat folder dengan nama ajax-load-more. Kemudian didalam folder tersebut silahkan buat 2 folder lagi dengan nama css dan js Folder ini digunakan untuk menyimpan file css dan javascript plugin. Buat file load-posts.js didalam folder js, dan file style.css di folder css.
Terakhir buat file php dengan nama ajax-load-more.php

Buka file ajax-load-more.php, masukan code dibawah ini.

<?php
/**
 * Plugin Name: AJAX Load More
 * Plugin URI: http://www.problogdesign.com/
 * Description: Load the next page of posts with AJAX.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * License: GPLv2
 */

Code diatas berguna untuk mendefenisikan plugin yang anda buat agar bisa dibaca oleh wordpress. Silahkan anda atur sendiri sesuai dengan keinginan anda.

Loading file dan Melewati Nilai

Pertama-tama kita butuhkan code javascript dan css dibuat pada halaman yang benar, copy code berikut.

 /**
  * Tambahkan script yang adan inginkan jika diperlukan
  */
 function pbd_alp_init() {
 	global $wp_query;

 	// Menambahkan code ke halaman index.
 	if( !is_singular() ) {
 		// Queue JS and CSS
 		wp_enqueue_script(
 			'pbd-alp-load-posts',
 			plugin_dir_url( __FILE__ ) . 'js/load-posts.js',
 			array('jquery'),
 			'1.0',
 			true
 		);

 		wp_enqueue_style(
 			'pbd-alp-style',
 			plugin_dir_url( __FILE__ ) . 'css/style.css',
 			false,
 			'1.0',
 			'all'
 		);

Code diatas kita gunakan untuk membuat sebuah function baru yang kita beri nama pbd_alp_init(). Selain itu anda jika bisa melihat pada code tersebut ada code global $wp_query yang akan kita gunakan untuk tahap selanjutnya.
Bagian paling penting adalah pada line 8 yang merupukan sebuah conditional statement yang artinya tidak bisa berfungsi pada halaman individu seperti pada single post, atau page post wordpress.

Ini adalah bagian yang luas untuk memastikan kode kita berjalan pada homepage, halaman tag, halaman pencarian dll. Anda dapat menyesuaikan dengan lebih spesifik.

Kemudian kita juga menggunakan wp_enqueue_script() dan wp_enqueue_style() untuk memberutahukan wordpress kalau kita menggunakan 2 file yaitu css dan jquery.

Disini kita akan menggunakan wp_localize_script() function untuk menghitung nilai-nilai yang ada di dalam PHP dan kemudian mencetaknya kedalam halaman web sehingga script yang kita buat kemudian dapat mengaksesnya.

// Pada halaman apa kita? Dan apa batas halaman kita?
$max = $wp_query->max_num_pages;
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;

// Tambahkan beberapa parameter untuk JS.
wp_localize_script(
	'pbd-alp-load-posts',
	'pbd_alp',
	array(
		'startPage' => $paged,
		'maxPages' => $max,
		'nextLink' => next_posts($max, false)
	)
);

Kita mulai bekerja pada 2 baris pertama. $max adalah jumlah halaman maksimum pada halaman permintaan saat ini yang dapat diulang kembali (misalnya, jika setiap halaman menampilkan 5 post dan disana ada 12 post pada kategori saat ini, maka jumlah maksimum akan mejadi 3).

The $paged variable will store the page we are currently on (The whole point of our plugin is to ensure people never load a second page, but it doesn’t hurt to make sure). Kemudian pada variable $paged berfungsi untuk menyimpan halaman kita saat ini (inti dari plugin ini adalah membuat orang tidak akan memuat halaman kedua atau halaman baru).

Jika kita melompat ke baris 12,disana akan terlihat di mana kita telah bekerja keluar dari fungsi baris ke 3 (ini merupakan link ke halaman berikutnya). next_posts () adalah built-in WordPress function yang akan mengembalikan URL yang kita butuhkan.

wp_localize_script() function adalah yang terbaik karena ini memudahkan untuk melewati nilai-nilai (values) dari PHP ke javascript. Nilai pertama, pbd-alp-load-posts harus cocok dengan nilai-nilai yang dipanggil pada wp_enqueue_script() .

Nilai kedua, kita akan membuat variable pbd_alp yang akan menjadi nama yang kita gunakan pada javascript kita selanjutnya.

Terakhir, kita mengirim lebih dari satu array data. Jika anda menampilkan HTML source nantinya pada halam web page, anda akan melihat sebuah code seperti dibawah sebelum javascript file dimuat :

<script type='text/javascript'>
/* <![CDATA[ */
var pbd_alp = {
	startPage: "1",
	maxPages: "6",
	nextLink: "http://www.problogdesign.com/demo/ajax-load-posts/page/2/"
};
/* ]]> */
</script>

Sekarang, kita perlu menutup if statement yaitu pbd_alp_init() function, dan menghubungkan semua ketempatnya.

	}
 }
 add_action('template_redirect', 'pbd_alp_init');

Disini kita menggunakan template_redirect hook karena dengan init hook, variable $wp_query tidak akan ditetapkan sebelumnya.

jQuery – Jantung dari Plugin ini

Sekarang kita memuat script dan melalui nilai-nilai yang kita perlukan. Ini merupakan waktu anda untuk mendapat inti dari tutorial ini.

Buka file load-posts.js . Pertama-tema yang kita lakukan adalah membuat 3 akses variable yang kita lalui dengan php function yang sudah kita buat.

jQuery(document).ready(function($) {

	// Memuat jumlah halaman berikutnya
	var pageNum = parseInt(pbd_alp.startPage) + 1;

	// Jumlah permintaan halaman maksimum saat ini yang dapat kembali
	var max = parseInt(pbd_alp.maxPages);

	// Link untuk halaman berikutnya
	var nextLink = pbd_alp.nextLink;

Cara untuk mengakses nilai-nilai tersebut adalah dengan menggunakan format : pbd_alp.valueName (pbd_alp adalah nilai kedua yang kita masukan kedalam wp_localize_script(), semoga anda masih ingat).

Hal yang terpenting untuk diingat adalah bahwa jumlah halaman kita telah dikirim sebagai string, sehingga kita menggunakan javascript parseInt() function untuk mengubahnya kembali ke jumlah halaman yang sebelumnya.

Dengan pageNum, kita menambahkan satu ke nomor karena ini akan menyimpan nomor tersebut pada halaman berikutnya untuk di muat (bukan halaman saat ini).

Sebagian besar WP theme sudah mempunyai navigation untuk berpindah keantar halaman, dalam bentuk Older Posts/NewerPost link. Sekarang kita akan mengantinya dengan tombol ajax yang kita buat, jadi pertama kita akan menghapus semua naigation link dan menyisipkan tombol kita sebagai gantinya.

/**
 * Ganti navigation yang lama dengan yang kita buat sekarang
 *
 */
if(pageNum <= max) {
	// Insert the "More Posts" link.
	$('#content')
		.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
                .append('<a href="#">Load More Posts</a>');

	// Remove the traditional navigation.
	$('.navigation').remove();
}

Ingat bahwa pageNum adalah jumlah halaman berikutnya , jadi jika itu lebih besar dari max , tidak ada halaman yang akan dimuat lagi. Dalam hal ini, kita tidak akan menambahkan tombol .

Jika ada konten baru untuk dimuat, maka kita mencari div #content, dan menambahkan dua hal yang mengakhirinya . Yang pertama adalah div kosong , yang nanti akan kita gunakan untuk memasukkan postingan kita ke dalam.

Yang kedua adalah tombol itu sendiri ( Sebuah link HTML biasa) , terbungkus dalam sebuah paragraf.

Terakhir, kita mencari div .navigation dan menghapusnya. Jika theme yang anda menggunakan class yang berbeda untuk tombol navigasi, Anda akan harus mengubah( .navigation adalah default theme yang biasa digunakan). Hal yang sama berlaku untuk div #content juga.

Hasil dari kode di atas adalah tombol kita sudah ditempatkan, meskipun belum bisa digunakan untuk melakukan apa-apa.

Sekarang, mari kita buat agar code tersebut bisa digunakan pengguna mengklik tombol tersebut.

/**
 * Muat halaman baru ketika tombol diklik
 */
$('#pbd-alp-load-posts a').click(function() {

	// apakah ada post lain untuk dimuat?
	if(pageNum <= max) {

		// Show that we're working.
		$(this).text('Loading posts...');

Baris pertama kode adalah jQuery event handler, yang berjalan ketika pengguna mengklik tombol.

pada baris 7, kita menjalankan pemeriksaan yang sama seperti sebelumnya. Hal ini penting karena script ini akan memuat dalam pesan 404 error jika tidak ada pos lainnya.

Baris 10 merupakan update teks pada tombol untuk membaca “Loading posts…” Ini adalah praktik yang baik karena pengguna akan mendapatkan reaksi instan ketika mereka mengklik tombol.

Langkah selanjutnya adalah membuat panggilan AJAX. Cukup banyak terjadi di sini, jadi copy dan paste script berikut,

$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
	function() {
		// Update page number dan nextLink.
		pageNum++;
		nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

		// tambahkan placeholder baru, ketika user meng-kliknya lagi.
		$('#pbd-alp-load-posts')
			.before('</pre>
<div class="pbd-alp-placeholder-'+ pageNum +'"></div>
<pre>
')

		// Update pesan pada tombol.
		if(pageNum <= max) {
			$('#pbd-alp-load-posts a').text('Load More Posts');
		} else {
			$('#pbd-alp-load-posts a').text('No more posts to load.');
		}
	}
);

Baris yang pertama adalah yang terpenting. Kita menggunakan jQuery selector untuk memilih placeholder div. Alasan kita menambahkan pageNum number untuk mengakhiri class name jika user klik tombol lagi. Kita akan menambahkan post baru untuk placeholder baru (tanpa menimpa yang lama).

.load() function memuat url kita yang telah kita lewati (ingat bahwa nextlink adalah url untuk pindah ke halaman selanjutnya), dan karena kita telah menambahkan .post untuk akhirnya, ini hanya akan mengcopy .post div yang ditemukan saja, bukan untuk seluruh halaman.

Pada baris ke 2, kita memulai dengan sebuah function baru yang akan berjalan ketika AJAX selesai dipanggil. Hal pertama yang dilakukan adalah memperbarui nilai-nilai untuk waktu berikutnya ketika tombol diklik.

pageNum meningkat sebesar satu (Untuk menunjuk ke halaman berikutnya), dan nextLink diperbarui menggunakan regular expression. Ini digunakan untuk mencari URL / page / 2 / (Atau nomor lainnya), dan menggantikan bagian nomor dengan halaman berikutnya yang baru.

pada baris 8, kita menambahkan placeholder div baru. Ini akan digunakan pada saat tombol diklik.

Terakhir, pada baris 12, kita meng-update teks pada tombol lagi. Jika ada post lainnya yang dimuat, kita akan kembali ke teks asli. Jika tidak, maka kita akan meng-update dengan pesan yang mengatakan bahwa tidak ada post yang bisa load lagi.

Sekarang, kita hanya perlu melengkapi beberapa hal-hal:

} else {
			$('#pbd-alp-load-posts a').append('.');
		}

		return false;
	});
});

Kode ini dimulai dengan menutup f-statement pertama (Apakah ada lebih banyak halaman untuk dimuat (load)?). Jika tidak, ia menambahkan ‘.’ kedalam pesan tombol tersebut. Ini semata-mata untuk memberikan semacam respon visual untuk pengguna ketika tombol diklik (Lihatlah screenshot di bawah ini untuk melihat apa yang terjadi).

Cara Membuat Load More pada Wodpress Post dengan Ajax

Dan terakhir dari semuanya, kita menggunakan return false; untuk mencegah link dari tombol itu dimuat dirinya sendiri.

Style

Tombol Anda sekarang sepenuhnya bekerja! Satu-satunya hal yang tersisa adalah untuk membuat style tombol tersebut.

Buka file style.css yang pada folder css, kemudian tambahkan script berikut :

#pbd-alp-load-posts a:link, #pbd-alp-load-posts a:visited {
	display: block;
	text-align: center;
	padding: 4px 0;
	color: #444;
	text-decoration: none;

	/** Rounded Corners **/
	-moz-border-radius: 8px;
	border-radius: 8px;

	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #999;
	-webkit-box-shadow: 1px 1px 1px #999;
	box-shadow: 1px 1px 1px #999;

	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f1f1f1;

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #e4e3e3, #f1f1f1);

	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e4e3e3));

	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #e4e3e3);

	/* Opera 11.10+ */ background: -o-linear-gradient(#f1f1f1, #e4e3e3);
}

#pbd-alp-load-posts a:hover, #pbd-alp-load-posts a:active {
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #bbb;
	-webkit-box-shadow: 1px 1px 1px #bbb;
	box-shadow: 1px 1px 1px #bbb;

	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f5f5f5;

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f5f5f5);

	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eaeaea));

	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #eaeaea);

	/* Opera 11.10+ */ background: -o-linear-gradient(#f5f5f5, #eaeaea);
}

Simpan semua yang sudah anda kerjakan, dan aktifkan plugin tersebut. Jika ada masalah, coba liat kembali theme anda apa sudah menggunakan #content dan .navigation jika belum tambahkan atau ganti id dan class sebelumnya.

selamat mencoba.

Demo Download

Selalu menganggap diri seorang pemula. Seorang Website Designer yang lagi suka nulis, juga editing video, dan memperhatikan tren desain. Entrepreneur. Founder & Marketing Palawakia Studio

Related Stories

7 Responses to Cara Membuat Load More pada WordPress Post dengan Ajax

Leave a Reply

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