ほとんどのWordPressサイトの所有者は気づいていませんが、検索体験が悪いと、静かに訪問者を遠ざけてしまう可能性があります。したがって、検索結果ページで高い直帰率が発生している場合、ユーザーは遅くて役に立たない結果に不満を感じている可能性があります。
そこで、ライブAjax検索が登場します。
ライブAjax検索は、ページをリロードせずに、ユーザーが入力するたびに結果を即座に表示することでこれを解決します。Googleのオートコンプリートのように機能し、訪問者がページ、投稿、または商品をより速く見つけやすくします。
このガイドでは、WordPressにライブAjax検索を簡単に追加する方法を説明します。いくつかのツールをテストした後、最良の結果を得るためにSearchWPを使用することをお勧めします。🙌
WordPressにライブAjax検索を追加する理由
ライブAjax検索（インスタント検索とも呼ばれます）は、Googleのような検索エンジンで一般的なドロップダウンとオートコンプリート機能を追加することで、組み込みのWordPress検索を改善します。
ここに、ライブAjax検索の実行例を示します。
ライブ検索は、ユーザーが入力中に何を検索しているかを推測するため、関連性の高いコンテンツをより速く見つけるのに役立ちます。これにより、ユーザーエクスペリエンスが向上し、ページビューが増加し、直帰率が低下することがよくあります。
Ajaxライブ検索を使用すると、ページをリロードせずに、関連性の高い結果を表示できます。これは、eコマースストアにとって優れた選択肢となります。なぜなら、買い物客は検索クエリに一致する商品を即座に見ることができるからです。
このように、インスタント検索は、よりスマートな商品検索を作成するのに役立ちます。
それでは、WordPressにライブAjax搭載の検索機能を追加する方法をご紹介します。以下は、次のセクションで取り上げるすべてのトピックです。
- ステップ1：WordPressプラグインでAjax検索を有効にする
- ステップ2：WordPressサイトにAjaxライブ検索フォームを追加する
- ボーナスのヒント：インスタントWordPress検索エンジンをカスタマイズする
- WordPressにライブAJAX検索を追加することに関するFAQ
さあ、始めましょう！
ステップ1：WordPressプラグインでAjax検索を有効にする
WordPressにAjaxライブ検索を追加する最も簡単な方法は、SearchWP Live Ajax Lite Searchを使用することです。この無料プラグインは、ウェブサイトにインスタントリアルタイム検索を自動的に追加し、あらゆるWordPressテーマと完全に連携します。
さらに、広範囲にテスト済みですので、当社の完全なSearchWPレビューで詳細をご確認いただけます。
まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、SearchWP » 設定に移動します。次に、「ライブ検索を有効にする」トグルをクリックします。
それが完了したら、「保存」をクリックして変更を保存します。
これで、デフォルトのWordPress検索ブロックにライブAjax検索が有効になります。
ステップ2：WordPressサイトにAjaxライブ検索フォームを追加する
プラグインを有効化すると、WordPressで作成したカスタム検索フォームを含む、サイト上のすべての検索バーが自動的にライブAjax検索を使用するようになります。
ほとんどのWordPressテーマには組み込みの検索バーがあります。ただし、ライブAjax検索を有効にした後、WordPressウェブサイトの他の領域に検索バーを追加したい場合があります。
WordPressページにライブAjax検索を追加する
ウェブサイトの特定のページにライブAjax検索ボックスを追加したい場合があります。たとえば、訪問者がアーカイブを簡単に検索できるように、カスタムアーカイブページにバーを追加することができます。
これを行うには、検索バーを追加したい投稿またはページを開く必要があります。この例では、WordPressページにライブ検索を追加する方法を示しますが、投稿でも同様の手順です。
まず、ページ » すべてのページに移動し、編集したいページを選択します。
WordPress Gutenbergエディターで、「+」アイコンをクリックします。
これでブロックメニューが表示されます。
ここで、ボックスに「検索」と入力し、「検索」アイコンをクリックしてページに追加します。
WordPressは自動的に検索バーを配置します。
デフォルトでは、ボックスには「検索」という見出しが付いています。これをラベルフィールドに入力して変更するか、見出しテキストを完全に削除できます。
オプションのプレースホルダーを入力することもできます。これは、訪問者が検索クエリの入力を開始する前にWordPressが表示するテキストです。たとえば、オンラインストアを実行している場合、「商品を検索」や「お得な情報を見つける」のようなものを使用したい場合があります。
検索バーの設定が完了したら、「更新」ボタンをクリックします。
これで、訪問者はライブ検索バーを使用して、探しているものをすばやく見つけることができます。
同じプロセスを使用して、任意の投稿またはページに検索バーを追加できます。
WordPressサイドバーにライブAjax検索を追加する
多くのウェブサイト所有者は、ウェブサイトのサイドバーに検索バーを追加しています。
これにより、訪問者はサイトのどこにいても検索を実行できます。
WordPressに検索ウィジェットを追加するには、外観 » ウィジェットに移動するだけです。
このページには、WordPressテーマのすべてのウィジェット対応エリアが表示されます。表示されるオプションは異なる場合がありますが、ほとんどのテーマにはサイドバー、右サイドバー、左サイドバー、または同様のセクションのいずれかが含まれています。
ライブAjax検索バーを追加したいエリアをクリックして展開します。次に、「+」アイコンをクリックします。
表示されるポップアップで、「検索」ブロックが表示されたら見つけて選択します。
これにより、ライブAjax検索ウィジェットがサイドバーまたは同様のセクションに自動的に追加されます。
完了したら、「更新」ボタンをクリックして変更を保存し、Ajax検索バーをWordPressブログまたはウェブサイトでライブにします。
これで、サイトにアクセスすると、サイドバーまたは同様のセクションにライブAjax検索バーが表示されます。
検索バーを他のウィジェット対応エリアに追加する際も、同様のプロセスに従うことができます。
💡 インサイダーのヒント：代わりにナビゲーションメニューに検索バーを追加するには、WordPressメニューに検索バーを追加する方法に関するガイドを参照してください。
フルサイトエディターを使用してWordPressサイドバーにライブ検索を追加する
ブロックベースのテーマ（例：ThemeIsle Hestia Pro）を使用している場合、フルサイトエディターを使用してテーマの任意の領域にライブAjax検索を追加できます。
標準のWordPressコンテンツエディターを使用して編集できない領域に検索バーを追加することもできます。たとえば、404ページテンプレートに検索フィールドを追加できます。
開始するには、WordPressダッシュボードの [外観] » [エディター] に移動してください。
デフォルトでは、フルサイトエディターにテーマのホームページテンプレートが表示されますが、任意のテンプレートに検索ブロックを追加できます。
利用可能なすべてのオプションを表示するには、左側のメニューで「テンプレート」を選択します。
ライブAjax検索を追加したいテンプレートをクリックできるようになりました。
WordPressは、デザインのプレビューと編集可能なページ設定を表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックしてブロックエディターを開いてください。
それが完了したら、青い「+」アイコンをクリックします。
表示されるパネルに「検索」と入力します。
「検索」ブロックが表示されたら、フィールドを表示したいエリアにドラッグします。
ブロックのタイトルまたはプレースホルダーテキストをカスタマイズするには、新しいメッセージを検索ブロックに直接入力してください。
ブロックの外観に満足したら、「保存」をクリックしてAjax検索バーをライブにします。
ボーナスのヒント：インスタントWordPress検索エンジンをカスタマイズする
SearchWP Live Ajax Searchは、WordPressの組み込み検索と完全に統合されます。しかし、このデフォルトの検索はかなり限定的であり、正確な検索結果を表示するのに適していません。
ここでSearchWPが登場します。これは、30,000以上のウェブサイトで使用されている、市場で最高のWordPress検索プラグインです。
このプラグインを使用すると、訪問者はデフォルトでWordPressが無視するコンテンツを検索できます。これには以下が含まれます：
SearchWPをインストールすることで、コードを書かずにサイトの新しいインスタント機能を完全にカスタマイズできます。
SearchWPには、訪問者が何を検索しているかを確認できる高度な分析と統計情報もあります。
このインサイトを利用して、サイトの検索設定を微調整し、ウェブサイトで最も人気のあるコンテンツを特定できます。これにより、訪問者がすでに検索している内容に基づいて、新しいブログ記事のアイデアを生成するのに役立ちます。
詳細については、これらのガイドを参照してください。
WordPressにライブAJAX検索を追加することに関するFAQ
まだ質問がありますか？これらのFAQは、WordPressサイトにライブAJAX検索を追加するための重要なポイントをカバーしています。
Ajax搭載検索とは何ですか？また、WordPressサイトにどのようなメリットがありますか？
Ajax搭載検索は、ユーザーが検索バーにクエリを入力するとリアルタイムの結果を提供します。これにより、ページのリロードなしで関連コンテンツへのアクセスが迅速になり、ユーザーエクスペリエンスが向上します。
ライブAjax検索は、WooCommerceのようなeコマースプラグインで使用できますか？
はい、ライブAjax検索は、eCommerceプラグインとWooCommerceのようなプラグインと統合して、インスタントな商品検索機能を提供できます。これにより、買い物客は商品をすばやく簡単に見つけることができます。
ユーザーが何を検索しているかを追跡するにはどうすればよいですか？
ほとんどのWordPress検索プラグインは、訪問者が何を検索しているか、どの結果をクリックしたか、どのクエリで結果が得られなかったかを確認できる組み込み分析機能を提供しています。このデータは、コンテンツのギャップを発見し、サイトの構造を改善し、全体的なユーザーエクスペリエンスを最適化するのに役立ちます。
詳細については、WordPressで検索アナリティクスを表示する方法に関するガイドをご覧ください。
この記事が、WordPressサイトにライブAjax検索を追加する方法を学ぶのに役立ったことを願っています。また、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
管理者