｜WordPressで絞り込み検索機能を実装する｜
【第６回】Search&filter pro(有料版）でwordpressに検索機能を実装
Search&filter pro(有料版）のインストール
Search&filter proをインストールする。
”第３回”で設定したACFの入力フィールドと検索項目を紐づける。
Search&filterには無料版もあるが、カスタマイズする工数を手間を考えると価格も安いので有料版でサクッと構築することをオススメする。
価格：＄25
Single site：１サイトのみ利用可能Developer：複数サイトに利用可能
※いずれも１年間はアップデート可能。しかし2年目以降使えなくなる訳ではなく継続して利用は可能。
search&filter proの設定
search&filter proの新規検索フォームを作成
管理画面からsearch&filterを選択
Add new search formをクリックして検索項目を作成
Search&filter proのポストタイプ設定
【タイトル】
適当なタイトルを入力する。
【Search in the following post types】
今回作成したフォームを表示させるポストタイプを選択。投稿、固定ページ等またカスタム投稿で表示させる場合はカスタム投稿名にチェックをいれる。
今回の場合、新たにカスタム投稿でアイテム登録を作成したのでそれを指定。
Search&filterの検索項目設定
設定画面を下へスクロールすると”Available Fields”という項目がある。
下記４つを利用する。
Search
フリーワード等の検索
post meta
ラジオやチェック等
Submit Button
送信ボタン
Reset button
条件クリアボタン
①ドラッグドロップで選択
フリーワード検索のフォームを作成。ドラッグドロップで”Search”を設定。
②項目の設定
【Add a heading?】
青文字のフリーワードの部分
【Placeholder text】
Search・・・の部分
③Post metaをドラッグしてラジオボタンやチェックボックスの設定する
とりあえず重要な部分のみ設定する。前述の方法で”Post meta”をドラッグドロップで設定を行う。
⚫︎input type
ラジオ、チェックボックス等を選択
⚫︎Add a heading
上記同様
⚫︎change all items
デフォルトは”All”と表示されるので任意で”全て選択”とかに。
⚫︎Meta key
ACFで作った各フォームのフィールド名が表示されているので任意で選択する。
④チェックボックスの選択項目を設定する
ブランドを選択するチェックボックスを設定する。
【選択肢】※エクセルの表を参照
・ブランドA
・ブランドB
・ブランドC
上記３つをチェックボックスの項目とする。
【ブランド項目での検索設定】
赤枠内のValueとLabelに選択項目を入力していく。
”＋Add Option”をクリックして必要な数だけ選択肢を増やしていく。
検索結果ページの表示設定
検索結果一覧を表示するページの指定を行う。第５回で作成した”archive-apparel.php”が検索結果一覧ファイルとなる。
Display Resultタブで投稿タイプアーカイブを選択すると下記のような画面が表示される。
これでarchive-スラッグ名.phpが自動的に呼び出される。
他にも”As an Archive”でファイルを指定する方法等もあるが、今回は自動で呼び出してくれるこの方法を利用する。
Search&Filterで設定した検索フォームを設置
Search & Fillterで作成した検索フォームのショートコードをコピー
赤枠内のショートコードをコピーする。
サイドバーに検索フォームを実装する
ウィジェットメニューからサイドバー共通を選択し、そこに先ほどコピーしたショートコードを貼り付ける。
サイドバーに検索フォームが実装される。
検索プラグインのSearch & Fileterではその他様々設定ができるので、一旦実装してから様々試してみる。
