ほとんどのWordPressサイトの所有者は気づいていませんが、検索体験が悪いと、静かに訪問者を遠ざけてしまう可能性があります。検索結果ページの直帰率が高い場合、ユーザーは遅くて役に立たない結果に不満を感じている可能性が高いです。
そこで、ライブAjax検索が登場します。
ライブAjax検索は、ページをリロードせずに、ユーザーが入力するたびに結果を即座に表示することでこれを解決します。Googleのオートコンプリートのように機能し、訪問者がページ、投稿、または商品をより速く見つけやすくします。
このガイドでは、WordPressにライブAjax検索を簡単に追加する方法を説明します。いくつかのツールをテストした後、最良の結果を得るためにSearchWPを使用することをお勧めします。🙌
WordPressにライブAjax検索を追加する理由
ライブAjax検索（インスタント検索とも呼ばれます）は、Googleのような検索エンジンで一般的なドロップダウンとオートコンプリート機能を追加することで、WordPressの組み込み検索を改善します。
ここに、ライブAjax検索の実行例を示します。
ライブ検索は、ユーザーが入力中に検索しているものを推測するため、関連性の高いコンテンツをより速く見つけるのに役立ちます。これにより、ユーザーエクスペリエンスが向上し、ページビューが増加し、直帰率が低下することがよくあります。
Ajaxライブ検索を使用すると、ページをリロードせずに、関連性の高い結果を表示できます。これはeコマースストアにとって優れた選択肢となります。買い物客は、検索クエリに一致する商品を即座に確認できるからです。
このように、インスタント検索は、よりスマートな商品検索を作成するのに役立ちます。
それでは、WordPressにライブAjax検索機能をどのように追加するかをご紹介します。次に説明するすべてのトピックは次のとおりです。
さあ、始めましょう！
ステップ1：WordPressプラグインでAjax検索を有効にする
WordPressにAjaxライブ検索を追加する最も簡単な方法は、SearchWP Live Ajax Searchを使用することです。この無料プラグインは、Webサイトにインスタントリアルタイム検索を自動的に追加し、あらゆるWordPressテーマと完全に連携します。
さらに、広範にテストしました。詳細については、SearchWPのレビュー全体をご覧ください。
まず、プラグインをインストールして有効化する必要があります。
WordPress管理ダッシュボードから、プラグイン » 新規プラグインを追加に移動できます。
次の画面で、検索バーを使用してプラグインをすばやく見つけることができます。
見つかったら、「今すぐインストール」ボタンをクリックし、表示されたら「有効化」をクリックします。
詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、SearchWP » 設定に移動し、「ライブ検索を有効にする」トグルをクリックできます。
それが完了したら、「保存」をクリックして変更を保存します。
これで、デフォルトのWordPress検索ブロックにライブAjax検索が有効になります。
ステップ2：WordPressサイトにAjaxライブ検索フォームを追加する
プラグインを有効化すると、作成したWordPressのカスタム検索フォームを含め、サイト上のすべての検索バーが自動的にライブAjax検索を使用するようになります。
ほとんどのWordPressテーマには組み込みの検索バーがあります。ただし、ライブAjax検索を有効にした後、WordPressウェブサイトの他の領域に検索バーを追加したい場合があります。
WordPressページにライブAjax検索を追加する
ウェブサイトの特定のページにライブAjax検索ボックスを追加したい場合があります。たとえば、訪問者がアーカイブを簡単に検索できるように、カスタムアーカイブページにバーを追加することが考えられます。
これを行うには、検索バーを追加したい投稿またはページを開く必要があります。この例では、WordPressページにライブ検索を追加する方法を示しますが、投稿の場合も同様の手順になります。
まず、ページ » すべてのページに移動し、編集したいページを選択します。
WordPressブロックエディター（Gutenberg）で、「+」アイコンをクリックします。
これでブロックメニューが表示されます。
ここで、検索フィールドに「Search」と入力し、「Search」ブロックをクリックしてページに追加します。
WordPressは自動的に検索バーを配置します。
デフォルトでは、ボックスには「検索」という見出しが付いています。これをラベルフィールドに入力して変更するか、見出しテキストを完全に削除できます。
また、オプションのプレースホルダーを入力することもできます。これは、訪問者が検索クエリの入力を開始する前にWordPressが表示するテキストです。たとえば、オンラインストアを実行している場合は、「商品を検索」や「お得な情報を見つける」のようなものを使用したい場合があります。
検索バーの設定が完了したら、「更新」ボタンをクリックします。
これで、訪問者はライブ検索バーを使用して、探しているものをすばやく見つけることができます。
同じプロセスを使用して、任意の投稿またはページに検索バーを追加できます。
WordPressサイドバーにライブAjax検索を追加する
多くのウェブサイト所有者は、ウェブサイトのサイドバーに検索バーを追加しています。
これにより、訪問者はサイトのどこにいても検索を実行できます。
WordPressに検索ウィジェットを追加するには、外観 » ウィジェットに移動するだけです。
このページには、WordPressテーマのウィジェット対応領域がすべて表示されます。表示されるオプションは異なる場合がありますが、ほとんどのテーマにはサイドバー、右サイドバー、左サイドバー、または同様のセクションがあります。
ライブAjax検索バーを追加したいエリアをクリックして展開します。次に、「+」アイコンをクリックします。
表示されるポップアップで、「検索」ブロックが表示されたら見つけて選択します。
これにより、ライブAjax検索ウィジェットがサイドバーまたは同様のセクションに自動的に追加されます。
完了したら、「更新」ボタンをクリックして変更を保存し、WordPressブログまたはウェブサイトでAjax検索バーをライブにします。
これで、サイトにアクセスすると、サイドバーまたは同様のセクションにライブAjax検索バーが表示されます。
検索バーを他のウィジェット対応エリアに追加する際も、同様のプロセスに従うことができます。
💡 インサイダーのヒント: ナビゲーションメニューに検索バーを追加したい場合は、WordPressメニューに検索バーを追加する方法に関するガイドを参照してください。
Site Editorを使用してWordPressサイドバーにライブ検索を追加する
ブロックベースのテーマ（例：ThemeIsle Hestia Pro）を使用している場合は、フルサイトエディターを使用して、テーマの任意の領域にライブAjax検索を追加できます。
標準のWordPressコンテンツエディターでは編集できない領域にも検索バーを追加できます。たとえば、404ページテンプレートに検索フィールドを追加できます。
開始するには、WordPressダッシュボードの [外観] » [エディター] に移動してください。
デフォルトでは、フルサイトエディターはテーマのホームテンプレートを表示しますが、任意のテンプレートに検索ブロックを追加できます。
利用可能なすべてのオプションを表示するには、左側のメニューで「テンプレート」を選択します。
ライブAjax検索を追加したいテンプレートをクリックできるようになりました。
WordPressは、デザインのプレビューと編集可能なページ設定を表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてブロックエディターを開きます。
それが完了したら、青い「+」アイコンをクリックします。
表示されるパネルに「検索」と入力します。
「検索」ブロックが表示されたら、フィールドを表示したいエリアにドラッグします。
ブロックのタイトルまたはプレースホルダーテキストをカスタマイズするには、新しいメッセージを検索ブロックに直接入力してください。
ブロックの外観に満足したら、「保存」をクリックしてAjax検索バーをライブにします。
ボーナスのヒント：インスタントWordPress検索エンジンをカスタマイズする
SearchWP Live Ajax Searchは、WordPressの組み込み検索と完全に統合されます。しかし、このデフォルトの検索はかなり限定的であり、正確な検索結果を表示するのに適していません。
ここでSearchWPが登場します。これは市場で最高のWordPress検索プラグインであり、30,000以上のウェブサイトで使用されています。
このプラグインを使用すると、訪問者はデフォルトでWordPressが無視するコンテンツを検索できます。これには以下が含まれます：
SearchWPをインストールすることで、コードを書かずにサイトの新しいインスタント検索機能を完全にカスタマイズできます。
SearchWPには、訪問者が何を検索しているかを確認できる高度な分析と統計情報もあります。
このインサイトを使用して、サイトの検索設定方法を微調整し、ウェブサイトで最も人気のあるコンテンツを特定できます。これにより、訪問者がすでに検索しているものに基づいて新しいブログ投稿のアイデアを生成することができます。
詳細については、これらのガイドを参照してください。
WordPressにライブAJAX検索を追加することに関するFAQ
まだ質問がありますか？これらのFAQは、WordPressサイトにライブAJAX検索を追加するための重要なポイントをカバーしています。
Ajax搭載検索とは何ですか？また、WordPressサイトにどのようなメリットがありますか？
Ajax搭載検索は、ユーザーが検索バーにクエリを入力するとリアルタイムの結果を提供します。これにより、ページのリロードなしで関連コンテンツへのアクセスが迅速になり、ユーザーエクスペリエンスが向上します。
ライブAjax検索は、WooCommerceのようなeコマースプラグインで使用できますか？
はい、ライブAjax検索は、eコマースプラグイン（WooCommerceなど）と統合して、インスタント製品検索機能を提供できます。これにより、買い物客は製品をすばやく簡単に見つけることができます。
ユーザーが何を検索しているかを追跡するにはどうすればよいですか？
ほとんどのWordPress検索プラグインは、訪問者が何を検索しているか、どの結果をクリックしたか、どのクエリで結果が得られなかったかを確認できる組み込み分析機能を提供しています。このデータは、コンテンツのギャップを明らかにし、サイトの構造を改善し、全体的なユーザーエクスペリエンスを最適化するのに役立ちます。
詳細については、WordPressで検索アナリティクスを表示する方法に関するガイドを参照してください。
WordPress検索の改善に関するその他のガイド
この記事が、WordPressサイトにライブAjax検索を追加する方法を学ぶのに役立ったことを願っています。
この無料プラグインは検索の外観（ライブドロップダウン）を変更することに注意してください。表示される結果を改善したい場合（PDFコンテンツ、WooCommerce属性、またはカスタムフィールドの検索など）は、プレミアムSearchWPプラグインを確認する必要があります。
開始に役立つガイドをいくつかご紹介します。
- WordPress検索結果からページを除外する方法
- WordPressにPDFのインデックス作成と検索を追加する方法
- WordPressでブログ記事のコメントを検索可能にする方法
- WordPressでカスタムフィールドを検索可能にする方法
- WordPressで複数の検索フォームを使用する方法
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
イジー・ヴァネック
Search WPプラグインを知ったのは、コメント内に検索機能を実装したいと思った時でした。そして、このプラグインについて学ぶほど、ますます気に入っています。Googleのようなオートコンプリート機能は素晴らしいです。主にコメントの検索にこのプラグインを使用しているので、Live Ajax Searchもぜひ試してみるつもりです。見た目も良く、ウェブサイトにプロフェッショナルな印象を与えます。
Mrteesurez
この投稿をありがとうございます。
Ajax検索は、ユーザーがリアルタイムでコンテンツを検索して見つけることができるため、気に入っています。すべてのブログに実装することをお勧めします。
また、404ページにAjax検索フィールドを追加することも支持します。ページにたどり着いたユーザーは、探しているものに関連する投稿を検索して見つけることができます。
エリック・マルタ
こんにちは、このコメント機能をajaxで有効にした後、サーバーのCPU使用率が上昇したため、終了しなければなりませんでした。これは大規模なホスティングサーバー向けだと思います。
WPBeginnerサポート
Sadly, any ajax solution will increase your CPU usage but thank you for sharing this for anyone who has concerns for their hosting CPU usage
管理者