検索フォームに文字を入力するたびに即座に検索結果を表示することを、インクリメンタルサーチといいます。
インクリメンタルサーチだと検索ワードのすべてを打ち込む必要がなくなりますので、訪問者の手間を省くことができますね。
【Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。
サイト内検索で文字を入力するたびに、その場で検索結果を表示することができるようになります。
こんな場合におススメ
- 検索結果をページ遷移することなく、その場で表示したい
- インクリメンタルサーチを実装したい
プラグインを使ってできること
- インクリメンタルサーチを実装する
スポンサーリンク
目次
インストール
- 管理画面 > プラグイン > 新規追加 とクリックする
- Search Liveで検索する
- 今すぐインストールをクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]
【Search Live】の使用方法
ウィジェットエリアに表示する場合
- STEP1ウィジェットを開く管理画面 > 外観 > ウィジェット を開きます。
- STEP2ウィジェットを追加する『Search Live』を表示したいエリアに、ドラッグ&ドロップまたはウィジェットを追加します。
- STEP3項目の設定
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 検索で何も見つからなかった場合に表示するテキストを指定 - STEP4保存項目を設定したら保存します。
- STEP5使用イメージ
ショートコードを使用する場合
ショートコードで表示すると、投稿内など好きな箇所にインクリメンタルサーチの検索フォームを表示させることができます。
下記のショートコードを使用したい箇所に記述。
ショートコード
[search_live]スポンサーリンク
【Search Live】の設定
- STEP1Search Liveを開くプラグインを有効化すると、管理画面 内に【Search Live】の項目が表示されるので、そこから設定を行います。
- STEP2Search Live
Length of descriptions □ words ウィジェットで抜粋を表示する選択をした場合、表示する文字数を指定 Replace the standard WordPress search form WordPress標準の検索フォームをインクリメンタルサーチに置き換えるようにするかの選択 - STEP3Thumbnails
Width サムネイルの幅 height サムネイルの高さ Crop thumbnails サムネイルを上記に指定したサイズにトリミングするかの選択
未チェックの場合、縦横比を維持した状態で調整されるPlaceholder thumbnails アイキャッチの設定されていない投稿の場合に、プレースホルダー（ダミー画像）を表示するかの選択
未チェックでプレースホルダー（ダミー画像）を表示しない - STEP4Appearance
Use the standard stylesheet 【Search Live】標準のスタイルシートを使用するかの選択 Use inline styles CSSを調整するかの選択
チェックを入れるとInline stylesに記述したCSSが適用されるようになる - STEP5保存項目を設定したらSave changesをクリックし、設定を保存します。
動作確認環境
- バージョン 1.10.0
- WordPress 5.3.2
まとめ
- 【Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。
- 検索フォームに文字を入力するたびに、検索結果をその場で表示することができるようになります。