WordPressとajax (１)

<?php
/* テンプレート内にでも */
$lists = '';
$args = array(
	'orderby' => 'menu_order',
	'order' => 'ASC',
	'hide_empty' => 0
);
$categories = get_categories( $args );
foreach( $categories as $value ){
	if( $value->parent === 0 ){
		$lists .= '<label>';
		$lists .= '<input type="checkbox" name="term_id[]" value="' . esc_attr( $value->count ) . '">';
		$lists .= esc_html( $value->name );
		$lists .= '</label>' . "\n";
	}
}
?>
<form method="get" id="searchform">
	<div><?php echo $lists; ?></div>
	<div>該当件数：<span id="search-result-count"></span>件</div>
	<div><input type="submit" value="検索"></div>
</form>

/* functions.phpなど */
add_action('wp_enqueue_scripts', 'my_load_scripts');
function my_load_scripts() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-migrate' );
}

/* functions.phpなど */
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
	$handle = 'sample_handle'; // 1. JSファイルにhandle名を付ける
	$action = 'sample-ajax-action'; // 2. Ajaxのアクション名
	$object_name = 'sampleAjax'; // 3. JSで扱う変数名

	// 4. ajaxの指示を書いたjsファイルの読み込み。外部ファイル
	wp_enqueue_script( $handle, get_template_directory_uri().'/js/script-ajax.js', array( 'jquery' ) );

	// 5. JS側へAjaxで使う各パラメータを渡す
	wp_localize_script( 
		$handle, 
		$object_name, 
		array(
			'url' => admin_url( 'admin-ajax.php' ),
			'action' => $action,
			'nonce' => wp_create_nonce( $action ),
		) 
	);
	wp_enqueue_script( $handle );
}

/* 公開側のhead内に出されたもの */
<script id='sample_handle-js-extra'>
var sampleAjax = {"url":"http:\/\/xxx.com\/wordpress\/wp-admin\/admin-ajax.php","action":"sample-ajax-action","nonce":"f15adbcb77"};
</script>

/* script-ajax.js */
(function($) {
	$(function (){

		$("#searchform").change(function() {
			seachMatchCount();
		});

		function seachMatchCount(){
			$.ajax({
				type: 'POST',
				url: sampleAjax.url, // A
				dataType: 'json',
				data: {
					action : sampleAjax.action, // A
					nonce: sampleAjax.nonce, // A
					terms : term_id // B
				}
			}).done( function( data ) {
				// 成功時。出力する部分（処理）
				$('#search-result-count').html(data);
			}).fail( function( XMLHttpRequest, textStatus, error ){
				// 通信失敗時のコールバック処理
				console.log( 'XMLHttpRequest : ' + XMLHttpRequest.status );
				console.log( 'textStatus     : ' + textStatus );
				console.log( 'errorThrown    : ' + error.message );
			}).always(function (data) {
				// 常に実行する処理
			});
		}

	});
})(jQuery);

/* functionsとかに */
add_action( 'wp_ajax_sample-ajax-action', 'get_match_count' );
add_action( 'wp_ajax_nopriv_sample-ajax-action', 'get_match_count' );

function get_match_count(){
	$count = 0;
	if( $_SERVER['REQUEST_METHOD'] === 'POST' && check_ajax_referer( 'sample-ajax-action', 'nonce' ) ) {
		terms = filter_input( INPUT_POST, 'terms', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY );
		if( isset( $terms ) ){
			foreach( $terms as $value ) $count = $count + (int)$value;
		}
	}
	header("Content-type: application/json; charset=UTF-8");
	echo json_encode( $count );
	wp_die();
}

/* PHP */
add_action( 'wp_ajax_(アクション名)', '処理関数名' );
add_action( 'wp_ajax_nopriv_(アクション名)', '処理関数名' );
function 処理関数名(){
	if( $_SERVER['REQUEST_METHOD'] === 'POST' && check_ajax_referer( 'アクション名', 'nonce' ) ) {
		// 処理を記述
	}
	header("Content-type: application/json; charset=UTF-8");
	echo json_encode( JSに返す変数 );
	wp_die();
}