WordPressを使い始めた頃、基本的な検索機能に不満を感じていました。関連性の低い結果が表示されたり、コンテンツが完全に無視されたりすることがよくありました。
自分のWordPressサイトを運営する中で、優れた検索機能は訪問者が探しているものを見つけるのに役立ち、サイトに長く滞在してもらうことにつながることを学びました。これにより、最終的により満足度が高まり、ウェブサイトに戻ってくる可能性が高まります。
そのため、このガイドではWordPressに検索バーを追加する方法を学びます。最後までには、訪問者が喜んで使用し、ウェブサイトにより役立つ強力な検索機能が備わるでしょう。
WordPressに検索バーを追加する理由
特定の情報を探してウェブサイトにアクセスしたばかりだと想像してみてください。ホームページをスクロールしていくつかのタブをクリックしても、探しているものが見つかりません。
イライラしますよね？では、ご自身のWordPressウェブサイトについて考えてみてください。訪問者は何も違いません。彼らは情報を求めており、それを素早く求めています。ここで検索バーの魔法が機能します。
WordPressサイトに検索バーを追加すると、ユーザーエクスペリエンスが向上します。ウェブサイトの訪問者は探しているものを素早く見つけることができると、滞在して探索する可能性が高まります。
実際、サイト内検索者は、この機能を使用しないユーザーよりもコンバージョンする可能性が1.8%高くなります。これにより、検索バーは訪問者を購読者や顧客に変えるために不可欠になります。
さらに良いことに、ユーザーがサイトに長く滞在すると、直帰率を下げることができます。これはSEOのランキング要因です。
しかし、メリットはユーザーエクスペリエンスを超えて続きます。優れた検索バーまたは検索ウィジェットは、オーディエンスが何に興味を持っているかを学ぶのにも役立ちます。検索クエリを見ることで、訪問者の要求や質問に応えるようにコンテンツ戦略を調整できます。
WordPressに検索バーを追加する方法：2つの簡単な方法
デフォルトのWordPress検索機能は単純な状況には適していますが、CSSコードを書いたり開発者を雇ったりせずにカスタマイズするのは困難です。よりカスタムなアプローチにより、ウィジェットエリア、メニュー、WooCommerceページにWordPress検索バーを追加できます。場合によっては、カスタムフィールドや調整された検索結果などを追加できます。
これを念頭に置いて、ウェブサイトに検索バーを追加する方法をステップバイステップで見ていきましょう。
最初にご紹介する方法は、ページビルダーを使用してWordPressサイトに検索バーをシームレスに統合することです。思ったよりも簡単で、技術に詳しくなくても実行できます。
方法1. SeedProdでWordPressにカスタム検索フォームを追加する
まず最初に、SeedProdについてお話ししましょう。
ご存知ない方のために説明すると、SeedProdは最高のWordPressページビルダーの1つであり、コードを一切触らずにウェブサイトをカスタマイズできます。ドラッグアンドドロップ機能から既製のテンプレートまで、SeedProdを使用すると、サイトを思い通りに簡単にデザインできます。
そして、はい、それにはサイトに検索バーを追加することも含まれます。
始める前に、SeedProdをインストールする必要があります。無料版といくつかのプレミアムオプションがありますが、このガイドではSeedProd Proを使用します。プランを選択してプラグインをダウンロードしてください。
ダウンロード後、これらの手順に従ってWordPressサイトにSeedProdプラグインをインストールできます。
SeedProdを有効にしたら、次にWordPressで検索バーを追加する場所を選択します。SeedProdを使用すると、カスタムWordPressテーマでも特定のランディングページでも、ウェブサイトのあらゆる部分をカスタマイズできます。
ランディングページビルダーは、リードとコンバージョンを促進するためのスタンドアロンページを作成するのに最適です。
または、テーマビルダーは、開発者を雇うことなくカスタムWordPressテーマを作成するのに最適です。
これらのオプションを見つけるには、WordPressダッシュボードの[SeedProd]に移動し、ニーズに応じて[テーマビルダー]または[ランディングページ]を選択します。そこから、あなたのビジョンに合った既製のランディングページテンプレートまたは完全なウェブサイトキットを選択して、サイトのカスタマイズを開始できます。
すべての手順が必要ですか？カスタムWordPressテーマの作成方法とWordPressでランディングページを作成する方法のガイドがあります。これにより、物事がより簡単になるはずです。
WordPressページに検索ボックスを追加する
さて、楽しい部分です。検索バーの追加です。
SeedProdページビルダー内には、左側にページに追加できるさまざまなブロックを備えたパネルがあります。検索フォームブロックが見つかるまで下にスクロールします。
次に、WordPress検索をページに追加したい場所にブロックをドラッグアンドドロップします。
検索ブロックの設定内で、外観、サイズ、検索アイコンをカスタマイズしたり、訪問者をガイドするための「ここに検索…」のようなプレースホルダーテキストを追加したりできます。
検索フォームの「高度な」タブでは、多くのカスタマイズオプションを利用できます。検索ボタンと検索ボックスの色をサイトのテーマに合わせて変更したり、最適なレイアウトのために間隔を調整したり、デバイスの表示を制御したり、追加のフレアのためにアニメーションを追加したりできます。
変更に満足したら、[保存]および[公開]ボタンをクリックし、ページにアクセスして新しい検索バーを確認します。
WordPressヘッダーに検索バーを追加する
サイト検索は、すべてのページで簡単にアクセスできるヘッダーで最も効果的だと考えているかもしれません。その通りです。SeedProdを使用すると、WordPressヘッダーに検索バーを追加するのは簡単です。
これには、ヘッダー、フッター、サイドバー、アーカイブなど、ウェブサイトのさまざまな部分をカスタマイズできるテーマビルダー機能を使用する必要があります。
まだSeedProdを使用してWordPressテーマを設定していない場合は、WordPressヘッダーをカスタマイズするためのこれらの手順に従うことができます。
ヘッダーの編集モードに入ると、おなじみのSeedProdページビルダーインターフェイスが表示されます。以前と同様に、左側のパネルで検索フォームブロックを見つけ、ヘッダー内の目的の場所にドラッグします。
検索バーをヘッダーのデザインにシームレスにフィットするように微調整することを忘れないでください。「詳細」タブに移動して、検索フォームの設定を行います。ここで、スタイリングを調整し、さまざまなデバイスで検索バーが異なって表示されるように設定できます。
変更を保存したら、ウェブサイトを確認して、ヘッダーの検索バーが実際に機能していることを確認できます。
WordPressサイドバーに検索ウィジェットを追加する
特に、検索バーにアクセスしやすく、かつ目立ちすぎないようにしたい場合、サイドバーは検索バーに最適な場所となることがあります。SeedProdを使用すると、ヘッダーに追加するのと同じくらい簡単にWordPressサイドバーに検索バーを追加できます。
手順を説明しましょう。
以前と同様に、WordPressダッシュボードに移動し、SeedProd、次にTheme Builderをクリックします。そこから、サイドバーテンプレートの「デザインを編集」リンクをクリックして、ページビルダーを開きます。
まだこのテンプレートをお持ちでない場合は、これらの手順に従ってWordPressでカスタムサイドバーを作成してください。
サイドバーのページビルダーに入ったら、左側のパネルで検索ブロックを見つけ、サイドバーの検索バーを配置したい場所にドラッグします。
あとは、外観をカスタマイズして、保存ボタンをクリックして変更を公開するだけです。
方法2.検索バープラグインでWordPressにサイト検索を追加する
WordPressサイトに検索バーを追加するための専用ソリューションを探している場合は、WordPress検索プラグインであるSearchWPのようなものが優れた選択肢となります。
このような検索プラグインを使用すると、Ajaxベースのライブ検索やカスタマイズ可能な検索結果などの高度な機能を使用して、検索ボックスを簡単に追加できます。
ライブAjax検索は、ユーザーが入力するとリアルタイムで検索結果を提供します。これにより、結果を待つ時間が短縮され、全体的な検索エクスペリエンスが向上します。
WordPressナビゲーションメニューに検索バーを追加する
まず、WordPressダッシュボードに移動し、プラグインに移動して、新規追加をクリックします。「SearchWPモーダル検索フォーム」を検索して、プラグインをインストールしてアクティブ化します。または、WordPress.orgからプラグインをダウンロードして手動でアップロードすることもできます。
アクティブ化後、ダッシュボードから外観、メニューに移動し、ドロップダウンから編集するメニューを選択します。
次に、画面左側にある「SearchWPモーダル検索フォーム」ボックスを見つけてクリックしてオプションを展開します。「ネイティブWordPress」ボックスオプションをチェックして、メニューに追加ボタンをクリックします。
これで、メニューに「ネイティブWordPress」という項目が表示され、クリックしてカスタマイズできます。たとえば、わかりやすくするためにナビゲーションラベルを「検索」に変更できます。
その後、変更を保存ボタンをクリックしてメニューを保存し、メニュー検索機能が実際に動作しているか確認するためにウェブサイトにアクセスしてください。
Ajax搭載のライブ検索を追加する
よりインタラクティブな検索エクスペリエンスのために、Ajaxテクノロジーを使用してライブ検索結果を追加できます。これにより、Google検索などの検索エンジンと同様に、ユーザーがクエリを入力すると関連する検索結果を表示できます。
これを行うには、「SearchWP Live Ajax Search」プラグインをインストールして有効化します。これはSearchWPモーダル検索フォームとシームレスに連携し、設定する設定はありません。
有効化されると、プラグインは自動的にすべてのフォームにライブ検索を追加します。サイトのフロントエンドで検索フォームにアクセスし、クエリを入力することで、実際に動作している様子を確認できます。
WordPress検索結果のカスタマイズ
ライブ検索バーをWordPressメニューに追加するのは素晴らしいスタートですが、プレミアムSearchWPプラグインを使用するとさらに多くのことができます。プレミアムプラグインには高度な検索機能があり、検索結果をカスタマイズしたり、eコマース製品のようなプロモーションアイテムを強調表示したりできます。
完全なガイドについては、SearchWPでWordPress検索を改善する方法に関するこれらのヒントを参照してください。
以上です！
WordPressサイトに検索バーを追加することは賢明な選択です。ウェブサイトを使いやすくし、訪問者が探しているものを見つけやすくします。SeedProdまたはSearchWPのいずれを使用しても、どちらの方法も簡単で効果的です。
ですから、検索バーを追加してください。訪問者はきっと感謝するでしょう！
さらに簡単なWordPressチュートリアルをお探しの場合は、次のガイドをご覧ください。
- WordPressにBefore and Afterフォトスライダーを追加する方法
- WordPressに著者ボックスを追加する方法
- WordPressでアニメーション番号カウンターを作成する方法
- WordPressでファンシーなセクション区切りを作成する方法
- ブログをウェブサイトのように見せる方法
- WordPressでタブを作成して見栄えの良いタブ付きコンテンツを作成する方法
- WordPressでテキストアニメーションを作成する方法（簡単な手順）
- WordPressでページごとに異なるサイドバーを追加する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
