検索フォームに文字を入力するたびに即座に検索結果を表示することを、インクリメンタルサーチといいます。
インクリメンタルサーチだと検索ワードのすべてを打ち込む必要がなくなりますので、訪問者の手間を省くことができますね。
【Search Live】は、インクリメンタルサーチを実装するプラグイン。
サイト内検索で文字を入力するたびに、その場で検索結果を表示することができるようになります。
こんな場合におススメ
- 検索結果をページ遷移することなく、その場で表示したい
- インクリメンタルサーチを実装したい
プラグインを使ってできること
- インクリメンタルサーチを実装する
スポンサーリンク
目次
使用イメージ
インストール
- 管理画面から プラグイン > 新規追加 とクリックする
- “Search Live“で検索する
- “今すぐインストール”をクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
Search Live – WordPress プラグイン | WordPress.org
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]
検索フォームを表示する
ショートコードを使用する場合
下記のショートコードを使用したい箇所に記述します。
ショートコード
[search_live]ウィジェットを使用する場合
管理画面 > 外観 > ウィジェット
【Search Live】を表示したいウィジェットエリアに指定します。
ウィジェットの設定
| 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 | 検索で何も見つからなかった場合に表示するテキストを記述 |
設定
プラグインを有効化すると、管理画に【Search Live】の設定項目が表示されるので、そこから行います。
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が適用されるようになる |
動作確認環境
- バージョン 1.10.0
- WordPress 5.2.3
まとめ
- 【Search Live】は、インクリメンタルサーチを実装するプラグイン。
- 検索フォームに文字を入力するたびに、検索結果をその場で表示することができるようになります。