訪問者が探しているものを見つけられないと、長く留まらず、多くの場合二度と戻ってこないクリックをしてしまいます。
デフォルトのWordPress検索は簡単ではありません。遅く、ぎこちなく、時代遅れです。キーワードを入力し、Enterキーを押し、ページ全体のリロードを待つだけです。結果は関連性がない場合さえあります。
次に、その逆を想像してみてください…訪問者が入力を開始した瞬間に表示される検索結果。それがライブオートコンプリート検索（Ajax検索とも呼ばれます）の魔法です。モダンで、簡単で、人々をあなたのサイトに引きつけ続けます。
このガイドでは、WordPressにライブオートコンプリート検索を追加する方法を学びます。これにより、非常に高速な結果を提供し、ユーザーエクスペリエンスを向上させ、訪問者の閲覧時間を長く保つことができます。🧑💻
⚡ クイックアンサー: WordPressにライブオートコンプリートを追加する最も速い方法は、無料のSearchWP Live Ajax Searchプラグインを使用することです。既存の検索フォームを自動的にアップグレードし、コードを書かずにインスタント結果を表示します。
WordPressにライブオートコンプリート検索を追加する理由
ライブオートコンプリート検索は、訪問者がページをリロードすることなく、ウェブサイトで探しているものをより速く見つけるのに役立ちます。ユーザーが検索バーに入力すると、結果がドロップダウンに即座に表示されるため、クリックして必要なコンテンツに直接移動できます。
このような迅速で役立つ体験は、人々をWordPressウェブサイトに長く留まらせ、フラストレーションを軽減します。
実際、調査によると、40%のユーザーは検索エクスペリエンスが貧弱であったり、関連性のない結果を表示したりする場合、ウェブサイトを離れることが示されています。オートコンプリート検索を使用すると、訪問者は正しいキーワードを推測したり、遅い結果ページを待ったり、行き止まりに遭遇したりする必要がありません。
残念ながら、WordPressの検索機能はデフォルトではかなり限定的です。製品の詳細やカスタム投稿タイプなどを検索できないことが多く、完全一致の検索も苦手です。
コンテンツが存在する場合でも、「結果が見つかりません」というページが表示されることさえあります。
そこでライブ検索が非常に役立ちます。特にブログ、ニュースサイト、オンラインストアでは、訪問者が特定のものを素早く見つけたい場合に役立ちます。
人々があなたの最高のコンテンツを発見しやすくしたい場合、ライブ検索を追加することは、それを簡単かつ効果的に行う方法です。
WordPressにライブオートコンプリート検索を追加する方法
サイトにライブオートコンプリート（Ajax）検索を追加する最も簡単な方法は、プラグインを使用することです。このチュートリアルでは、無料のSearchWP Live Ajax Searchプラグインを使用します。これは、最高のWordPress検索プラグインの1つです。
テーマのヘッダーやサイドバーにある既存の検索フォームなど、サイト上の既存の検索フォームを自動的にアップグレードすることで、すぐに機能します。これは、コードを書いたり設定を変更したりすることなく、ライブ検索候補を即座に取得できることを意味します。
💡 注：検索をさらに細かく調整したい場合は、SearchWP Proへのアップグレードをお勧めします。カスタムフィールド、タクソノミー、WooCommerce商品、PDFコンテンツなど、検索に含めるコンテンツを正確に選択できます。
このプラグインの詳細については、詳細なSearchWPレビューをご覧ください。
それでは、WordPressでライブオートコンプリート検索を作成する方法を説明します。
ここでは、私がカバーするすべてのことの簡単な概要を示します。
さあ、始めましょう！
ステップ1：SearchWPライブAjax検索のインストールと有効化
まず、SearchWP Live Ajax Searchプラグインをインストールして有効化する必要があります。
このプラグインは、プラグイン » プラグインを追加に移動することで、WordPressダッシュボードから直接見つけることができます。
次の画面で、「SearchWP Live Ajax Search」を検索してください。
検索結果でプラグインを見つけたら、「今すぐインストール」ボタンをクリックします。インストールが完了したら、「有効化」をクリックしてサイトでプラグインを有効にします。
詳細なインストール手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
このプラグインは完全に無料で、プレミアムプラグインSearchWPの同じチームによって開発されています。独立して動作するため、ライブ検索機能を開始するために何も購入する必要はありません。
有効化すると、WordPress管理画面に新しい「SearchWP」メニュー項目が表示されます。次のステップで設定を構成するためにこれを使用します。
ステップ2：基本的な検索設定を構成する
プラグインがインストールされたので、ライブ検索機能を有効にする必要があります。
WordPressダッシュボードのSearchWP »設定に移動します。
設定ページで、設定オプションが表示されます。「ライブ検索」タブにいることを確認し、ページの上部近くにある「ライブ検索を有効にする」トグルを探してください。
トグルをクリックしてオンにし、「保存」ボタンをクリックして設定を保存してください。
有効にすると、ライブAjax検索はWordPressサイト全体の既存の検索フォームで自動的に機能し始めます。
このプラグインは、すぐに使えるスマートなデフォルト設定で、さまざまな種類のウェブサイトに適しています。デフォルトでは、関連性の高い候補を提供するために、投稿タイトル、ページタイトル、コンテンツをクエリするようにプラグインが設定されています。
ステップ3：サイトにライブ検索バーを追加する（オプション）
SearchWP Live Ajax Searchプラグインは、お使いのWordPressテーマの既存の検索フォームすべてにライブ検索を自動的に有効にします。
ただし、サイドバー、フッター、またはカスタムランディングページのような新しい場所に検索バーを追加したい場合もあります。この手順では、その方法を説明します。
ウィジェット対応エリアにライブオートコンプリート検索を追加する
サイドバーやフッターなどのウィジェットエリアに検索ボックスを追加するには、WordPress管理ダッシュボードの外観 » ウィジェットに移動する必要があります。
サイドバーやフッターなどのウィジェットエリアにある「+」ボタンをクリックし、標準の「検索」ウィジェットを探します。
SearchWPは、このデフォルトのウィジェットを自動的に検出し、ライブオートコンプリート機能でアップグレードするように設計されています。そのため、特定の「SearchWP」ブロックを探す必要はありません。
追加したら、プレースホルダーテキストをカスタマイズできます。
例えば、ニュースサイトを運営している場合、ウィジェットのタイトルを「最新記事を検索」や「ニュース記事を探す」のようにカスタマイズすると良いでしょう。
または、単に「検索」のままにしておくこともできます。
変更を保存するために「更新」ボタンをクリックするのを忘れないでください。ライブ検索ボックスがウィジェットエリアに表示されるようになります。
デモサイトでは以下のようになります。
フルサイトエディター（FSE）を使用してライブオートコンプリート検索を追加する
フルサイトエディターをサポートするブロックベースのテーマを使用している場合は、ヘッダー、サイドバーなど、ウェブサイトのさまざまな部分に検索ボックスを追加できます。
まず、WordPressダッシュボードから外観 » エディターに移動します。
これにより、フルサイトエディターが起動します。
ここから、「テンプレート」をクリックするか、アクティブなブロックテーマに応じて、パターン » ヘッダーに移動します。
次に、編集したいテンプレート、たとえばヘッダーまたはページテンプレートを選択できます。
正確なオプションはテーマによって異なりますが、「ヘッダー」テンプレートパートを選択することをおすすめします。これにより、ウェブサイトのすべてのページに検索バーが表示されます。
テンプレートをクリックすると、ブロックを使用したビジュアルエディターが表示されます。
「+」ボタンをクリックして新しいブロックを追加し、ブロックインサーターで「検索」を探します。その後、検索ブロックをテンプレート内の希望の位置に上下に移動できます。
ここから、ブロック設定パネルを使用して検索ブロックの外観をカスタマイズできます。
例えば、プレースホルダーテキストを調整できます。
WordPressブログを運営している場合は、「ブログを検索」や「役立つ記事を探す」といった言葉を使うと良いでしょう。あるいは、単に「検索」のままでも構いません。
サイトのデザインに合わせて、検索バーのスタイルやレイアウトオプションをカスタマイズすることもできます。サイトのデザイン。
見栄えに満足したら、「更新」ボタンをクリックして変更を保存します。
ステップ4：ライブ検索のテストとトラブルシューティング
さて、新しいライブ検索機能が正しく機能しているかテストする時間です。
ウェブサイトをシークレットウィンドウで開き、検索ボックスに数文字入力することをお勧めします。すべてが正常に機能していれば、ドロップダウンに結果が即座に表示されるはずです。これはAjaxが正しく機能していることを意味します。
ライブ検索を、電話やタブレットなどのさまざまなデバイスでテストして、モバイルフレンドリーであることを確認することをお勧めします。ユーザーが入力中に、画面上のキーボードが検索結果のドロップダウンを隠さないか確認してください。
また、Chrome、Firefox、Safariなどの複数のブラウザで試して、ライブ結果が一貫して表示されることを確認することもできます。
ライブ検索が表示されない、または期待どおりに機能しない場合、最も一般的な原因はキャッシュの問題とプラグインの競合です。
キャッシュプラグインは、ページの静的コピーを保存して読み込みを高速化します。ただし、これにより「ライブ」検索スクリプトの実行が妨げられ、結果が即座に表示されない場合があります。
このための優れたプラグインは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のビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。