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私的マニュアル