こんにちは、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',
);
}
上記2箇所です。
$argsに表示させたいカテゴリー(上記だとseisakuカテゴリー)の投稿データを格納し構築します。
その後$terms_selectedが空でない、つまりURLにtagsearchのパラメータがある場合、tax_queryというクエリパラメータを通して、$terms_selectedに格納されてるものとbunruiタクソノミーの内のタームのスラッグとを比較し一致するタームスラッグの投稿データを格納させ、$argsに追加させます。
そして$argsの ‘relation’ => ‘AND’,には指定された条件に満たされるものだけデータを格納させることができるので、上記の例だとseisakuカテゴリーかつ$terms_selectedに指定されたタームだけ投稿データの格納をすることができ、絞り込みができるというわけです!あとはループを使って記事を表示させていきます!
こんな感じです!
何度か試行錯誤しながら実装しましたが、実装できると嬉しいですね!
では本日はこの辺で〜🖐️