想像してみてください。訪問者があなたのサイトにアクセスし、検索バーに質問を入力してEnterキーを押します。ページが再読み込みされるのを待ちます。プレーンな結果リストをスキャンします。そして、彼らは立ち去ります。
私たちはこのパターンが無数のサイトで繰り返されているのを見てきましたが、最も残念なのは、ほとんどのサイトオーナーがそれが起こっていることに気づいていないことです。
問題はコンテンツが不足していることではありません。問題は、WordPressに組み込みのライブ検索がないことです。
すべてのデフォルトの検索フォームは同じように機能します。訪問者がクエリを送信し、WordPressがページを再読み込みし、結果が表示されます。その再読み込みで人々を失います。
良いニュースは、APIキーなし、クラウドアカウントなし、コードを一行も触らずに、無料でWordPressにライブ検索を追加できることです。
この記事では、無料でWordPressにライブ検索を追加する方法を説明します。
WordPressのライブ検索とは？
ライブ検索は、AJAX検索または検索入力時（search-as-you-type）とも呼ばれ、訪問者が入力するにつれて検索フォームの下のドロップダウンに結果を表示します。
Enterキーもページ再読み込みも待機もありません。キーストロークごとに結果が更新されます。
たとえば、「con」と入力すると、ライブ検索が有効になっているバーに、「お問い合わせ」、「コンテンツマーケティングガイド」、「輪郭チェア」などのオプションがリアルタイムで入力の下に表示されます。
訪問者にとって、この体験はGoogle、YouTube、およびほとんどの最新ウェブサイトでの検索方法と同じなので、親しみやすいものです。あなたのサイトが同じ即時フィードバックを提供すると、訪問者は離脱するのではなく、検索を続ける可能性が高くなります。
WordPressサイトにライブ検索が必要な理由
ウェブサイトにライブ検索を追加することは、単にテクノロジートレンドに追いつくだけではありません。
ライブ検索が顧客により良いサービスを提供し、競合他社に差をつけるのに役立ついくつかの方法を次に示します。
- 迅速な結果: ユーザーは入力するとすぐに結果を確認できるため、検索プロセスが大幅にスピードアップします。これにより、探しているものがサイトにあるかどうかをすぐに知ることができます。時間を尊重することで、顧客を大切にしていることになります。
- 直帰率の低下: 迅速で関連性の高い結果は、ユーザーの関心を引きつけ、興味を持たせ続けます。このエンゲージメントにより、ユーザーがフラストレーションからサイトを離れる可能性が減り、サイトの直帰率が低下します。
- コンバージョン率の向上: より高速な検索は、ユーザーがより迅速に意思決定するのに役立ちます。このスピードは、ユーザーがためらうことなく購入やサインアップを完了する可能性が高まるため、コンバージョン率の向上につながる可能性があります。
- アクセシビリティの向上: ライブ検索は、完全なクエリなしでは探しているものの正確な用語や正しいスペルを覚えていない可能性のあるユーザーにとって特に有益です。これにより、目的のアイテムを見つけやすくなり、速くなります。
- ユーザーエクスペリエンスの向上: ライブ検索は、インタラクティブで応答性の高いジャーニーを提供することで、検索エクスペリエンスを変革します。このモダンなアプローチにより、ウェブサイトはよりダイナミックでユーザーフレンドリーになります。
- 有料ツールは不必要なコストと複雑さを生み出します: AlgoliaやElasticPressのようなサービスを見て、APIセットアップ、使用量に応じた価格設定、外部データストレージがニーズには過剰だと感じて離れた多くのサイトオーナーと協力してきました。あなたのデータはあなた自身のサーバーに保存されるべきです。
修正する準備はできましたか？方法を見ていきましょう。
WordPressに無料でライブ検索を追加する方法
ウェブサイトにライブ検索を追加することにしたら、あとは簡単です！必要なのは、無料の SearchWP Live Ajax Search プラグインを使用することだけです。
これは強力なWordPress検索プラグインであり、WordPressにライブ検索を追加するという複雑なタスクを非常に簡単で初心者フレンドリーにします。
誰でも、コーディング知識なしで、数回クリックするだけでLive Ajax Searchプラグインを使用してWordPressウェブサイトにライブ検索を追加できます。
WordPressに無料でライブ検索を追加する方法をステップバイステップで見てみましょう。
ステップ1：SearchWP Live Ajax Searchプラグインのインストール
開始するには、WordPressダッシュボードからプラグイン » 新規追加に移動します。
ここから、「SearchWP Live Ajax Search」を検索フィールドに入力し、SearchWP のプラグインを見つけます。
今すぐインストールをクリックし、インストールが完了したら有効化をクリックしてください。
プラグインのインストール方法がわからない場合は、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。
プラグインが有効になると、設定ページが表示されます。
ライブ検索を有効にするトグルがデフォルトでオンになっていることに気づくでしょう。
ステップ2：検索フォームの作成
次に、最初のライブ検索フォームを作成します。
まず、WordPress ダッシュボードから SearchWP » Search Forms に移動します。
ここで、新しいフォームを追加したり、既存のフォームを選択したりできます。
まず、新規追加をクリックして、最初のライブ検索フォームを作成します。
その後、検索フォームに適切な名前を付けます。この場合、「Homepage Search」と呼びましょう。
次に、デザイン済みのレイアウトテーマから検索フォームのテーマを選択できます。
レイアウトを選択したら、フォームをさらに編集できます。
サイトの美学に合わせて検索フォームのスタイルをカスタマイズするだけです。色からフォントサイズまで、すべてを調整できます。
完了したら、保存をクリックしてライブ検索フォームの作成を完了します。
これで、検索フォームの準備ができました。
完全な手順については、WordPress ページに検索ボックスを追加する方法をご覧ください。
ステップ3：検索結果の外観のカスタマイズ
検索結果の外観をカスタマイズして、希望どおりに表示されるようにすることもできます。
これを行うには、WordPress ダッシュボードから SearchWP » 設定に移動するだけです。
次に、下にスクロールしてテーマを選択します。
SearchWP は、結果の表示方法について 4 つの定義済みレイアウトテーマを提供します。
次に、結果セクションまで下にスクロールします。
ここでは、検索フォームに対する結果ペインの位置を設定したり、ページごとに表示される結果の数を調整したり、ライブ検索がトリガーされる前の最小文字数を設定したり、結果が見つからない場合に訪問者に表示されるメッセージをカスタマイズしたりできます。
その上のカスタム スタイルセクションは、各結果の視覚的なスタイル（画像サイズ、タイトル カラー、(WooCommerce または EDD がアクティブな場合) 価格とカートに追加するスタイル）を制御します。
完了したら、一番上までスクロールし直します。
次に、「保存」をクリックして変更を適用します。
ステップ 4: 検索フォームの表示
最初のライブ検索フォームを作成し、結果の表示方法をカスタマイズしました。次のステップは、それをウェブサイトに表示することです。
検索フォームをウェブサイトに追加する方法はいくつかあります。Gutenberg ブロックを使用してライブ検索フォームを WordPress に追加する方法を見てみましょう。
これを行うには、検索フォームを表示したいページを編集します。
次に、目的の場所を見つけて、+ ブロックを追加ボタンをクリックします。その後、「SearchWP Form」ブロックを探して選択します。
次に、“フォームを選択”ドロップダウンから、この場所に表示するフォームを選択する必要があります。
完了したら、保存または更新ボタンをクリックするだけで、ライブ検索フォームを訪問者が利用できるようになります。
これで、すべてが機能していることを確認しましょう。そのためには、サイトのフロントエンドにアクセスし、いずれかの検索フォームをクリックしてください。
部分的なクエリの入力を開始すると、入力中に下の入力フィールドに結果のドロップダウンが表示されます。追加する各文字で、投稿とページのタイトルがリアルタイムで更新されるのが見えるはずです。
ここにライブ検索フォームが動作しています！
SearchWPにアップグレードすると、異なるコンテンツを表示する複数の検索エンジンを構築し、サイトの各検索フォームに異なるエンジンを割り当てることができます。
ボーナス：SearchWPでライブ検索をパワーアップ
SearchWPライブAjax検索は、投稿タイトル、抜粋、コンテンツと一致するWordPressのネイティブ検索クエリを使用します。
訪問者が製品SKU、カスタムフィールド値、またはPDF内のコンテンツを検索しても、無料プラグインでは見つけられません。
そこで、完全なSearchWPプラグインが登場します。
SearchWPをインストールすると、カスタムフィールド、WooCommerce製品属性、タグ、カテゴリ、PDFなどを検索するカスタム関連エンジンにライブ検索結果がアップグレードされます。
WooCommerceを実行しているサイトは、WooCommerce拡張機能を追加して、製品属性とSKUも検索できます。
完全なアップグレードウォークスルーについては、WordPressにライブオートコンプリート検索を追加する方法に関するガイドを参照してください。
WordPressのライブ検索に関するFAQ
1.ライブ検索はWordPressサイトを遅くしますか？
SearchWPライブAjax検索は軽量なAJAXリクエストを使用しており、デバウンスされています。つまり、訪問者が短い間入力を一時停止した後にのみトリガーされます。各リクエストは、完全なページではなく、検索結果のみを取得します。ほとんどのWordPressサイトでは、ライブ検索によって追加される負荷は、完全なページリロードと比較してわずかであり、サーバーリクエストが関与しているにもかかわらず、訪問者にとってはエクスペリエンスが速く感じられます。
2.ライブ検索は既存のWordPressテーマで機能しますか？
はい。当社のテストでは、Elementor、Divi、Astra、Kadence、GeneratePress、およびその他のほとんどの人気テーマやページビルダーで、すぐに機能します。テーマの編集は不要です。
3.ライブ検索ドロップダウンにWooCommerce製品を表示できますか？
はい。サイトでWooCommerceがアクティブな場合、SearchWPライブAjax検索はそれを自動的に検出します。完全なWooCommerce検索セットアップについては、カスタムWooCommerce検索ウィジェットを追加する方法に関するガイドを参照してください。
4.無料プラグインとSearchWPの違いは何ですか？
SearchWPライブAjax検索は無料で、投稿タイトルとコンテンツに一致するWordPressのネイティブ検索クエリで強化されたライブ検索ドロップダウンを提供します。有料のSearchWPプラグインは、標準ティアでカスタムフィールド、タクソノミー、PDFドキュメントも検索するカスタム関連エンジンにそれらの結果をアップグレードします。WooCommerce拡張機能（Pro以降）を追加すると、WooCommerce製品属性とSKUに検索が拡張されます。
5. WordPressヘッダーまたはメニューにライブ検索バーを追加するにはどうすればよいですか？
ヘッダーに表示されるウィジェットエリアに検索フォームウィジェットを追加するか、ブロックエディターを使用してヘッダーテンプレートに検索フォームブロックを配置します。検索フォームがページ上のどこかに存在すると、SearchWP Live Ajax Search は追加の設定なしで自動的にライブドロップダウンでアップグレードします。
これで完了です！APIキー、クラウドアカウント、コードなしで、WordPressサイトにライブ検索を無料で追加できました。訪問者は、入力し始めるとすぐにサイト上の任意の検索フォームからインスタント結果を得ることができます。
この記事が、WordPressにライブ検索を無料で追加する方法を学ぶのに役立ったことを願っています。また、WordPressで高度な検索フォームを作成する方法やWordPressの検索結果ページをカスタマイズする方法に関するガイドも参照してください。
ライブ検索をさらに進める準備はできましたか？ここからSearchWPを開始できます。
