wordpressに標準機能のキーワードの検索。これ、割と不便なんですよね。
タイトルと本文からしか検索ワードを探さないので、カスタムフィールドでデーター入力してる場合なんかは検索漏れが頻繁に起きたりします。
そして、見た目がダサい。 有料のテーマなどではカッコいいものもありますが、無料で配布されているテーマだと、やっぱ標準的というか、ちょっとダサいんですよね。
あなたのwordpressの検索窓、これからご紹介する Ajax Search Lite プラグインで結構感じよくなりますよ!
このページの目次
wordpressでクールでカッコいい検索窓がほしい?じゃあAjax Search Liteでキマりです
そこで、クールでカッコいい検索窓を探していたら見つけたのが今回ご紹介するAjax Search Liteです。プラグインをインストールするだけで、すぐに使い始める事ができます。
もちろん、アニメコラムサイト「あにぶ」でも利用させてもらっていて、検索を利用する人がAjax Search Liteのプラグインを利用する以前に比べて66%も増加しています。 いままでのサイト運営上、もっとも検索機能を使ってもらっています。
あにぶではPC画面ではすべてのページのサイドバー上部表示(写真上)。スマホではすべてのページのヘッダー部分に表示させています(写真下)。
この検索窓、プラグインを導入するだけで簡単に使えました。色の指定が変えただけです。
どうですか?割とかっこよくないですか?
インスタント検索がクール!
そしてこのプラグインの導入する最大の魅力は「インスタント検索」ができる事です。インスタント検索とは、Googleとかで検索したことがあるなら一度は目にした事があるのではないでしょうか?
「なめ猫」で検索した際に、ズラッと出てくる検索一覧の候補が表示される機能が、このAjax Search Liteプラグインにはついています。たとえば、あにぶで「冴えない」と検索した場合、
あにぶで「冴えない彼女」系の記事一覧が検索窓の下にズラリと並びます。おぉ!なんかちゃんとしてサイトみたいでカッコいい!
あにぶの方ではAjax Search Liteプラグインを実装していますので、一度インスタント検索を試してみて下さい。
ajax search lite のダウンロード
ちょっといい忘れてましたが、このプラグインは
英語表記
です。日本語ファイルがあるかどうかはわかりませんが、ある程度はデフォルトの状態でも使えました。
インストールは他のワードプレスプラグインと同様に、プラグイン>新規追加 から可能です。大文字小文字を含めて、正確に「Ajax Search Lite」と入力すると、検索結果の一番上に出てきます。
ダウンロードして有効化が終わると、左サイドバーのところにAjax Search Liteとメニューが登場します。
ここから設定を行いますが……すべて英語です。とりあえず見てみましょう!
Ajax Search Liteの設定
Ajax Search Liteの設定は、僕自身も言語の壁もありすべてを理解する事はできていません。そこで、実際にあにぶで使用できる状態にまで持っていった設定方法を公開しておきます。今の所、正しく動作をしてくれています。個々でご紹介する設定は、あくまでもあにぶの環境下での話ですので参考程度に読んで頂ければと思います。
Ajax Search Lite>Ajax Search LiteでGeneral Options設定
Sources & Basicsで検索する場所を指定。ここを見るとカスタムフィードも検索対象にできそうな感じ。あにぶでは、固定ページと投稿ページのみに指定
Ajax Search Lite>Ajax Search LiteでFrontend Options設定
ここでは、カテゴリーを絞って検索できるように指示を出せる。管理画面には
Nor recommended if you have more than 500 categories! (the HTML output will get too big)(カテゴリーが500超えると負荷が多きよ!)
的な事が書かれていますが、あにぶのカテゴリーはそんなにないので、onにしてカテゴリーを指定しています。
記事が増えてカテゴリーを追加した場合には、この画面にきてカテゴリーで絞るかどうかの調整をする必要が出てきます。それと、この画面では検索させたくないカテゴリーは設定できません。ここでのカテゴリー設定は、全文検索の上で「カテゴリーを選択してピックアップ」させる設定です。
Ajax Search Lite>Ajax Search LiteでLayout Options設定
まずは、Search Box Layout のタブ。ここでは検索窓のスタイルを変更する事ができます。あにぶではSimpe Redを利用しています。
Ajax Search Lite>Ajax Search LiteでAdvanced設定
ここでは、検索させたくないカテゴリーを設定する事ができます。左側のリストから、検索対象から外したいカテゴリーを右側にドラッグして下さい。これでそのカテゴリーは検索対象から除外される仕組みです。
こちらのサイトではAjax Search Liteについて更に詳しい情報がありますので、導入を検討している場合は一度目を通しておくのはベターですよ。
Ajax Search Lite を利用してみた使用感
僕はあにぶを始め複数のサイトでAjax Search Liteで使用しています。インスタント検索で利便性が向上して、導入前と比べて検索をしてくれるユーザーが増加しています。最後に僕なりのAjax Search Liteプラグインの注目点をまとめました。
- 既存の検索窓を任意でajax search liteに置き換えしてくれるので便利。
- 検索できるカテゴリーなどを選択できるのが助かった。
- CSSを制御して見え方などを大きく変更する事も可能。
- カスタムフィールドも検索対象にできるっぽい(設定画面から推察)
- インスタント検索がカッコいい!
- テーマに記述するコードもあるので、自由な場所に検索窓を表示させる事もできるよ。
このプラグイン利用中に僕なりにいろいろと気になった点があるのでここにまとめておきます。
- ワードプレスに新しいカテゴリーを追加したときに、検索させたくない場合などはajax search liteの管理画面から設定する必要がある。検索カテゴリーをピックアップする場合も同様
- インスタント検索画面でエンターキーを押すと、デフォルトの検索結果画面に移動する。当たり前の仕様なんですが、導入直後は戸惑いました。
- インスタント検索画面で表示されるコンテンツの順番とかを調整できない?ひょっとしたら管理画面から可能かもです。
- インスタント検索の表示がもたつくページがある。いくつかのページで検索できない状況が発生してる。
今回ご紹介させてもらったAjax Search Lite、かなり良いプラグインなので、試してみてはいかがですか?
この記事のライティング担当:あにぶ編集部