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

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

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

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

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

こんな場合におススメ

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

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

インストール

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

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

Search Live

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

関連記事

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

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

【Search Live】の使用方法

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

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

    Search Live ウィジェット

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

    Search Live 使用方法

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

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

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

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

ショートコード

[search_live]
スポンサーリンク

【Search Live】の設定

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

    Search Live 設定

  • STEP2
    Search Live
    Search Live 設定

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

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

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

動作確認環境

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

まとめ

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