質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,329

score 20

前提・実現したいこと

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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

リアルタイムにということであれば、現在の延長でやるより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 です

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る