WordPressの絞り込み検索をリアルタイムで行いたい

Question

前提・実現したいこと

WordPressの絞り込み検索をリアルタイムで行いたい

jQueryで現在表示されている記事の中からリアルタイムに絞り込むことは出来たがページネーションがすると条件が継続されない
またcssでdisplay:noneとして記事を消しているため条件に合う10件の記事を表示することが出来ないです

知りたいこと

・jQueryで絞り込みを行ったデータをPHPのクエリーに入れて分岐させることは出来るでしょうか？
・jQueryで絞り込みを行った条件を継承したページネーションはWordPressで可能でしょうか？

基本的には以下のサイトを参考に実装しました。
参考：
jQueryでリスト表示を絞り込む処理を実装する

該当のソースコード

archive.php

<?php $args = array (
  'post_type' => array('product'),
  'posts_per_page' => 10,
  'paged' => $paged
); ?>
<?php $the_query = new WP_Query( $args ); ?>
<form>
	<input id="js-reset-button" type="reset" value="リセット">
	<div class="search-box">
		<span class="search-box_label">カテゴリー</span>
		<input type="checkbox" name="category" value="カテゴリー1">カテゴリー1
		<input type="checkbox" name="category" value="カテゴリー2">カテゴリー2
		<input type="checkbox" name="category" value="カテゴリー3">カテゴリー3
	</div>
	<div class="search-box">
		<span class="search-box_label">タグ</span>
		<input type="checkbox" name="tag" value="タグ1">タグ1
		<input type="checkbox" name="tag" value="タグ2>タグ2
		<input type="checkbox" name="tag" value="タグ3">タグ3
	</div>
</form>

<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$terms = get_the_terms( $post->ID, 'product');
if ( !empty($terms) && !is_wp_error($terms) ) {
  foreach( $terms as $term ) :
    $term_array[$post->ID][] = $term->name;
  endforeach;
  $product = '"'.implode('","',$term_array[$post->ID]).'"'; 
} else {
  $product ="";
};

$terms = get_the_terms( $post->ID, 'tag');
if ( !empty($terms) && !is_wp_error($terms) ) {
  foreach( $terms as $term ) :
    $term_array[$post->ID][] = $term->name;
  endforeach;
  $tag = '"'.implode('","',$term_array[$post->ID]).'"'; 
} else {
  $tag ="";
};
?>

<li class="list_item" 
    data-category='[<?php echo $category; ?>]' 
    data-tag='[<?php echo $tag; ?>]'
>
  <a href="<?php the_permalink(); ?>">
    <h2><?php the_title(); ?></h2>
  </a>
</li>
<?php endwhile; ?>
<?php endif; ?>

script.js

/****************************************************************
 * 絞り込み検索
 ****************************************************************/
var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
var listItem = '.list_item';   // 絞り込み対象のアイテム
var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名

$(function() {
	// 絞り込み項目を変更した時
	$(document).on('change', searchBox + ' input', function() {
		search_filter();
	});
});

/**
 * リストの絞り込みを行う
 */
function search_filter() {
	// 非表示状態を解除
	$(listItem).removeClass(hideClass);
	for (var i = 0; i < $(searchBox).length; i++) {
		var name = $(searchBox).eq(i).find('input').attr('name');
		// 選択されている項目を取得
		var searchData = get_selected_input_items(name);
		// 選択されている項目がない、またはALLを選択している場合は飛ばす
		if(searchData.length === 0 || searchData[0] === ''|| searchData[0] === '') {
			continue;
		}
		// リスト内の各アイテムをチェック
		for (var j = 0; j < $(listItem).length; j++) {
			// アイテムに設定している項目を取得
			var itemData = get_setting_values_in_item($(listItem).eq(j), name);
			// 絞り込み対象かどうかを調べる
			var check = array_match_check(itemData, searchData);
			if(!check) {
				$(listItem).eq(j).addClass(hideClass);
			}
		}
	}
}

/**
 * inputで選択されている値の一覧を取得する
 * @param  {String} name 対象にするinputのname属性の値
 * @return {Array}       選択されているinputのvalue属性の値
 */
function get_selected_input_items(name) {
	var searchData = [];
	$('[name=' + name + ']:checked').each(function() {
		searchData.push($(this).val());
	});
	return searchData;
}

/**
 * リスト内のアイテムに設定している値の一覧を取得する
 * @param  {Object} target 対象にするアイテムのjQueryオブジェクト
 * @param  {String} data   対象にするアイテムのdata属性の名前
 * @return {Array}         対象にするアイテムのdata属性の値
 */
function get_setting_values_in_item(target, data) {
	var itemData = target.data(data);
	if(!Array.isArray(itemData)) {
		itemData = [itemData];
	}
	return itemData;
}

/**
 * 2つの配列内で一致する文字列があるかどうかを調べる
 * @param  {Array} arr1 調べる配列1
 * @param  {Array} arr2 調べる配列2
 * @return {Boolean}    一致する値があるかどうか
 */
function array_match_check(arr1, arr2) {
	// 絞り込み対象かどうかを調べる
	var arrCheck = false;
	for (var i = 0; i < arr1.length; i++) {
		if(arr2.indexOf(arr1[i]) >= 0) {
			arrCheck = true;
			break;
		}
	}
	return arrCheck;
}

style.css

.is-hide {
	display: none;
}

Answer 1

今のコードの延長でやろうとすると泥臭い処理をやらなきゃいけない気配

リアルタイムにということであれば、現在の延長でやるよりajax、WP APIでの実装を推奨
ページネーションもWPのpagenate_linksなどサーバーサイドで出力するのではなく
フロント側でやったほうがスムーズかと思います

なんならWP内蔵のReactを使う感じで

wp-api-fetch
wp-element
wp-json/wp/v2/posts
React

以下WP内蔵のReactでWP APIでpost一覧を取得して表示するサンプル

<?php
wp_enqueue_script('wp-element');
wp_enqueue_script('wp-api-fetch');
?>

<div id="MyApp"></div>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded',function(){
		const PostsList=()=>{
			const el=wp.element.createElement;
			const [posts,setPosts]=wp.element.useState([]);
			return [
				el('ul',{},posts.map(
					(post)=>el('li',{},el('a',{href:post.link},post.title.rendered))
				)),
				el('button',{onClick:()=>{
					wp.apiFetch({path: '/wp/v2/posts'}).then(posts=>{
						console.log(posts);
						setPosts(posts);
					});
				}},'Load Pots')
			];
		}
		wp.element.render(
			wp.element.createElement(PostsList),
			document.getElementById('MyApp')
		);
	});
</script>

wp.element=React です