商品紹介サイトなどで価格、メーカー、色、機能など、項目に応じた絞り込み検索を行う場面は多々あると思います。
そんな時に便利なWordPress Plug-In Search & Filter Pro(有料)を紹介したいと思います。
 
Search & Filter Pro
Search & Filter Proサイト。BUY NOWをクリックします。
 
Search & Filter Pro
▲必要に応じてカートに追加します。
SINGLE SITEは単一サイト向けで$20。DEVELOPERは複数サイト向けで$75。
どちらも年間契約で、支払いが完了するとIDとパスワードが発行され、ダウンロードできるようになります。
 
Search & Filter Pro
▲ダウンロードしたPlug-In。
 
Search & Filter Pro
▲WordPressへのインストールはプラグインのアップロードから行ってください。
 
Search & Filter Pro
▲ダウンロード後、有効化するとメニューに表示されます。
 
Search & Filter Pro
Search & Filter Proのトップ画面。Add New Search Formをクリックします。
 
Search & Filter
▲無料版のSearch & Filterもありますが、無論、Pro版ほど高機能ではありません。
購入前に試用してみても良いでしょう。
 
Search & Filter Proはサイドバーやヘッダ、フッタなどのウィジェットや、投稿ページ、固定ページ、アーカイブページなどのテンプレートページに設置できるなど、組み合わせによって色々な設定が可能です。
今回は、前回カスタムフィールドで作成した山一覧 カスタムフィールドの検索検索入力欄クリアボタンを作成したいと思います。
各設定を見ていきましょう。

 General

Search & Filter
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にチェックを入れると検索条件に応じて項目数を再計算してくれます。

 
Search & Filter
Available Fields に表示されているものを下のSearch From UIにドロップします。
Searchは検索語句入力欄、Submit Buttonは検索開始ボタン、Reset Buttonはリセットボタン、Post Metaでカスタムフィールドも検索可能になります。その他はWordPressに馴染み深いTagやCategoryなどを検索対象にします。
今回はPost Meta2つ(カスタムフィールドのprefectures(都道府県)とelevation_value(標高))を検索対象にします。
 
Search & Filter
Post Metaのprefectures(都道府県)の設定です。
Choice タブだけ設定します。
Input type はDropdown。
Add a heading? に「都道府県:」と入力。
Change All Items Label? に「選択してください。」と入力。ここはドロップダウンメニューの先頭に表示される文言になります。
Add screen reader text? はスクリーンリーダーによって読み取られる非表示のテキストを追加します。
Make Conbobox? にチェックをすると下図のようになります。
Search & Filter
▲左がチェックなし。右がMake Conbobox? チェックあり。
Conbobox No Results message はConboboxの検索対象が見つからなかった場合のメッセージを入力します。(試しましたが反映されませんでした。)
※Make Conbobox? にチェックを入れるのと同時にアクティブになりそうですが、一度更新ボタンをクリックしないとアクティブになりません。バグではないかと思われます。
Display count? は含まれている対象のカウントを表示します。
Hide Empty? は空のカウント対象を表示しないようにします。
Meta Key で検索対象を選択します。カスタムフィールドで設定したprefectures(都道府県)を選びます。
OptionsAutomatically(自動)か、Manual Entry(手動)かを選択します。
Automatically(自動)を選んだ場合、下のIs ACF Field? にチェックを入れておけばカスタムフィールドで設定した項目が自動で選べるようになります。(ここでは北海道から沖縄県までのドロップダウンメニュー)
Manual Entry(手動)を選んだ場合、手動でドロップダウンメニューの値とラベルを入力する必要があります。
Order Options by: は値とラベルの並び順を、昇順、降順、アルファベット順、数値順から選択する設定です。
よほどの理由がない限り上図のような設定で大丈夫なはずです。
 
Search & Filter
▲次はPost Metaのelevation_value(標高)の設定です。
ラジオボタンを選択している以外、ほぼ前述と同じ内容になります。
 
Search & Filter
Search
検索語句の入力欄です。設定は上図の通り。
 
Search & Filter
▲リセットボタンの設定です。
Input type はLinkとButtonから選択できます。
Submit Form: はフォーム送信に関する設定で、Always(常時送信)、Never(送信しない)、Only when auto submit is enabled(自動送信有効時に送信)から選択します。
Always以外を選択すると検索結果がリセットされない場合があるようで、選択項目の表示も一部崩れてしまう可能性もあります。

 Display Results

Search & Filter
▲上図のように設定しています。
ここでは、結果の表示方法をカスタマイズします。
アーカイブページを検索対象にするのか、投稿ページを検索対象にするのか、ショートコードを利用してページを指定するのか、などの設定や、検索結果の、どの箇所にスクロールさせるかなど。
他にもヒット数が大量にある場合の無限スクロールの設定などを設定します。

 Posts

Search & Filter
投稿記事に関する設定です。
Post Status:

投稿記事のステータスで検索範囲を選択します。

Exclude Post IDs:

除外する投稿のIDを入力します。

Sticky Posts:

固定投稿を除外するか無視するか。

Default Order:

投稿ID、著者、題名、名前(スラッグ)、タイプ、日付、最終更新日、親ID、順不同、コメント数、関連性、メニュー注文、メタ値の昇順、降順の並び順。

Secondary Sort Order:

上記Default Orderの幅ソート順。

 Tags,Categories & Taxonomies

Search & Filter
▲上図のタクソノミーを含むか除外するか、とその対象の入力欄。

 Post Meta

Search & Filter
▲カスタムフィールド検索の条件分岐。+ Add Conditionをクリックすると条件入力が表示される。

 Advanced

Search & Filter
▲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文字検索が可能になります。
Relevanssi 自体の設定、Indexing から Show advanced settings をクリックすると表示される Minimum word length1 にするのも忘れないようにしましょう。
 
Relevanssi
▲ここにもフックに関する記載がありますが、残念ながら、1文字検索は日本語には対応していません。
 
検索フィールドに関する設定はここまでです。
次はページ、ウェジェットへの配置方法です。
Search & Filter
▲画面の右側にShortcodesのブロックがあります。
ここに表示されているショートコードを投稿ページ、固定ページ、ウィジェット、テンプレートページなどに配置します。
今回はサイドバーに表示させました。

 サイドバーへの表示

ウィジェット
▲WordPressメニューからウィジェットを選択します。
 
Search & Filter
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(英語版)には全ての使い方が紹介されています。
ググっても有用な記事がたくさんアップされているので、そちらも参考にしてください。
使いこなせるようになるには、少々、試行錯誤が必要かと思いますが、色々と試してみると面白い発見もあります。
乱筆で申し訳ありませんが、本記事も一助になれば幸いです。
 
最後まで読んでいただきありがとうございました。
 

WordPressの記事




Pocket
LINEで送る