インクリメンタルサーチを実装する【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 form WordPress標準の検索フォームをインクリメンタルサーチに置き換えるようにするかを選択

Thumbnails

Search Live 設定 Thumbnails

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

Appearance

Search Live 設定 Appearance

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

動作確認環境

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

まとめ

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