訪問者が見つけたいものを見つけられない場合、彼らは長居せず、しばしば永久に離れてしまいます。
デフォルトのWordPress検索は簡単ではありません。遅く、ぎこちなく、時代遅れです。キーワードを入力し、Enterキーを押し、ページ全体のリロードを待つだけです。結果は関連性がない場合さえあります。
次に、その逆を想像してみてください…訪問者が入力を開始した瞬間に表示される検索結果。それがライブオートコンプリート検索（Ajax検索とも呼ばれます）の魔法です。モダンで、簡単で、人々をあなたのサイトに引きつけ続けます。
このガイドでは、WordPressにライブオートコンプリート検索を正確に追加する方法を学びます。これにより、非常に高速な結果を提供し、ユーザーエクスペリエンスを向上させ、訪問者の閲覧時間を長く保つことができます。
WordPressにライブオートコンプリート検索を追加する理由
ライブオートコンプリート検索は、訪問者がページをリロードすることなく、ウェブサイトで探しているものをより速く見つけるのに役立ちます。ユーザーが検索バーに入力すると、結果がドロップダウンに即座に表示されるため、クリックして必要なコンテンツに直接移動できます。
このような高速で役立つエクスペリエンスは、人々をWordPressウェブサイトに長く滞在させます。彼らは正しいキーワードを推測したり、遅い結果ページを待ったりする必要がありません。そして、行き止まりに遭遇する可能性も低くなります。
残念ながら、WordPressの検索機能はデフォルトではかなり限定的です。製品の詳細やカスタム投稿タイプなどを検索できないことが多く、完全一致の検索も苦手です。
コンテンツが存在する場合でも、「結果が見つかりません」というページが表示されることさえあります。
そこでライブ検索が非常に役立ちます。特にブログ、ニュースサイト、オンラインストアでは、訪問者が特定のものを素早く見つけたい場合に役立ちます。
人々があなたの最高のコンテンツを発見しやすくしたい場合、ライブ検索を追加することは、それを簡単かつ効果的に行う方法です。
WordPressにライブオートコンプリート検索を追加する方法
サイトにライブオートコンプリート（Ajax）検索を追加する最も簡単な方法は、プラグインを使用することです。このチュートリアルでは、無料のSearchWP Live Ajax Searchプラグインを使用します。これは、最高のWordPress検索プラグインの1つです。
テーマのヘッダーやサイドバーにある既存の検索フォームなど、サイト上の既存の検索フォームを自動的にアップグレードすることで、すぐに機能します。これは、コードを書いたり設定を変更したりすることなく、ライブ検索候補を即座に取得できることを意味します。
💡 注：検索をさらに細かく調整したい場合は、SearchWP Proへのアップグレードをお勧めします。カスタムフィールド、タクソノミー、WooCommerce商品、PDFコンテンツなど、検索に含めるコンテンツを正確に選択できます。
このプラグインの詳細については、詳細なSearchWPレビューをご覧ください。
それでは、WordPressでライブオートコンプリート検索を作成する方法を説明します。
ここでは、私がカバーするすべてのことの簡単な概要を示します。
- ステップ1：SearchWPライブAjax検索のインストールと有効化
- ステップ2：基本的な検索設定を構成する
- Step 3: Add the Live Search Bar to Your Site (Optional)
- ステップ4：ライブ検索のテストとトラブルシューティング
- ボーナスヒント：さらにスマートな検索（あいまい検索）のためにアップグレード
- WordPressにライブオートコンプリート検索を追加するためのFAQ
- WordPress検索を改善するためのその他のガイド
さあ、始めましょう！
ステップ1：SearchWPライブAjax検索のインストールと有効化
まず、SearchWP Live Ajax Searchプラグインをインストールして有効化する必要があります。
「SearchWP Live Ajax Search」を検索して、プラグイン » 新規追加に移動することで、WordPressダッシュボードで直接このプラグインを見つけることができます。
検索結果でプラグインを見つけたら、「今すぐインストール」ボタンをクリックします。インストールが完了したら、「有効化」をクリックしてサイトでプラグインを有効にします。
詳細なインストール手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
このプラグインは完全に無料で、プレミアムプラグインSearchWPの同じチームによって開発されています。独立して動作するため、ライブ検索機能を開始するために何も購入する必要はありません。
有効化すると、WordPress管理画面に新しい「SearchWP」メニュー項目が表示されます。次のステップで設定を構成するためにこれを使用します。
ステップ2：基本的な検索設定を構成する
プラグインがインストールされたので、ライブ検索機能を有効にする必要があります。
WordPressダッシュボードのSearchWP »設定に移動します。
設定ページには、検索を設定するためのいくつかの異なるオプションが表示されます。
「ライブ検索」タブにいることを確認し、ページ上部近くにある「ライブ検索を有効にする」トグルを探します。
トグルをクリックしてオンにし、「保存」ボタンをクリックして設定を保存してください。
有効にすると、ライブAjax検索はWordPressサイト全体の既存の検索フォームで自動的に機能し始めます。
このプラグインは、さまざまな種類のウェブサイトですぐに機能するスマートなデフォルト設定を使用しています。デフォルトでは、投稿タイトルとコンテンツを検索して関連性の高い結果を提供します。
ステップ3：サイトにライブ検索バーを追加する（オプション）
SearchWP Live Ajax Searchプラグインは、WordPressテーマの既存の検索フォームすべてでライブ検索を自動的に有効にします。
ただし、サイドバー、フッター、またはカスタムランディングページのような新しい場所に検索バーを追加したい場合もあります。この手順では、その方法を説明します。
ウィジェット対応エリアにライブオートコンプリート検索を追加する
サイドバーやフッターなどのウィジェットエリアに検索ボックスを追加するには、WordPressダッシュボードの外観 » ウィジェットに移動する必要があります。
サイドバーやフッターなどのウィジェットエリアにある「+」ボタンをクリックします。次に、検索ウィジェットを探します。
追加したら、プレースホルダーテキストをカスタマイズできます。
例えば、ニュースサイトを運営している場合、ウィジェットのタイトルを「最新記事を検索」や「ニュース記事を探す」のようにカスタマイズすると良いでしょう。
または、単に「検索」のままにしておくこともできます。
変更を保存するために「更新」ボタンをクリックするのを忘れないでください。ライブ検索ボックスがウィジェットエリアに表示されるようになります。
デモサイトでは以下のようになります。
フルサイトエディター（FSE）を使用してライブオートコンプリート検索を追加する
フルサイトエディターをサポートするブロックベースのテーマを使用している場合は、ヘッダー、サイドバーなど、ウェブサイトのさまざまな部分に検索ボックスを追加できます。
まず、WordPressダッシュボードから外観 » エディターに移動します。
これにより、フルサイトエディターが起動します。
次に、「テンプレート」タブを開く必要があります。
ここから、ヘッダーやページテンプレートなど、編集したいテンプレートをクリックします。
正確なオプションは使用しているテーマによって異なりますが、ヘッダーテンプレートまたはナビゲーションメニューを選択することをお勧めします。これにより、検索バーがウェブサイト全体に表示されます。
テンプレートをクリックすると、ブロックを使用したビジュアルエディターが表示されます。
新しいブロックを追加するには「+」ボタンをクリックし、ブロックインサーターで「検索」を探してください。
検索ブロックをテンプレート内の目的の場所に上下に移動できます。
ここから、ブロック設定パネルを使用して検索ブロックの外観をカスタマイズできます。
例えば、プレースホルダーテキストを調整できます。
WordPressブログを運営している場合は、「ブログを検索」や「役立つ記事を探す」といった言葉を使うと良いでしょう。あるいは、単に「検索」のままでも構いません。
検索バーのスタイルとレイアウトオプションをカスタマイズして、サイトのデザインに合わせることもできます。
見栄えに満足したら、「更新」ボタンをクリックして変更を保存します。
ステップ4：ライブ検索のテストとトラブルシューティング
さて、新しいライブ検索機能が正しく機能しているかテストする時間です。
ウェブサイトをシークレットウィンドウで開き、検索ボックスに数文字入力することをお勧めします。
すべてが正常に機能していれば、結果がドロップダウンに即座に表示されます。これはAjaxが正しく機能していることを意味します。
ライブ検索がモバイルフレンドリーであることを確認するために、電話やタブレットを含むさまざまなデバイスでテストすることをお勧めします。また、Chrome、Firefox、Safariなどの複数のブラウザで試して、ライブ結果が一貫して表示されることを確認してください。
ライブ検索が表示されない、または期待どおりに機能しない場合、最も一般的な原因はキャッシュの問題とプラグインの競合です。
ブラウザまたはキャッシュプラグインが、読み込み時間を短縮するためにサイトのファイルの古いバージョン（「キャッシュされた」バージョン）を保存している可能性があります。これにより、新しいライブ検索スクリプトが正しく実行されない場合があります。
WordPressキャッシュとブラウザキャッシュをクリアすると、サイトがファイルの最新バージョンを読み込むことが保証され、多くの場合問題が解決します。
このための優れたプラグインはWP Rocketです。初心者にも使いやすく、キャッシュのクリア、スクリプトの最適化、ファイル読み込みの制御により、パフォーマンスを向上させることができます。
詳細については、WordPressキャッシュのクリア方法に関するガイドをご覧ください。
それでも問題が解決しない場合は、他のプラグインを1つずつ非アクティブ化して、競合を確認してください。これにより、他のプラグインがライブ検索に干渉しているかどうかを特定できます。
その他のトラブルシューティングのヒントについては、WordPressの検索が機能しない場合の修正方法に関するガイドを参照してください。
ボーナスヒント：さらにスマートな検索（あいまい検索）のためにアップグレード
新しいライブ検索は、訪問者にとってより良いユーザーエクスペリエンスを提供します。しかし、誰かがタイプミスをしたらどうなるでしょうか？デフォルトでは、WordPressは「wordpress」の代わりに「wordpres」に対して結果を返さない可能性があります。
ここで、プレミアム SearchWP プラグインで利用できる強力な機能であるファジー検索が登場します。
ファジー検索は、ユーザーがスペルミスをしたり、単語の一部しか使用しなかったりしても、ウェブサイトがユーザーが探しているものを理解するのに役立ちます。
例えば、「vntage furniture」を検索した場合でも、あいまい検索機能のあるサイトでは「vintage furniture」に関連する結果が表示されます。
これにより、ユーザーが「結果なし」という行き止まりに直面するのを防ぎ、コンテンツを見つけるのに役立ち、ユーザーエクスペリエンスを向上させ、サイトに滞在してもらうことができます。
ステップバイステップの説明については、WordPressであいまい検索を追加する方法に関するガイドをご覧ください。
WordPressにライブオートコンプリート検索を追加するためのFAQ
WordPressの検索機能について読者から多くの質問を受けるため、最も一般的な質問に対する回答をまとめました。
最適なWordPress検索プラグインは何ですか？
ライブ検索機能については、無料であり、すぐにうまく機能するため、SearchWP Live Ajax Searchをお勧めします。
カスタムフィールド検索や詳細な分析のようなより高度な機能が必要な場合は、プレミアムSearchWPプラグインが優れています。
WordPressの住所フィールドにオートコンプリートを追加するにはどうすればよいですか？
アドレスの自動補完は、コンテンツ検索とは異なります。Google Places APIなどのサービスを使用して、ユーザーが入力する際に実際の住所を提案します。
住所のオートコンプリート機能を備えたWPFormsやGravity Formsのようなフォームプラグインが必要です。これは、サイトのコンテンツの検索とは別に、住所の提案を提供するマッピングサービスに接続します。
特定のカテゴリ内でユーザーが検索できるフォームを作成できますか？
カテゴリで検索できるドロップダウンメニューをユーザーに追加したい場合は、SearchWP Proプラグインが必要です。
無料のSearchWP Live Ajax Searchプラグイン（このガイドで説明しているもの）は、ライブ結果にカテゴリ名を表示しますが、カテゴリフィルター付きの完全な検索フォームを作成することはできません。
その機能を利用するには、SearchWPのフルプラグインにアップグレードし、WordPressでカテゴリ別に検索する方法に関するチュートリアルに従う必要があります。
WordPressサイトに検索機能を追加するにはどうすればよいですか？
ほとんどのWordPressテーマには、メニュー、サイドバー、ヘッダー、またはフッターに追加できる組み込みの検索ウィジェットが含まれています。
詳細については、WordPressメニューに検索バーを追加する方法に関するガイドをご覧ください。
WordPress検索を改善するためのその他のガイド
このガイドがWordPressサイトにライブオートコンプリート検索を追加するのに役立ったことを願っています。
また、サイトの検索を改善するための他の関連ガイドも確認することをお勧めします。
- WordPressでカテゴリ別に検索する方法
- WordPressにPDFのインデックス作成と検索を追加する方法
- WordPressでブログのコメントを検索可能にする方法
- WordPress検索結果にカスタム投稿タイプを含める方法
- 特定のページ、著者などをWordPress検索から除外する方法
- WordPress検索をブログアーカイブページに追加する方法
- WordPressで検索トグル効果を追加する方法
- WordPressで検索アナリティクスを表示する方法（簡単な方法）
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。