WordPressの検索でリアルタイムに検索結果を表示できるプラグイン

harada 421views 更新:2014年11月28日

検索フォームに単語を入力するごとに検索結果を表示することをインクリメンタルサーチというそうです。
WordPressでも「Dave’s WordPress Live Search」というプラグインを利用することでこのインクリメンタルサーチを簡単に実装できます。

利用方法

  1. ダッシュボードの「プラグイン」>「新規追加」から「Dave’s WordPress Live Search」を検索してインストールします。
  2. 有効化します。

設定方法

  1. 「設定」>「Live Search」を開きます。
  2. 「Maximum Results to Display」で表示する結果の数を指定します。0以外の数字を指定します。5個位が妥当でしょうか。
  3. 「変更を保存」を押して保存します。
  4. 上部メニューから「Appearance」を選択します。
    ・Display Metadata :筆者と日付を結果に表示する場合はチェックを入れます。
    ・Display Post Thumbnail :サムネイルを結果に表示する場合はチェックを入れます。
    ・Display Post Excerpt :概要を結果に表示する場合はチェックを入れます。概要がない場合は最初の何文字を抜き出すかを指定します。
    ・Display “View more results” link :「検索結果をもっと見る」リンクを結果に表示する場合はチェックを入れます。
  5. Stylesからとりあえず「Default Gray」を選択してみます。
  6. 「変更を保存」を押して保存します。

以上で検索フォームにテキストを入力してみると有効になっていると思います。

デザインを変更する場合

  1. プラグインのディレクトリから「daves-wordpress-live-search_default_gray.css」を開き「daves-wordpress-live-search.css」に名前を変更してテーマディレクトリの直下に保存します。
    場所:daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css
  2. 「設定」>「Live Search」>「Appearance」を開きます。
  3. Stylesから「Theme-specific」を選択します。
  4. 「変更を保存」を押すことで、先ほど別名でテーマディレクトリに保存したカスタマイズ用のCSSが反映されます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません