投稿日：2020年8月13日
はじめに、WordPress 絞り込み検索 Plug-In Search & Filter Pro に関する記事は、当サイト以外にも有用なサイトがたくさんあります。
どのサイトの記事も、よく読み、実際に試行錯誤しながらでないと習得できないと思います。
本記事も習得の一助になればと思います。
最初にお見せします。
今回、作成するものはこちら
本記事は、カスタムフィールドで作成された記事一覧から、プルダウンメニュー、ラジオボタン、検索入力欄、クリアボタンを設置した固定ページの絞り込み検索をゴールとしています。
商品紹介サイトなどで価格、メーカー、色、機能など、項目に応じた絞り込み検索を行う場面は多々あると思います。
そんな時に便利なWordPress 絞り込み検索 Plug-In Search & Filter Pro（有料）を紹介したいと思います。
▲Search & Filter Pro サイト。BUY NOWをクリックします。
▲必要に応じてカートに追加します。
SINGLE SITEは単一サイト向けで$20。DEVELOPERは複数サイト向けで$75。
どちらも年間契約で、支払いが完了するとIDとパスワードが発行され、ダウンロードできるようになります。
▲ダウンロードしたPlug-In。
▲WordPressへのインストールはプラグインのアップロードから行ってください。
▲ダウンロード後、有効化するとメニューに表示されます。
▲Search & Filter Proのトップ画面。Add New Search Formをクリックします。
▲無料版のSearch & Filterもありますが、無論、Pro版ほど高機能ではありません。
購入前に試用してみても良いでしょう。
2020年11月9日 Search & Filter の記事 をアップしました。
▲こちらも併せてご覧いただければと思います。
Search & Filter Proはサイドバーやヘッダ、フッタなどのウィジェットや、投稿ページ、固定ページ、アーカイブページなどのテンプレートページに設置できるなど、組み合わせによって色々な設定が可能です。
今回は、前回カスタムフィールドで作成した山一覧 にカスタムフィールドの検索、検索入力欄、クリアボタンを作成したいと思います。
各設定を見ていきましょう。
General
❶Search in the following post types:
検索する投稿タイプを選択します。
❷Results per page:
ページに表示する検索結果の数を設定します。
❸Auto submit form?
ここにチェックを入れると検索条件に応じて、結果が自動的に表示されるようになり、Submit Buttonボタンが不要になります。逆にチェックを入れないと検索トリガーになるSubmit Buttonが必要になります。
❹Field relationships:
AND検索、OR検索を選択します。必要に応じて選択しましょう。
❺Enable Auto Count:
Enableにチェックを入れると検索ヒット数がカッコ内に表示されます。 表示例：埼玉県(2)
Update the Search Form on user interactionにチェックを入れると検索条件に応じてヒット数を再計算してくれます。
▲Available Fields に表示されているものを下のSearch From UIにドロップします。
Searchは検索語句入力欄、Submit Buttonは検索開始ボタン、Reset Buttonはリセットボタン、Post Metaでカスタムフィールドも検索可能になります。その他はWordPressに馴染み深いTagやCategoryなどを検索対象にします。
今回はPost Meta2つ（カスタムフィールドのprefectures（都道府県）とelevation_value（標高））を検索対象にします。
2020年11月4日 追記
注意として、カスタムフィールドの項目を検索できるのはPost Metaのみのようです。
Searchでカスタムフィールドの内容を検索してもヒットしませんでした。
▲Post Metaのprefectures（都道府県）の設定です。
❶今回はChoice タブだけの設定をします。
❷Input type はDropdown。
❸Add a heading? に「都道府県：」と入力。
❹Change All Items Label? に「選択してください。」と入力。ここはドロップダウンメニューの先頭に表示される文言になります。
❺Add screen reader text? はスクリーンリーダーによって読み取られる非表示のテキストを追加します。
❻Make Conbobox? にチェックをすると下図のようになります。
▼左がチェックなし。右がMake Conbobox? チェックあり。
❼Conbobox No Results message はConboboxの検索対象が見つからなかった場合のメッセージを入力します。（試しましたが反映されませんでした。）
※Make Conbobox? にチェックを入れるのと同時にアクティブになりそうですが、一度更新ボタンをクリックしないとアクティブになりません。バグではないかと思われます。
❽Display count? は含まれている対象のカウントを表示します。
❾Hide Empty? は空のカウント対象を表示しないようにします。
❿Meta Key で検索対象を選択します。カスタムフィールドで設定したprefectures（都道府県）を選びます。
⓫Options でAutomatically（自動）か、Manual Entry（手動）かを選択します。
Automatically（自動）を選んだ場合、下のIs ACF Field? にチェックを入れておけばカスタムフィールドで設定した項目が自動で選べるようになります。（ここでは北海道から沖縄県までのドロップダウンメニュー）
Manual Entry（手動）を選んだ場合、手動でドロップダウンメニューの値とラベルを入力する必要があります。
⓬Order Options by: は値とラベルの並び順を、昇順、降順、アルファベット順、数値順から選択する設定です。
よほどの理由がない限り上図のような設定で大丈夫なはずです。
▲次はPost Metaのelevation_value（標高）の設定です。
ラジオボタンを選択している以外、ほぼ前述と同じ内容になります。
▲Search
検索語句の入力欄です。設定は上図の通り。
▲リセットボタンの設定です。
Input type はLinkとButtonから選択できます。
Submit Form: はフォーム送信に関する設定で、Always（常時送信）、Never（送信しない）、Only when auto submit is enabled（自動送信有効時に送信）から選択します。
Always以外を選択すると検索結果がリセットされない場合があるようで、選択項目の表示も一部崩れてしまう可能性もあります。
Display Results
▲上図のように設定しています。
2021年3月25日追記
Ajaxのチェックは外します。チェックを入れると検索後に検索窓やボタンなどのCSSプロパティが消失し、体裁が崩れます。
ここでは、結果の表示方法をカスタマイズします。
アーカイブページを検索対象にするのか、投稿ページを検索対象にするのか、ショートコードを利用してページを指定するのか、などの設定や、検索結果の、どの箇所にスクロールさせるかなど。
他にもヒット数が大量にある場合の無限スクロールの設定などを設定します。
Posts
投稿記事に関する設定です。
❶Post Status:
投稿記事のステータスで検索範囲を選択します。
❷Exclude Post IDs:
除外する投稿のIDを入力します。
❸Sticky Posts:
固定投稿を除外するか無視するか。
❹Default Order:
投稿ID、著者、題名、名前（スラッグ）、タイプ、日付、最終更新日、親ID、順不同、コメント数、関連性、メニュー注文、メタ値の昇順、降順の並び順。
❺Secondary Sort Order:
上記Default Orderの幅ソート順。
Tags,Categories & Taxonomies
▲上図のタクソノミーを含むか除外するか、とその対象の入力欄。
Post Meta
▲カスタムフィールド検索の条件分岐。+ Add Conditionをクリックすると条件入力が表示される。
Advanced
▲Plug-In Relevanssi と連動させるかの設定。
Plug-In Relevanssi は検索機能を拡張する大変便利なPlug-Inです。
1文字の検索にも対応させることができます。
※1文字検索を行うには function.php にクイックリターン関数と呼ばれる記法を用いたフィルターフックを記述する必要があります。
add_filter('relevanssi_block_one_letter_searches', '__return_false');しかし、このフィルターフックは日本語に対応してないと、Plug-In作者のMikko Saari氏が語っています。
私が考えた裏技として、Plug-In relevanssi ディレクトリ内、lib > search.php の1130行付近。
if (relevanssi_strlen($term) < 2) {
/**
* Allows the use of one letter search terms.
*
* Return false to allow one letter searches.
*
* @param boolean True, if search term is one letter long and will be blocked.
*/
if (apply_filters('relevanssi_block_one_letter_searches', true)) {
return null;
}
// No fuzzy matching for one-letter search terms.
$term_where_template = $basic_query;
}
▲この記述を全てコメントアウトすると1文字検索が可能になります。
※自己責任にてお願いします。
※Plug-Inのバージョンアップの度に元に戻りますのでご注意ください。
Relevanssi 自体の設定、Indexing から Show advanced settings をクリックすると表示される Minimum word length を 1 にするのも忘れないようにしましょう。
▲ここにもフックに関する記載がありますが、残念ながら、1文字検索は日本語には対応していません。
検索フィールドに関する設定はここまでです。
次はページ、ウェジェットへの配置方法です。
▲画面の右側にShortcodesのブロックがあります。
ここに表示されているショートコードを投稿ページ、固定ページ、ウィジェット、テンプレートページなどに配置します。
今回はサイドバーに表示させました。
サイドバーへの表示
▲WordPressメニューからウィジェットを選択します。
▲Search & Filter Formブロックをクリックすると配置先が表示されます。
サイドバー（トップページ）を選択し、ウィジェットを追加をクリック。
▲ウィジェット一覧のサイドバー（トップページ）に追加されました。
Choose a Search From: から作成した検索フォームを選択します。
▲ホームページの設定は上図のようになっています。
固定ページへの表示なので、テーマLightningの固定ページテンプレート index.php へショートコードを追記します。
<?php echo do_shortcode('[searchandfilter id="xx"]'); ?>
テンプレートページへの記述には do_shortcode() 関数が必要になります。
投稿ページ、固定ページには [searchandfilter id="xx"] を記述しておきます。
また、スラッグでの記述も可能なので、必要に応じて使い分けてください。
実際に動作する検索デモページはこちらです。
色々と試してみてください。
$20 支払って検証してみました。
DEVELOPER版は $75 ですが、機能を鑑みても安いと思います。
紹介し切れませんでしたが、Search & Filter Proサイト。BUY NOW（英語版）には全ての使い方が紹介されています。
ググっても有用な記事がたくさんアップされているので、そちらも参考にしてください。
使いこなせるようになるには、少々、試行錯誤が必要かと思いますが、色々と試してみると面白い発見もあります。
乱筆で申し訳ありませんが、本記事も一助になれば幸いです。
シェアしていただきますと励みになります。
最後まで読んでいただきありがとうございました。
