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