プラグインなしでWordPressサイトにライブAjax検索を追加する方法をお探しですか？
訪問者に検索結果を即座に提供し、ユーザーエクスペリエンスを向上させることができます。
このガイドでは、プラグインなしでサイトにライブ検索を追加する方法と、この方法の欠点について説明します。
ナビゲーションに役立つ目次はこちらです：
サイトにライブ検索を追加する理由
サイトにライブ検索を追加することは、いくつかの理由で役立ちます。
まず、WordPressがデフォルトで表示する新しい別のページで検索結果を見るよりも、訪問者にとって即座に検索結果を得られる方がはるかに便利です。
これにより、時間を節約し、探しているコンテンツがサイトにあるかどうかをより速く判断できます。
次に、サイトでの検索エクスペリエンスが良好だった訪問者は再度利用する可能性が高いため、ページビューを増やすのに役立ちます。
Googleはサイトの平均セッション時間に多くの注意を払っているため、検索エンジンからのトラフィックを増やすための優れた方法でもあります。
しかし、プラグインなしでライブ検索を追加することは、困難な目標かもしれません。これが最良の選択肢ではない理由を詳しく見てみましょう。
プラグインなしでライブAjax検索を追加する際の欠点
プラグインなしでサイトにライブ検索を追加する際の主な問題は、テーマコードの編集が必要になることです。
このアプローチには、注意すべきいくつかの深刻な欠点があります：
- コーディングスキルが必要です。テーマコードを正常に編集するには、コーディング経験とWordPressの仕組みに関する深い理解が必要です。
- 時間がかかります。プラグインを使用するのと対照的に、テーマコードの編集は、どの変更が必要でどこに配置するかを理解するのにかなりの時間がかかります。
- 信頼性がありません。テーマまたはWordPressのバージョンを更新すると、すべてのコードカスタマイズを簡単に失う可能性があります。
- 不便です。プラグインは、ニーズに応じて必要な機能をすばやく有効および無効にできるため、より多くの柔軟性を提供します。
したがって、経験豊富なWordPressユーザーまたはWeb開発者でない場合は、サイトにライブ検索を追加するために別の方法を使用する方が良いでしょう。
それを解決したら、プラグインを使用してテーマファイルを編集せずにサイトにライブ検索を追加する方法を見てみましょう。
方法1：プラグインを使用してライブAjax検索を追加する
サイトにライブAjax検索を追加する最も簡単な方法は、SearchWPのようなプラグインを使用することです。
SearchWPは、市場で最高のWordPress検索プラグインであり、50,000以上のアクティブインストールがあります。
これを使用すると、コーディングなしで数回クリックするだけでサイトでライブ検索を有効にできます。
そして、それはSearchWPの他の多くの機能の1つにすぎません。このプラグインの主な目的は、サイトでの検索を完全に制御できるようにすることです。
たとえば、これを使用して、検索結果の順序を変更したり、投稿タグ、カテゴリ、カスタムフィールドを検索可能にしたり、カスタム検索フォームを作成したりできます。
ビジネスを成長させるのに役立つその他のSearchWP機能をご紹介します。
- あいまい検索を有効にする：これにより、訪問者は検索クエリに誤字があっても正しい検索結果を見つけることができます。
- 訪問者の検索を追跡する：サイトでの検索アクティビティに関する包括的なデータ（最も人気のある検索、クリック数など）を収集します。
- 特定のページを検索結果から除外する：サイトの検索結果から不要なページを非表示にして、訪問者が探しているコンテンツをより速く見つけられるようにします。
- PDFファイルを検索結果に含める：訪問者がサイトの検索バーを使用してPDFやOfficeドキュメントを見つけられるようにします。
それでは、SearchWPを使用してサイトでライブ検索を有効にする方法を見てみましょう。
ステップ1：サイトにSearchWPをインストールして有効化する
開始するには、SearchWPのWebサイトにアクセスして、SearchWPのコピーを入手する必要があります。
完了したら、SearchWPダッシュボードに移動し、[ダウンロード]タブをクリックします。
次に、[SearchWPのダウンロード]ボタンを押し、プラグインのZIPファイルをコンピューターに保存します。ダウンロード後、同じページでSearchWPライセンスキーもコピーする必要があります。これは、サイトでプラグインを有効化するために後で必要になります。
次に、SearchWP ZIPファイルをサイトにアップロードしてプラグインをインストールする必要があります。やり方を忘れた場合は、WordPressプラグインのインストール方法のチュートリアルを確認してください。
プラグインが有効になったら、SearchWPへようこそ画面とセットアップウィザードが表示されます。[オンボーディングウィザードを開始]ボタンをクリックして、画面の指示に従ってください。
ライセンスを有効化したら、次のステップに進み、ライブ検索拡張機能をインストールする準備ができました。
ステップ2：SearchWPライブ検索拡張機能をインストールする
このSearchWP拡張機能をインストールすると、コードを一行も書かずに数回のクリックでサイトにライブAjax検索を有効にできます。
開始するには、WordPressダッシュボードから[SearchWP »拡張機能]に移動できます。
ここから、[ライブ検索]拡張機能を見つけて、[インストール]ボタンをクリックする必要があります。
これで完了です。サイトにライブAjax検索が正常に追加されました。
どのように機能するか見てみましょう。
ステップ3：新しい検索をテストする
これを行うには、サイトにアクセスして検索を実行してください。
たとえば、テストサイトでのライブSearchWP Ajax検索は次のようになります。
無料のWordPressにライブ検索を追加する方法に関するガイドもご覧いただけます。こちら。
方法2：プラグインなしでライブAjax検索を追加する
プラグインを使用せずにサイトにライブAjax検索を追加するには、カスタムコードを多数追加し、テーマファイルを変更する必要があることに注意してください。
開発者でない場合は、この方法は推奨しません。代わりに、最初の方法に従ってSearchWPを使用してライブAjax検索を追加できます。
開始する前に、サイトで使用している現在のテーマの子テーマを作成することをお勧めします。これにより、何か問題が発生してサイトがクラッシュした場合でも、親テーマにすばやく切り替えることができます。
必要であれば、WordPressの子テーマの作成方法に関するこのチュートリアルをご覧ください。
念のため、編集を開始する前にサイトのバックアップを取ることも良い習慣です。Duplicatorのような、選択できるWordPressバックアッププラグインはたくさんあります。
次に、Ajax検索を設定するためにJavaScript、PHP、およびCSSを追加する必要があります。
お手伝いするために、WordPressサイトに必要な機能のリストを以下に示します。
- サイトの検索フォームにライブ結果を統合します。
- 結果を取得するためにAjaxリクエストを行います。
- 結果をドロップダウンメニューに表示し、訪問者が入力中に結果を確認できるようにします。
- 検索結果に対するユーザーの操作を処理します。たとえば、キーボードの矢印で結果を移動したり、ユーザーがドロップダウンの外をクリックしたり、ESCキーを押したりした場合にドロップダウンを閉じたりする必要があります。
- Ajaxリクエストを処理し、クエリを実行して結果を返し、Ajax応答を送信するためのPHPコードを追加します。
- 表示されるドロップダウンと検索結果をスタイル設定するためのCSS。
これにはカスタム開発が必要なため、開発者またはWPBeginner Pro Servicesのような専門サービスに依頼することを検討してください。
これにより、要件を説明し、WordPressサイト用にカスタムソリューションを作成してもらうことができます。
訪問者が即座に検索結果を取得できるようになり、ページビュー数が増加します。
この記事が、プラグインなしでWordPressにライブAjax検索を追加する方法を学ぶのに役立ったことを願っています。また、WordPressでタグ別に投稿を検索する方法やWordPress検索からカテゴリを除外する方法に関するガイドも参照してください。
コーディングなしで数回のクリックでサイトにライブ検索を追加したいですか？ここではSearchWPを開始できます。
