Ajax WordPress Tutorial

Posted on by Deczen

Bagaimana cara menggunakan Ajax di WordPress? Mungkin artikel ini dapat membantu anda untuk mengimplementasikan ajax pada wordpress.

Terutama bagi anda yang baru saja belajar dalam mendevelop sebuah theme atau plugin, artikel ini mungkin sangat diperlukan.

Penjelasan Mengenai Ajax WordPress Tutorial

Sebenarnya WordPress sudah menyediakan API bagi developer yang ingin menambahkan fitur Ajax pada plugin/theme yang mereka buat.

Jadi developer sudah dibekali fitur untuk mengintegrasikan fitur ajax langsung kedalam sistem WordPress, hanya saja developer perlu mengetahui hook apa saja yang di perlukan untuk menggunakannya.

Tanpa bertele-tele, saya akan memberikan contoh penggunaan Ajax sederhana pada sebuah plugin WordPress.

Untuk mengaktifkan fitur ajax kita perlu menjalankan fungsi ajax kita pada 2 jenis action yaitu:

1. wp_ajax_[nama fungsi]: Ajax hanya dijalankan ketika user telah login
2. wp_ajax_nopriv_[nama fungsi] : Ajax dijalankan tanpa harus user melakukan login

Contoh penggunaan Action WP Ajax untuk membuat user baru pada WordPress

add_action( 'wp_ajax_create_user_example', 'create_user' );
add_action( 'wp_ajax_nopriv_create_user_example', 'create_user' );

function create_user(){
	if ( isset($_REQUEST) ) {
		$user_name = $_REQUEST['user_name'];
		$user_email = $_REQUEST['user_email'];
		$user_id = username_exists( $user_name );
		if ( !$user_id and email_exists($user_email) == false ) {
			$random_password = wp_generate_password( $length=12, $include_standard_special_chars=false );
			$user_id = wp_create_user( $user_name, $random_password, $user_email );
			$result['user_id'] = $user_id;
			wp_json_encode($result);
		}
		
		die();
	}
}

sedangkan untuk memanggil action wp ajax kita harus mendeklarasikan fungsi ajax kita menggunakan jQuery, contohnya:

var data = {
		action: 'create_user_example',
		'user_name': jQuery('#user_name'),					
		'user_email': jQuery('#user_email'),					
	};

jQuery.ajax({
	type: 'POST',
	dataType : 'json',
	url: deczen_example.ajaxUrl,
	data: data,
	success: function( response ) {			
		if( response['user_id'] ){
			alert( 'user with id: '+ response['user_id'] +' was added as new user' );
		}
	}
});

Namun sebelum kita dapat menjalankan script-script di atas, kita perlu mendeklarasikan ajaxUrl terlebih dahulu. Berikut adalah contohnya:

add_action( 'wp_enqueue_scripts', 'enqueue_script' );

function enqueue_script(){
	$localize = array('ajaxUrl'=> admin_url().'admin-ajax.php');
	wp_localize_script('jquery','deczen_example',$localize);
}

Demikianlah tutorial singkat cara menggunakan ajax pada WordPress. Semoga bermanfaat.

Referensi:
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_%28action%29
https://codex.wordpress.org/AJAX