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

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

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

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

こんな場合におススメ

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

プラグインを使ってできること

  • インクリメンタルサーチを実装する
スポンサーリンク

使用イメージ

インストール

Search Live インストール

  1. 管理画面から プラグイン > 新規追加 とクリックする
  2. Search Live“で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

または、配布サイトからダウンロードして、インストール。
Search Live – WordPress プラグイン | WordPress.org

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

WordPressのプラグインをインストールする方法

検索フォームを表示する

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

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

ショートコード

[search_live]

ウィジェットを使用する場合

管理画面 > 外観 > ウィジェット
Search Live】を表示したいウィジェットエリアに指定します。
Search Live ウィジェット

ウィジェットの設定

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

Search Live 設定 General Settings

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

Thumbnails

Search Live 設定 Thumbnails

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

Appearance

Search Live 設定 Appearance

Use the standard stylesheet【Search Live】標準のスタイルシートを使用するかの選択
Use inline stylesCSSを調整するかの選択
チェックを入れるとInline stylesに記述したCSSが適用されるようになる

動作確認環境

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

まとめ

  • Search Live】は、インクリメンタルサーチを実装するプラグイン。
  • 検索フォームに文字を入力するたびに、検索結果をその場で表示することができるようになります。
インクリメンタルサーチを実装する【Search Live】の使い方
最新情報をチェックしよう!
スポンサーリンク