yuheijotaki.com

2016/08/04 : 
WordPress カスタムフィールド検索/get_posts で json へ格納/ajax で出力

◯HTML(あらかじめ選択項目はカスタムフィールドで作成する)

<select class="select_01">
	<option value="select_01_01">選択項目1_1</option>
	<option value="select_01_02">選択項目1_2</option>
	<option value="select_01_03">選択項目1_3</option>
</select>
<select class="select_02">
	<option value="select_02_01">選択項目2_1</option>
	<option value="select_02_02">選択項目2_2</option>
	<option value="select_02_03">選択項目2_3</option>
</select>
<input class="button" type="submit" value="検索">

<ul class="result">
	<!-- ここに結果が出力 -->
</ul>

 
◯JS

<script>
$(function(){
	// 2重クリック防止フラグ
	var click_flag = true;

	// ボタンクリックイベント
	$('.button').click(function(e){
		if ( click_flag ) {
			click_flag = false;

			// セレクトボックスで選択されているvalueを取得
			var select_01 = $('.select_01').val();
			var select_02 = $('.select_02').val();
			$.ajax({
				type: "POST",
				url: ajaxurl,
				data: {
					// データ受け渡し
					'select_01' : select_01,
					'select_02' : select_02,
					'action' : 'ajax_get_posts',
				},
				success: function( response ) {
					jsonData = JSON.parse( response );
					var count = jsonData.length;
					if ( count == '0' ) {
						// 検索結果がない場合
					} else {
						// リストに出力
						$.each( jsonData, function( i, val ){
							$('.result').append('<li><a href="' + val['permalink'] + '">' + val['post_title'] + '</a></li>');
						});
					}
					click_flag = true;
				},
				error: function( response ) {
					// ajaxエラーの場合
					click_flag = true;
				}
			});
		}
	});
});
</script>

 
◯PHP

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



// get_postsでデータをjsonへ
function ajax_get_posts(){
	// jsから受け渡しするデータ
	$select_01 = $_POST['select_01'];
	$select_02 = $_POST['select_02'];

	$returnObj = array();

	// get_posts オプション
	$args = array(
		'post_type' => 'post',
		'numberposts' => -1,
		'meta_query' => array(
			'relation' => 'AND',
			array(
				'key' => 'select',
				'value' => $select_01,
				'compare' => 'LIKE'
			),
			array(
				'key' => 'select',
				'value' => $select_02,
				'compare' => 'LIKE'
			)
		)
	);
	$posts = get_posts( $args );
	foreach( $posts as $key => $post ) {
		$returnObj[$key] = array(
			// 出力するデータを格納
			'post_title' => $post->post_title,
			'permalink' => get_permalink( $post->ID ),
		);
	}

	// json形式に出力
	echo json_encode( $returnObj );
	die();
}
add_action( 'wp_ajax_ajax_get_posts', 'ajax_get_posts' );
add_action( 'wp_ajax_nopriv_ajax_get_posts', 'ajax_get_posts' );
?>

JSで格納した変数(セレクトボックスのvalue値)の受け渡しに引っかかりましたが data としていれてあげて $_POST で受け取りをしてくれるとのこと。チェックボックスなど複数選択の場合はもう少し複雑で meta_query の指定などを変更する必要あり。
 
◯参考
WordPressでAjaxを使う方法の解説 | hijiriworld Web
jQuery:Ajaxを使用してPOST送信でデータ取得 | raining
query_posts(WP_Queryクラス)でカスタムフィールドを使う:WordPress私的マニュアル