WordPressプラグイン Search & FilterのチェックボックスをOR条件にする設定
とあるWordPressサイトで「複数選択可能なチェックボックスでタグを表示し、チェックしたタグの何れかが該当するエントリーをリストアップする」という事がやりたくなったので、なるべく簡単に実装出来ないか調べてみたところ Search & Filter というプラグインで何とかなりそうだとわかりました。
その「とあるサイト」というのは私の趣味と（限りなく0に近い）実益を兼ねてひっそり運営中の音楽系サイトだったりしますが、それはさておきプラグイン公式のドキュメントを見ながらああでもないこうでもないと設定した内容を備忘録として残しておきたいと思います。
当エントリーはショートコードのオプションに関する補足的な説明がメインなので、プラグインのインストール手順や基本的な設定などについては触れていませんがその点は予めご了承ください。また、いつ頃になるかは不明ですがUIで設定が可能になる Search & Filter v3（現在βテスト中）がリリースされるという話があるのでそれを待つ選択肢もありそうです。
今回 Search & Filter で実装したかった事
例えばカテゴリーとタグのチェックボックスが以下のような場合
- カテゴリー：A・Bにチェック
- タグ：C・D・Eにチェック
カテゴリーが A または B で、かつタグが C か D か E のエントリーを表示したい、みたいな。
それっぽく式で書くとこんな感じ？でしょうか。
（カテゴリー = A or B）and（タグ = C or D or E）
ところがこれ、types を checkbox にしただけではそうならないんですよね…ぐぬぬ。
ショートコードのサンプル
という事で私が設定したショートコードの一例です。
[searchandfilter fields="search,category,post_tag" types=",checkbox,checkbox" headings=",Category,Tags" operators=",OR,OR" order_by=",term_group,term_group" search_placeholder="＠プレースホルダーテキストなのでお好きなように＠"]WIP的な感じなのでまだ手を加える可能性はありますが、現時点ではこちらのサイトでこのショートコードをそのまま貼り付けて使用しているので参考になれば幸いです。
https://heavyrockfreakz.com/各オプションの説明
fields 以降の各パラメータは fields で指定した順に ,（カンマ）で区切って指定するという基本的なフォーマットを理解している前提ですが、以下の表に要点をまとめてみました。
| 項目名 | オプション | 備考 |
|---|---|---|
| fields | search category post_tag | ※必須項目 サーチ、カテゴリー、タグを使用 |
| types | 無し checkbox checkbox | 選択フィールドのタイプ デフォルトは select ここでチェックボックスを指定 |
| headings | 無し Category Tags | 各項目の見出しなので好きな文言を設定 見出しが不要なフィールドはブランクで 見出しはh4タグで括られます |
| operators | 無し OR OR | 複数選択が可能な場合（チェックボックスなど）の条件 デフォルトは AND AND：全て合致したら対象 OR：何れか1つでも合致したら対象 |
| order_by | 無し term_group term_group | チェックボックスの表示順 デフォルトは name（≒アルファベット順） term_group でWordPress上の表示順と同じに |
| search_placeholder | 任意のテキスト | 検索ワード入力部分のプレースホルダーテキスト デフォルトは Search … |
ショートコード内のパラメータを見易くしようと ,（カンマ）の後ろに半角スペースを入れたりすると想定した結果にならないので注意しましょう。
オプション設定について補足
上の表の備考欄と内容はかぶりますが少し補足を。
fields に category や post_tag を指定した場合、デフォルトではプルダウンメニューから選択する形になりますが、types に checkbox と指定する事でチェックボックス表示にする事が可能です。もちろんその場合はカテゴリーやタグの内容を自動で一覧表示してくれます。
今回ここで問題になったのはデフォルトだとチェックしたタグが全てAND条件になってしまうので「チェックしたタグの何れか1つでも該当すれば対象」にしたい場合はこれをOR条件にしなければなりませんでした。という事で operators に OR を指定しています。
チェックしたタグ全てが該当した場合を対象にしたい場合はこの限りではありません。
尚、このオプション項目の説明はダッシュボードから見られる Search & Filter のドキュメントには無く、プラグイン公式サイトのドキュメントにしか記載されていないようです。チェックボックスにした時はわりと必要になりそうな項目じゃないかと思うんですが…これがすぐ見つかってたら今回の件はあっさり解決出来たんですけどね？
これ以外にも
- show_count：カテゴリーやタグの該当件数を表示
- empty_search_url：検索条件を選択せず送信した場合のリダイレクト先を指定
- add_search_param：検索ワードが空白でもURLに ?s= または &s= を追加
このようなオプションがいくつかあったので、一度はこちらのドキュメントにも目を通しておいた方がよろしいかと思われます。
https://free.searchandfilter.com/スタイリングについて
ぶっちゃけデフォルトのままだと微妙な感じです、マージンとかフォント的な意味で。特に拘らない方はそのままでも機能的に支障は無いと思いますが、気になる方はcssで体裁を整えた方がいいでしょう。
このプラグインで作成される部分は以下のようなタグで括られるので
<form class="searchandfilter" action="" method="post">
</form>cssはこんな感じでOKのようです。
.searchandfilter label {}
.searchandfilter h4 {}ダッシュボードから Search & Filter >Styling >Please see CSS file for base styles used. をクリックしてそこに記述されているcssを参考にするといいでしょう。
検索ワードの入力部分やサブミット用のボタンはこんな感じでいけました。
.searchandfilter input[name="ofsearch"] {}
.searchandfilter input[type="submit"] {}例外として見出し部分のフォントなどは使用しているテーマによってこの指定では効かない場合もあるので、!important で強制するか優先度が高くなるよう調整する必要がありそうです。
フィルタリング結果の見出しについて
実は今回これだけは如何ともし難いので諦めようと思っている事が1つありまして。
と言うのは Submit した後に表示される検索結果的なページの見出し部分なんですが、カテゴリーやタグを複数選択しても先頭の1つしか表示されないというものです。
ここはテーマによって変わってくるようで中にはちゃんと複数のタグが表示されるテーマもあるらしいですが、検索用のワードを入力したりカテゴリーとタグの両方にチェックを入れた場合など、想定される全てのケースにおいて満足のいく表示にしたかったら恐らくテンプレートにまで手を入れないと出来ないんじゃないかと思われます。
Pro版や他の有料プラグインではその辺りまできっちりサポートしているかもしれませんが、さすがに趣味の延長線上のようなサイトでそこまでしようとは思えないので、私はひとまず今回はここまででよしとしたいと思います。
とか言いつつ諦めは悪い人なので気が向いたらまた何とか出来ないか考えてみるつもりはありますけどね？
データベース系サイトによさげ
当エントリーで使用例としてリンクを貼った私のサイトには本文らしきコンテンツが一切無いのでGoogle的には間違いなく「価値の無いサイト」扱いされていると思いますが、そこまでじゃなくてもブログと言うよりいわゆるデータベース的な感じで特定のジャンルの情報を掲載しているようなサイトでフィルタリングをしたい場合なんかに利用するといいんじゃないでしょうか。
という事であまり需要は無いかもしれませんが、Search & Filter のチェックボックスをOR条件で使用する設定の紹介でした。少しでもどなたかのお役に立てば幸いです。