こんにちは、KNAPの足立です。
今回社内ブログのリニューアルにあたって記事一覧ページの絞り込みを実装したので、どういうことをやっているのかブログを書こうと思いました！
絞り込みは一覧ページの角丸ボタンを押すとできる仕様です。

絞り込み一覧表示のロジック

大きく分けて3つの流れで実装しています

ベージを表示させたタイミングでurlのパラメータを取得

取得後”tagsearch”という文字列のパラメータが存在すればそれをキーにtagsearchの配列を形成させる

記事一覧を表示させるための構築しているqueryにtaxquryでアクセスし、先ほど形成したtagsearchの配列を追加することで表示しているカテゴリーかつtagsearchの配列(ターム)を含んだ投稿の一覧を表示させることができるというわけです。

ベージを表示させたタイミングでURLのパラメータを取得

PHPの$_GET(GET変数)を使用し、ページを表示させた時にURLに付与されてるパラメータを配列として取得します。

https://knap.jp/blog/category/seisaku?tagsearch%5B0%5D=coding&tagsearch%5B1%5D=design

例えば上記のようなURLの場合で$_GETを用いて取得すると、下記のような連想配列が取得できます。

$_GET = array(
    "tagsearch" => array(
        0 => "coding",
        1 => "design"
    )
);

こちらを活用して次のステップに進みます。

URLパラメータ取得後”tagsearch”という文字列のパラメータが存在しない場合は空の配列を作成

ALL選択時といった場合のように常にパラメータtagseach文字列があるわけではないので、ない場合も考慮して

$terms_selected = isset($_GET['tagsearch']) ? (array)$_GET['tagsearch'] : array();

isset関数を使用しtagsearchパラメータが存在するかを確認します。

確認後’tagsearch’ が存在しない場合は、空の配列が代入します。

記事一覧を表示させるための構築しているqueryにtaxquryでアクセスし、先ほど形成したtagsearchの配列を追加する

下記のコードでクエリを構築しているのですが、

      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 9,
        'paged' => $paged,
        'tax_query'      => array(
          'relation' => 'AND',
          array(
              'taxonomy' => 'category',
              'field'    => 'slug',
              'terms'    => 'seisaku',
              'operator' => 'IN',
          ),
        ),
      );
      if (!empty($terms_selected)) {
        $args['tax_query'][] = array(
          'taxonomy' => 'bunrui',
          'field'    => 'slug',
          'terms'    => $terms_selected,
          'operator' => 'IN',
        );
      }

大事な箇所は

     'relation' => 'AND',

      if (!empty($terms_selected)) {
        $args['tax_query'][] = array(
          'taxonomy' => 'bunrui',
          'field'    => 'slug',
          'terms'    => $terms_selected,
          'operator' => 'IN',
        );
      }

上記２箇所です。

$argsに表示させたいカテゴリー(上記だとseisakuカテゴリー)の投稿データを格納し構築します。

その後$terms_selectedが空でない、つまりURLにtagsearchのパラメータがある場合、tax_queryというクエリパラメータを通して、$terms_selectedに格納されてるものとbunruiタクソノミーの内のタームのスラッグとを比較し一致するタームスラッグの投稿データを格納させ、$argsに追加させます。

そして$argsの ‘relation’ => ‘AND’,には指定された条件に満たされるものだけデータを格納させることができるので、上記の例だとseisakuカテゴリーかつ$terms_selectedに指定されたタームだけ投稿データの格納をすることができ、絞り込みができるというわけです！あとはループを使って記事を表示させていきます！

こんな感じです！
何度か試行錯誤しながら実装しましたが、実装できると嬉しいですね！
では本日はこの辺で〜🖐️