hijiriworld Web

基本の解説

STEP1. リクエスト送信先のパス

WordPress で Ajax を使う場合 /wp-admin/admin-ajax.php にリクエストを送ることに決まっている。
JavaScript ファイル内で動的にパスを指定することはできないので、wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力しておく。

> functions.php

function add_my_ajaxurl() {
?>
	<script>
		var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
	</script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

wp_head アクションにフックすることで head 要素内に JavaScript のグローバル変数としてパスが出力される。
これで、以後実行される JavaScript 内でこの変数が使える。

※ JavaScript ファイルを body要素最下部に配置するのは基本なので、wp_footer にフックしてもいい。
wp_enqueue_script を使う場合は、第5引数を true にすること。

STEP2. 呼び出すPHP関数の作成

JavaScript から呼び出す PHP 関数を定義する。
まずは簡単に get_bloginfo( ‘name’ ) で取得される”サイト名”を返すだけの関数とする。

> functions.php

function view_sitename(){
	echo get_bloginfo( 'name' );
	die();
}
add_action( 'wp_ajax_view_sitename', 'view_sitename' );
add_action( 'wp_ajax_nopriv_view_sitename', 'view_sitename' );

wp_ajax_{action} で独自のアクションフックを登録することができる。
wp_ajax_{action} はログインユーザ、wp_ajax_nopriv_{action} は未ログインユーザ用なので、フロントでAjaxを使いたい場合は両方にアクションフックを登録しておくこと。

STEP3. JavaScripの作成

> template

<button id="submit">View Sitename</button>

jQuery の $.ajaxメソッドを使うパターンで解説。

> JavaScript

$( '#submit' ).on( 'click', function(){
	$.ajax({
		type: 'POST',
		url: ajaxurl,
		data: {
			'action' : 'view_sitename',
		},
		success: function( response ){
			alert( response );
		}
	});
	return false;
});

url に指定するリクエスト送信先のパスは、STEP1 でグローバル変数 ajaxurl を指定する。
action に指定するのは STEP2 で登録したアクションフック。
これで STEP2 の view_sitename PHP関数が実行され、echo された値が response に戻ってくるので、それをまた JavaScript 側で処理すればオケ。

応用

変数を渡す

> JavaScript

$( '#submit' ).on( 'click', function(){
	
	var mes = 'Hello World!!';
		
	$.ajax({
		type: 'POST',
		url: ajaxurl,
		data: {
			'action' : 'view_mes',
			'mes' : mes,
		},
		success: function( response ){
			alert( response );
		}
	});
	return false;
});

> functions.php

function view_mes(){
	$mes = $_POST['mes'];
	echo $mes;
	die();
}
add_action( 'wp_ajax_view_mes', 'view_mes' );
add_action( 'wp_ajax_nopriv_view_mes', 'view_mes' );

結果は「Hello World!!」

配列データをJSON形式でやりとりする

post type = post のコンテンツの、記事タイトルとパーマリンクURLを取得するサンプル。

> JavaScript

(function($){

	$( '#submit' ).on( 'click', function(){
		
		$.ajax({
			type: 'POST',
			url: ajaxurl,
			data: {
				'action' : 'my_ajax_get_posts',
			},
			success: function( response ){
				jsonData = JSON.parse( response );
				$.each( jsonData, function( i, val ){
					alert( val['post_title'] );
					alert( val['permalink'] );
				});
			}
		});
		return false;
	});

})(jQuery)

> functions.php

function my_ajax_get_posts(){
	
	$returnObj = array();
	
	$args = array(
		'post_type' => 'post',
		'numberposts' => 5,
	);
	
	$posts = get_posts( $args );
	
	foreach( $posts as $key => $post ) {
		$returnObj[$key] = array(
			'post_title' => $post->post_title,
			'permalink' => get_permalink( $post->ID ),
		);
	}
	
	echo json_encode( $returnObj );
	
	die();
}
add_action( 'wp_ajax_my_ajax_get_posts', 'my_ajax_get_posts' );
add_action( 'wp_ajax_nopriv_my_ajax_get_posts', 'my_ajax_get_posts' );

参考:
Plugin API/Action Reference/wp ajax (action)
Wp Ajax – WordPress Hook to Handle Ajax Request