워드프레스 Ajax 사용 – admin side

qpress 2020년 1월 28일 37

워드프레스 테마 또는 플러그인 개발 시 Ajax 사용은, 워드프레스 고유의 방식이 있다. admin 사이드와 Front-end 에서의 사용방식이 차이가 있는데, 이 글에서는 먼저 admin 사이드에서의 사용법을 알아 보자.

Step 1. Ajax action 함수 생성

Ajax 호출 시 처리되는 로직을 다루는 php 함수를 먼저 생성해야 한다. 테마의 functions.php 파일 또는 include 되는 php 파일에 다음 샘플과 같이 함수를 만들고 action을 추가 한다.

add_action( 'wp_ajax_my_action', 'my_action' );
function my_action() {
	$whatever = intval( $_POST['whatever'] );
	$whatever += 10;
        echo $whatever;
	wp_die(); // this is required to terminate immediately and return a proper response
}

함수 명이 ‘my-action’이면 add_action의 handle 명에도 위의 예제와 같이 ‘wp_ajax_my_action’으로 설정해 두어야 한다. 즉 wp_ajax_함수명이 되어야 한다.

Step2. Ajax request script

일반적으로 JavaScript를 사용하여 Ajax로 특정 action을 요청하게 되는데, 위의 샘플에서 정의한 Action을 JavaScript로 호출하는 방식은 다음과 같다.

jQuery(document).ready(function($) {
	var data = {
		'action': 'my_action',
		'whatever': 1234
	};
	jQuery.post(ajaxurl, data, function(response) {
		alert('Got this from the server: ' + response);
	});
});

‘ajaxurl’은 워드프레스 Core의 ajax action 위치를 말하며, ‘action’: ‘my_action’을 통해 Step1에서 정의한 action 함수를 찾게 되는 방식이다.

워드프레스 버전 2.8 이후부터 ‘ajaxurl’은 관리자 사이드 즉 admin 패널에서만 가능하도록 되어 있으며, Front-end 에서는 별도의 ajaxurl 설정을 해야 하는데, 이 방식은 다음 글에서 다루도록 하자.