ホーム
技術ブログ
WordPressのカスタム検索で複合検索が可能なSearch & Filter（無料版）を使ってみる

技術ブログ

2021年10月22日

[WordPress][プラグイン]
WordPressのカスタム検索で複合検索が可能なSearch & Filter（無料版）を使ってみる

簡単に複合検索を実装したいな・・・と思ったとき、どういう手段を想像するでしょうか。
ASPでデータベース連携して、とか腕に覚えのある人は１から自分で、という結論になるかもしれません。
しかし、会員サイトと連携してとか、Webサイトは普通に用意して検索に特化したい、といったWebとの親和性を考えるのであればWordPressが答えになるかもしれません。
ここでは、すでにWordPressを導入していて、そこに複合検索機能を追加する前提で話を進めていきます。

前提

複合検索はどのようなものか挙げておきます。
ここで想定しているのは、賃貸サイトやバイトや就職情報サイトなどで見られる、
・地域
・条件１
・条件２
・条件３
・キーワード
などを入力して複数の検索条件で絞り込みして結果を表示させるサイトを想定しています。

WordPressで構築することを考えると、通常の固定ページは一般のページ、投稿はニュースなどで使用しているとして、複数の条件で絞り込みをするようなページ数が多いと想定されるサイトは、あらかじめカスタム投稿タイプを用意しておき、条件１，条件２，条件３などはカスタムタクソノミーとして登録することを前提としたほうが良さそうです。

Search & Filter （無料版）

GoogleでWordPressの複合検索プラグインを調べると最も結果が多く出ている印象ですが、Search & Filter には無償版と有償版があり、それぞれ機能が全く異なるのと、無償版からの機能追加のアップデートという形ではないので別物として捉えたほうが良さそうです。

https://ja.wordpress.org/plugins/search-filter/

インストール

まずはインストールです。
ダッシュボードから「プラグイン」-「新規追加」を選択し、「Search & Filter」で検索します。

ありがちなキーワードだからか、残念ながら検索結果の上位ではありません。少しスクロールして探してください。

「今すぐインストール」し、その後「有効化」します。

使い方

有効後、設定画面（ドキュメント？）に飛ばされると思いますが、使い方はシンプルです。
ショートコードに使いたい機能やオプションを指定するだけ。
例えば

[searchandfilter fields="search,category,post_tag"]

と記述すると、検索ボックス、カテゴリ、タグを選択するフォームが自動的に出力されます。

※図はスタイルを変更しています

ちなみにこのときの出力されるHTMLは

<form action="" method="post" class="searchandfilter">
  <div>
    <ul>
      <li>
        <input type="text" name="ofsearch" placeholder="Search …" value="">
      </li>
      <li>
        <select name="ofcategory" id="ofcategory" class="postform">
          <option value="0" selected="selected">カテゴリー一覧</option>
          <option class="level-0" value="1">未分類</option>
       </select>
       <input type="hidden" name="ofcategory_operator" value="and">
      </li>
      <li>
        <select name="ofpost_tag" id="ofpost_tag" class="postform">
          <option value="0" selected="selected">すべてのタグ</option>
          <option class="level-0" value="19">アルバイト</option>
        </select>
        <input type="hidden" name="ofpost_tag_operator" value="and">
      </li>
      <li>
        <input type="hidden" name="ofsubmitted" value="1">
        <input type="submit" value="Submit">
      </li>
    </ul>
  </div>
</form>

のようになります。
こちらにスタイルを指定してあげれば横並びなども自由自在。

ショートコードとは

ショートコードは、一つの作業をブラケット([])という囲みの短いコードで呼び出せるという、とても便利な機能です。
プラグインの出力にも用意されていることが多く、自分の設置したい場所にショートコードを記述すればすぐに設置できるため、非常に便利です。
古くからのWYSIWYGエディタではそのまま入力すればよく、Gutenbergの場合は「ショートコード」を選んで入力します。

テンプレートに直接ショートコードを記述させる場合は

echo do_shortcode('[ここにショートコードを記述]');

と入力します。

豊富なオプション

fields

要するに、fields=の中に、設置したいフォームをカンマ「,」区切りで入力していけば、複合検索用のフォームが出来上がる仕組みです。
fieldsの中には

search・・・キーワード検索
post_date・・・投稿年月日
post_types・・・投稿タイプ（固定ページ、投稿など）
フィールド名、タクソノミー

を指定します。

※このあとたくさんオプションが出てきますが、fieldsだけは必須項目です。

types

typesは、fieldsで設定したフォームの表示形式を指定します。
types=""
の形式で、fieldsで指定した個数分カンマ区切りで表示を指定します。
複数選択する項目はデフォルトでセレクタ形式になります。

[searchandfilter fields="search,category,post_tag" types=",checkbox,radio"]

先頭のキーワードボックスはチェックボックスやラジオボタンにできないので、入力していません。

しかしこれでは何の項目を選ぼうとしているのかわからないですね。

ちなみにこのときのHTMLは

<form action="" method="post" class="searchandfilter">
  <div>
    <ul>
      <li>
        <input type="text" name="ofsearch" placeholder="Search …" value="">
      </li>
      <li>
        <ul>
          <li class="cat-item cat-item-1">
            <label><input type="checkbox" name="ofcategory[]" value="1"> 未分類</label>
          </li>
        </ul>
        <input type="hidden" name="ofcategory_operator" value="and">
      </li>
      <li>
        <ul>
          <li>
            <label><input type="radio" name="ofpost_tag[]" value="0" checked="checked"> すべてのタグ</label>
          </li>
          <li class="cat-item cat-item-19">
            <label><input type="radio" name="ofpost_tag[]" value="19"> アルバイト</label>
           </li>
         </ul>
         <input type="hidden" name="ofpost_tag_operator" value="and">
        </li>
        <li>
          <input type="hidden" name="ofsubmitted" value="1">
          <input type="submit" value="Submit">
        </li>
      </ul>
    </div>
</form>

こんな感じでチェックボックスとラジオボタンはulの入れ子になっています。

headings

見にくいので見出しを設置します。

[searchandfilter fields="search,category,post_tag" types=",checkbox,radio" headings="フリーワードを入力,カテゴリを選択,タグを選択"]

このとき追加される見出しはh4（クラス付与なし）になります。

ちょっとオプションが多いので、ここからは重要と思われるものをピックアップしてお届けします。

operators

項目内でAND検索にするかOR検索にするかを指定します。
チェックボックスか複数選択項目において、とマニュアルには書かれているのですが、複数選択できるのはチェックボックスしかないと思いますので、チェックボックスのとき限定ではないかと思います。
例えば、職種という項目に「アルバイト」「パート」「正社員」があったとして、その複数の項目にチェックが付いていたときに、すべてを含む項目だけを抽出したいのか、それだけの項目を抽出したいのか、という設定です。
デフォルトはANDになっているので、ORに変更する場合は指定が必要です。

[searchandfilter fields="search,category,post_tag" types=",checkbox,radio" headings="フリーワードを入力,カテゴリを選択,タグを選択" operators=",or,"]

submit_label

デフォルトで「SUBMIT」となっている検索実行ボタンのラベルを変更できます。

[searchandfilter fields="search,category,post_tag" types=",checkbox,radio" headings="フリーワードを入力,カテゴリを選択,タグを選択" submit_label="検索する"]

その他

まだまだオプションがありますので、簡単に解説していきます。

hierarchical
カテゴリなどで親子関係が設定されている場合に、インデントして表示されます。
デフォルトは0でインデント表示しない状態です。1に設定するとインデントします。
hide_empty
投稿ページがないものを非表示にします。
デフォルトが1です。0で表示するようになります。
order_by
ソートの並び順を指定します。
デフォルトはname値ですが、ID、slug名、count値、term_groupでソートできます。
order_dir
上記のソートを降順にするか昇順にするか指定します。
デフォルトはASCで昇順です。DESCで降順になります。
all_items_labels
セレクタやラジオボタンなど選択項目ですべてを選択する項目を追加するラベルを指定できます。チェックボックスに指定しても反映されません。
show_count
投稿数をワードのあとにカッコ付きで表示します。
デフォルトは0で非表示。1を指定すると表示します。
post_types
どの投稿からフィルタリングするか指定できます。
postで投稿ページ、pageで固定ページを表示します。
allで全てのタイプを表示できます。
カスタム投稿のみを検索させたいときなどはここで指定します。
class
全体を囲うformにclassを指定できます。
search_placeholder
検索フィールドに検索語が入力されていない場合に表示されるプレースホルダーテキストを指定できます。
empty_search_url
利用者が検索設定を選択せずに検索フォームを送信した場合にリダイレクト先を指定できます。
add_search_param
検索結果のURLパラメータに強制的に「?s=」を付与します。（空検索でも）
一部のテーマでの検索テンプレートの読み込みに使う場合があるとのこと。
デフォルトは0で付与しない。1で付与するようになります。

検索結果について

検索結果はどのように表示されるか、ということに関しては、基本的にアーカイブ画面が表示されます。
おそらくですが、最初に指定のあるタクソノミーのスラッグのアーカイブを元に表示されますので、archive.phpもしくはarchive-カスタム投稿名.phpをセットすれば希望の出力は表示されます。

カスタム投稿内のみ検索対象にする

さて、冒頭に設定したカスタム検索を設定してみましょう。
ここではカスタム検索の投稿タイプをJob、タクソノミーを
・勤務地・・・location
・雇用形態・・・employment
・職種・・・occupation
・タグ・・・item_tag
と設定したとします。

カスタム投稿の中身だけキーワード検索だけさせたい場合は、

[searchandfilter fields="search" post_types="job"]

とすればOKです。
勤務地や雇用形態も含めた形で検索したい場合は

[searchandfilter fields="search,location,employment,occupation,item_tag" types=",checkbox,checkbox,checkbox,checkbox" post_types="job"]

のような形になります。
post_typeの指定ですが、これを指定すると検索結果に?post_types=jobといった形でクエリが付与されるようになります。
そのため、post_typesにカスタム投稿名を入力してempty_search_urlオプションを指定すると、空検索の場合にempty_search_urlで指定したURLへは飛ばず、/?post_types=***に飛んでしまう、要するにトップページに遷移してしまうことになります。
特に回避方法が見当たらなかったのですが、トップページに/?post_types=***で飛んできた場合の処理を入れるか、そもそもpost_typesのオプションが必要かどうかを検証する必要があるかなと思います。
fields="search"を指定する場合は、キーワードをどこで検索するかを指定するという意味でpost_typesの指定が必要かと思いますが、fields="search"の指定がない場合は、fields=""で指定するのは、locationやemploymentといったカスタム投稿のタクソノミーになりますので、わざわざpost_typesでさらに指定しなくても検索範囲が絞られている、ということになります。
また、例えばlocationがラジオボタンで選択必須の場合、おのずとカスタム投稿内を検索する設定になりますので、post_typesの指定が不要ということになります。
このように、状況に応じて設定すればよいのではないかと思います。