Ajaxを利用して絞り込み検索【WordPress】

作成するのはこんなものです..↓ ↓ ↓

とりあえずコード全部

functions.php

<?php

//***--- Ajax絞り込み検索カスタム投稿登録
function my_ajax_search_filter() {
	register_post_type(
	'ajaxsearchfilter',
	array(
	'labels' => array(
		'name' => 'Ajax絞り込み検索',
		'add_new_item' => 'Ajax絞り込み検索を追加',
		'edit_item' => 'Ajax絞り込み検索を編集',
		'all_items' => 'Ajax絞り込み検索一覧',
	),
	'public' => true,
	'menu_position' => 6,
	'supports' => array(
        'title',
        'editor',
        'thumbnail'
	),
	'has_archive' => true,
	'rewrite' => array ( //ページのURLを/ajaxsearchfilter/にする
		'with_front' => false
	),
	));

	//色
	register_taxonomy( 'ajaxsearchfilter_color',
		'ajaxsearchfilter',
		array(
		'labels' => array( 'name' => '色' ),
		'hierarchical' => true,
		'rewrite' => array ( 
			'slug' => 'color',
		),
		'show_in_rest' => true, //Gutenbergオン
	));

	//値段
	register_taxonomy( 'ajaxsearchfilter_price',
		'ajaxsearchfilter',
		array(
		'labels' => array( 'name' => '値段' ),
		'hierarchical' => true,
		'rewrite' => array ( 
			'slug' => 'price',
		),
		'show_in_rest' => true, //Gutenbergオン
	));

}
add_action('init', 'my_ajax_search_filter');

//***--- 絞り込み結果取得
function filterResults() {
	$search = $_POST['search'];
    $color = $_POST['color'];
    $price = $_POST['price'];

	$arg = array(
		'post_type' => 'ajaxsearchfilter',
		'post_per_page' => -1,
		's' => $search,
        'tax_query' => array(
            'relation' => 'AND', //両方あてはまる=AND どちらかがあてはまる=OR 
            array(
                taxonomy => 'ajaxsearchfilter_color',
                'field' => 'slug',
                'terms' => $color
            ),
            array(
                taxonomy => 'ajaxsearchfilter_price',
                'field' => 'slug',
                'terms' => $price
            ),
        )
	);

	$posts = get_posts($arg);
	$list = array();
	foreach($posts as $post) {
		setup_postdata($post);
		$list[] = array(
			'object' => $post,
			'id' => $post->ID,
			'title' => $post->post_title,
			'content' => $post->content,
			'image' => get_the_post_thumbnail($post->ID, 'full'),
			'link' => get_permalink($post->ID)
		);
	}
	header("Content-type: application/json");
	echo json_encode($list);
	exit;
}
add_action( 'wp_ajax_filterResults', 'filterResults' );
add_action( 'wp_ajax_nopriv_filterResults', 'filterResults' );


//***--- JavaScript読み込み
function my_ajax_filter_search_scripts() {
	
	if(is_page('ajax-search-filter')) {
		//PHPの値を参照したいJavaScriptファイル
		wp_enqueue_script( 'my-ajax-search-filter', get_template_directory_uri() . '/assets/js/my-ajax-search-filter.js', [ 'jquery' ], '1.0.0', true );

		//JavaScriptに渡す値の設定 admin_url.ajax_urlの形式で参照できるようになる
		wp_localize_script('my-ajax-search-filter', 'admin_url', array(
			'ajax_url' => admin_url('admin-ajax.php')
		));
	}
}
add_action( 'wp_enqueue_scripts', 'my_ajax_filter_search_scripts' );

固定ページ用テンプレート

<input type="text" name="search" id="ajax-search-filter-keywords" placeholder="フリーワード検索"><br>
<select name="color" id="ajax-search-filter-color">
    <option name="default" value="seleccionar">選択してください</option>
    <?php
        $terms = get_terms('ajaxsearchfilter_color', array(
            'hide_empty' => true
        ));
        foreach($terms as $term) {
            echo '<option value="'. $term->slug .'">' . $term->name .'</option>';
        }
    ?>
</select><br>
<select name="price" id="ajax-search-filter-price">
    <option name="default" value="seleccionar">選択してください</option>
    <?php
        $terms = get_terms('ajaxsearchfilter_price', array(
            'hide_empty' => true
        ));
        foreach($terms as $term) {
            echo '<option value="'. $term->slug .'">' . $term->name .'</option>';
        }
    ?>
</select><br>
<button type="button" id="ajax-search-filter-button">検索</button> 
<div id="ajax-search-filter-results"></div>

my-ajax-search-filter.js(functions.phpで読み込み)

$(function(){

    $('#ajax-search-filter-button').on('click', function(){

        $('#ajax-search-filter-results').html(''); //結果を空に

        var keywords = $('#ajax-search-filter-keywords').val(); //フリーワード欄に入力された値を取得
        var color = $('#ajax-search-filter-color').val(); //フリーワード欄に入力された値を取得
        var price = $('#ajax-search-filter-price').val(); //フリーワード欄に入力された値を取得

        var postData = {
            action: 'filterResults', //php側で記述する
            search: keywords, //php側でPOSTで受け取る
            color: color, //php側でPOSTで受け取る
            price: price //php側でPOSTで受け取る
        }

        $.ajax({
            url: admin_url.ajax_url,
            type: 'post',
            data: postData //phpを実行して探すデータ
        }).done(function(response) {
            $.each(response, function(index, object) {
                var results = '<div class="row">';
                results += '<div class="columns">';
                results += '<a href="' + object.link + '">';
                results += object.title + '<br>';
                results += object.image;
                results += '</a>';
                results += '</div>';
                results += '</div>';

                $('#ajax-search-filter-results').append(results);
            });
        });
    });


});

解説は後日追加します…すみません…