検索フォームに文字を入力するたびに即座に検索結果を表示することを、インクリメンタルサーチといいます。
インクリメンタルサーチだと検索ワードのすべてを打ち込む必要がなくなりますので、訪問者の手間を省くことができますね。
【Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。
サイト内検索で文字を入力するたびに、その場で検索結果を表示することができるようになります。
こんな場合にオススメ
- 検索結果をページ遷移することなく、その場で表示したい
- インクリメンタルサーチを実装したい
プラグインを使ってできること
- インクリメンタルサーチを実装する
目次
インストール
インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- Search Liveで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
【Search Live】の使用方法
ウィジェットエリアに表示する場合
STEP
ウィジェットを開く
管理画面 > 外観 > ウィジェット を開きます。
STEP
ウィジェットを追加する
『Search Live』を表示したいエリアに、ドラッグ&ドロップまたはウィジェットを追加します。
STEP
項目の設定
| Title | ウィジェットに表示するタイトル |
|---|---|
| Search in titles | 検索にタイトルを含めるかの選択 |
| Search in excerpts | 検索に抜粋を含めるかの選択 |
| Search in contents | 検索に投稿本文を含めるかの選択 |
| Order by … | 検索結果の並び順を選択 Date：日付順 Title：タイトル順 ID：ID順 Random：ランダム |
| Ascending・Descending | 検索結果を昇順にするか、降順にするかを選択 |
| Limit | 表示件数を指定 |
| Show thumbnails | サムネイルを表示するかの選択 |
| Show descriptions | 概要を表示するかの選択 |
| Delay □ ms | 結果を何秒遅延させて表示するかを指定 |
|---|---|
| Characters | 検索を開始する文字数を指定 |
| Inhibit form submission via the Enter key | エンターキーを無効にするかの選択 |
| Navigable results | 検索結果を上下キーで選択できるようにするかの選択 |
| Placeholder | プレースホルダーにするテキストをしてい |
| Tooltip | ツールチップを指定 |
| Submit button | 検索ボタンを表示するかの選択 |
| Submit button label | 検索ボタンに表示するラベルを指定 |
| Dynamic focus | |
| Floating results | |
| No results | 検索で何も見つからなかった場合に表示するテキストを指定 |
STEP
保存
項目を設定したら保存します。
STEP
使用イメージ
ショートコードを使用する場合
ショートコードで表示すると、投稿内など好きな箇所にインクリメンタルサーチの検索フォームを表示させることができます。
下記のショートコードを使用したい箇所に記述。
ショートコード
[search_live]【Search Live】の設定
STEP
Search Liveを開く
プラグインを有効化すると、管理画面 内に【Search Live】の項目が表示されるので、そこから設定を行います。
STEP
項目の設定
Search Live
| Length of descriptions □ words | ウィジェットで抜粋を表示する選択をした場合、表示する文字数を指定 |
|---|---|
| Replace the standard WordPress search form | WordPress標準の検索フォームをインクリメンタルサーチに置き換えるようにするかの選択 |
Thumbnails
| Width | サムネイルの幅 |
|---|---|
| height | サムネイルの高さ |
| Crop thumbnails | サムネイルを上記に指定したサイズにトリミングするかの選択 未チェックの場合、縦横比を維持した状態で調整される |
| Placeholder thumbnails | アイキャッチの設定されていない投稿の場合に、プレースホルダー（ダミー画像）を表示するかの選択 未チェックでプレースホルダー（ダミー画像）を表示しない |
Appearance
| Use the standard stylesheet | 【Search Live】標準のスタイルシートを使用するかの選択 |
|---|---|
| Use inline styles | CSSを調整するかの選択 チェックを入れるとInline stylesに記述したCSSが適用されるようになる |
STEP
保存
項目を設定したらSave changesをクリックし、設定を保存します。
動作確認環境
- バージョン 1.13.0
- WordPress 5.7.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。
- 検索フォームに文字を入力するたびに、検索結果をその場で表示することができるようになります。