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