Ajax Search Liteで、インスタント検索できるフォームを実装
当BLOGでも、アーカイブページに検索フォームがあります。キーワード入力後、リターンキーをクリックして、検索結果ページに表示されます。今回は、Ajax Search Liteで、インスタント検索を実装する方法を紹介します。
出典 : Ajax Search Lite
設定
プラグインをインストール、有効化します。左サイドメニューのAjax Search Lite＞Ajax Search Liteをクリックします。設定画面が表示されます。
Ajax Search Lite＞Ajax Search Liteをクリック
設定画面が表示
General Options
検索範囲にしたい項目を設定します。Sources & Basics＞Available post typesの項目を右のDrag here the post types you want to use! にドラッグ＆ドロップします。今回は、カスタム投稿タイプのBLOGのみ検索範囲に設定しました。
検索範囲にしたい項目をDrag here the post types you want to use! にドラッグ＆ドロップ
Behavior＞Trigger and redirection behaviorのAction when pressing the return keyをTrigger Live searchに設定します。
Action when pressing the return keyをTrigger Live searchに設定
Autocomplete & SuggestionsのTurn on google search autocomplete? をoffに設定します。Turn on google search keyword suggestions? をoffに設定します。
Turn on google search autocomplete?、Turn on google search keyword suggestions? をoffに設定
Image Options
Image OptionsのImage width (px)を124、height (px)を70に設定します。
Image OptionsのImage width (px)を124、height (px)を70に設定
Layout options
Search Box layout & Theme＞Theme ＆ Input & ColorのThemeをSimple Greyに設定します。Placeholder textを「キーワード」に設定します。
ThemeをSimple Greyに設定
Results BehaviorのNo results textを、「該当する記事は見つかりませんでした。」に設定します。
No results textを、「該当する記事は見つかりませんでした。」に設定
ページ下のSave options! をクリックし、保存します。これで設定は完了です。
Save options! をクリックし、保存
設置
Search shortcodeのショートコードをコピーします。編集画面を開き、設置したい場所にショートコードブロックを設置しペーストします。
Search shortcodeのショートコードをコピー
ショートコードブロックを設置しペースト
今回は、DEMO用にブロックエディターでシングルページに設置しました。通常は、Search shortcode fortemplatesのコードをPHPの設置したい場所に設置します。
Search shortcode fortemplatesのコードをPHPの設置したい場所に設置
確認
キーワードを入力したらサムネイル付きのインスタント検索が表示されます。
インスタント検索が表示
作成できるのは1種類のみ
Ajax Search Liteの検索フォームは1種類のみしか作成できません。よって、別の投稿タイプの検索フォームを作成できません。複数設置する場合は、プラグインではなく、PHPなどで設定していく必要があります。
通常の検索は、search.phpの設定が必要
検索ワードを入力し、右側の虫眼鏡マークをクリックすれば、検索結果を一覧で表示する、通常の検索結果も表示できます。WordPressのテンプレートタグを使用する場合と同様に、search.phpの設定が必要です。
以上で今回の説明は終了です。あらかじめPHPの設定が必要ですが、サムネイル付でインスタント検索できるフォームがプラグインで設置できるのは魅力です。
