インクリメンタルサーチを実装する【Search Live】

検索フォームに文字を入力するたびに即座に検索結果を表示することを、インクリメンタルサーチといいます。

インクリメンタルサーチだと検索ワードのすべてを打ち込む必要がなくなりますので、訪問者の手間を省くことができますね。

Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。

サイト内検索で文字を入力するたびに、その場で検索結果を表示することができるようになります。

こんな場合におススメ

  • 検索結果をページ遷移することなく、その場で表示したい
  • インクリメンタルサーチを実装したい
プラグインを使ってできること
  • インクリメンタルサーチを実装する
目次

インストール

Search Live インストール
Search Live インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Search Liveで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

【Search Live】の使用方法

ウィジェットエリアに表示する場合

STEP
ウィジェットを開く

管理画面 > 外観 > ウィジェット を開きます。

Search Live ウィジェット
STEP
ウィジェットを追加する

『Search Live』を表示したいエリアに、ドラッグ&ドロップまたはウィジェットを追加します。

Search Live 使用方法
STEP
項目の設定
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検索で何も見つからなかった場合に表示するテキストを指定
STEP
保存
項目を設定したら保存します。
STEP
使用イメージ

ショートコードを使用する場合

ショートコードで表示すると、投稿内など好きな箇所にインクリメンタルサーチの検索フォームを表示させることができます。

下記のショートコードを使用したい箇所に記述。

ショートコード
[search_live]

【Search Live】の設定

STEP
Search Liveを開く

プラグインを有効化すると、管理画面 内に【Search Live】の項目が表示されるので、そこから設定を行います。

Search Live 設定
STEP
項目の設定

Search Live

Search Live 設定
Length of descriptions □ wordsウィジェットで抜粋を表示する選択をした場合、表示する文字数を指定
Replace the standard WordPress search formWordPress標準の検索フォームをインクリメンタルサーチに置き換えるようにするかの選択

Thumbnails

Search Live 設定
Widthサムネイルの幅
heightサムネイルの高さ
Crop thumbnailsサムネイルを上記に指定したサイズにトリミングするかの選択 未チェックの場合、縦横比を維持した状態で調整される
Placeholder thumbnailsアイキャッチの設定されていない投稿の場合に、プレースホルダー(ダミー画像)を表示するかの選択 未チェックでプレースホルダー(ダミー画像)を表示しない

Appearance

Search Live 設定
Use the standard stylesheet【Search Live】標準のスタイルシートを使用するかの選択
Use inline stylesCSSを調整するかの選択 チェックを入れるとInline stylesに記述したCSSが適用されるようになる
STEP
保存
項目を設定したらSave changesをクリックし、設定を保存します。

動作確認環境

  • バージョン 1.11.0
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Search Live】は、インクリメンタルサーチを実装することのできるプラグイン。
  • 検索フォームに文字を入力するたびに、検索結果をその場で表示することができるようになります。
目次
閉じる