SearchWPブログ

WordPressのチュートリアル、ヒント、リソースでビジネスを成長させる

WordPressに検索バーを追加する方法

WordPressウェブサイトに検索バーを設置することは、訪問者が探しているコンテンツを数秒で見つけられるようにする便利な機能です。

残念ながら、すべてのWordPressテーマにデフォルトで検索バーが搭載されているわけではありません。初心者の方にとっては、追加方法を理解するのが難しい場合もあります。

しかし、サイトに検索バーを表示する簡単な方法があります。サイトのテーマ設定でオプションを有効にする、ウィジェットを使用する、またはテーマエディターを使用して追加することができます。

この記事では、コードなしでWordPressウェブサイトに検索バーを追加する方法をご紹介します。

ウェブサイトに検索バーを追加する理由

検索バーは、ウェブサイトの訪問者がコンテンツをより速く見つけられるようにするだけでなく、ウェブサイトのパフォーマンスを大幅に向上させる多くの隠れた利点をもたらします。

ウェブサイトに検索バーが必要な理由の例をいくつかご紹介します。

  • コンバージョン率の向上: サイトでお探しの商品を見つけやすくなればなるほど、お客様が購入する可能性は高くなります。
  • コンテンツの発見可能性の向上: 質の高いコンテンツの作成には、多大な労力と時間がかかります。検索バーは、訪問者がコンテンツを簡単に見つけられるようにすることで、お客様の努力を最大化します。
  • ユーザーエクスペリエンスの向上: 訪問者があなたのウェブサイトを楽しく探索できれば、何度も再訪してくれるようになります。熱心なオーディエンスは、できるだけ多くのコンテンツを消費したいと考えているため、貴重です。
  • SEOの急上昇: 上記のすべてがGoogleの注意を引くことは間違いありません。サイトでのエンゲージメントを高めることで、ユーザーはサイトでより多くの時間を費やすようになります。これはGoogleに肯定的なシグナルを送り、キーワードランキングの向上に役立ちます。

検索バーを設置するメリットがわかったところで、デフォルトのWordPress検索を変更する方法と、ウェブサイトに検索バーを追加するさまざまな方法を見ていきましょう。以下のリンクをクリックすると、任意のセクションにジャンプできます。

デフォルトのWordPress検索設定を変更する

ネイティブのWordPress検索は限定的であり、コンテンツや製品が多いサイトには適していません。

たとえば、コンテンツを検索する際に、タグ、カテゴリ、カスタムフィールド、製品詳細、PDFファイルなどのドキュメントといった重要な情報が含まれていません。これにより、訪問者が探しているものを見つけられない可能性があるため、ユーザーエクスペリエンスが悪化します。

さらに、特定のページを除外または優先したり、一般的な検索結果の順序をカスタマイズしたりすることはできません。また、検索統計情報も取得できないため、新しいコンテンツのアイデアを生み出し、オーディエンスを理解するための優れた情報源となります。

WordPressの検索エクスペリエンスを向上させる最善の方法は、SearchWPに置き換えることです。これはWordPress向けの最高の検索プラグインであり、カスタム検索エンジンを作成したり、検索プロセスにカスタムフィールド、分類法、その他の重要な詳細を含めたりするのに役立ちます。

SearchWP

さらに、SearchWPの既製のレイアウトを使用してカスタム検索フォームを作成することもできます。カスタマイズにはさまざまなオプションがあるため、ブランドに合わせてテンプレートを簡単に編集できます。このプラグインを使用すると、WordPressサイトを検索する検索バーを作成することもできます。

詳細については、WordPressのデフォルトの検索設定を変更する方法に関するガイドを参照してください。

次に、WordPressに検索バーを追加するさまざまな方法を見てみましょう。

方法1:ウィジェットとして検索バーを追加する

検索バーを追加する最も一般的な方法の1つは、ウィジェットとして追加することです。

これを行うには、適切なウィジェットを、表示したい領域にドラッグアンドドロップするだけです。ただし、WordPressテーマがウィジェット領域をサポートしていることを確認する必要があります。

最初のステップは、WordPressダッシュボードを開き、[外観]の下の[ウィジェット]タブに移動することです。

ウィジェットタブに移動

次に、ウィジェット領域のどこに検索バーを表示したいかを決定する必要があります。

左上の[プラス]ボタンをクリックして、「検索」ウィジェットを見つけます。

検索ウィジェットを見つける

次に、ウェブサイトに表示したい領域にドラッグします。

このように表示されます。

検索ウィジェットをドラッグアンドドロップする

右上にある[更新]ボタンを押すことを忘れないでください。

これにより、すべての変更が保存され、検索バーがウェブサイトで公開されます。

更新ボタンを押す

これで、追加したフッターウィジェット領域に検索バーが表示されていることを確認する必要があります。

ご覧のとおり、検索バーはデモサイトで完全に機能しています。より豊かなエクスペリエンスを提供するために、SearchWPのLive Ajax Search機能も使用しているため、ユーザーは関連性の高い検索結果をすばやく取得できます。

検索バーが機能する

方法2:WordPressテーマカスタマイザーを使用して検索バーを追加する

WordPressに検索バーを追加するもう1つの方法は、サイトのテーマで有効にすることです。

一部のWordPressテーマには組み込みの検索バーが付属していますが、デフォルトではアクティブではありません。テーマカスタマイザーを開き、ナビゲーション設定に移動して有効にする必要があります。

注意:手順は、使用しているWordPressテーマによって異なる場合があります。このチュートリアルでは、GeneratePressテーマを使用しました。

開始するには、WordPressダッシュボードから[外観] » [カスタマイズ]に移動できます。

カスタマイズタブに移動

次の画面で、WordPressテーマカスタマイザーが表示されるはずです。

ここから、左側のメニューから[レイアウト] » [プライマリナビゲーション]に移動する必要があります。

プライマリナビゲーションに移動

次に、テーマのさまざまなナビゲーションオプションが表示されます。

ナビゲーション検索の下にあるドロップダウンメニューをクリックして、[有効にする]オプションを選択してください。

ナビゲーション検索を有効にする

完了したら、完了したら、一番上にある[公開]ボタンを押すことを忘れないでください。

その後、ウェブサイトにアクセスしてすべてが正常に機能するかどうかを確認しましょう。右上隅に虫眼鏡のアイコンがあるはずです。

虫眼鏡アイコン

方法3:フルサイトエディターを使用して検索バーを追加する

ブロックベースのWordPressテーマを使用している場合は、フルサイトエディター(FSE)を使用して検索バーを追加できます。

まず、WordPressダッシュボードから外観 » テーマに移動し、「カスタマイズ」ボタンをクリックする必要があります。

WordPressテーマカスタマイザー

次の画面で、フルサイトエディターが表示されます。

ここから、左側のメニューからナビゲーションに移動します。

ナビゲーションメニューに移動

その後、その他のオプションを開くには、3つのドットアイコンをクリックする必要があります。

次に、「編集」ボタンをクリックできます。

ナビゲーションメニューを編集

その後、「+」ボタンをクリックして新しいブロックを追加できます。

「検索」ブロックに移動して、ナビゲーションに追加するだけです。

FSEに検索ウィジェットを追加

完了したら、変更を保存するだけです。

その後、ウェブサイトにアクセスして、検索バーが機能していることを確認できます。

FSEで検索を表示

ボーナス:WordPressメニューにモーダル検索フォームを追加する

検索バーがサイトのスペースを取りすぎていませんか?それでも訪問者に検索機能を提供したいですか?

最適な解決策は、モーダル検索フォームを追加することです。検索エクスペリエンスを変革し、サイトを整理します。ユーザーがウェブサイトの検索オプションまたはアイコンをクリックすると、検索フォームが表示された小さなポップアップボックスが開きます。

WordPressナビゲーションメニューにモーダル検索フォームを追加する最も簡単な方法は、SearchWPモーダル検索フォームプラグインを使用することです。これにより、数回クリックするだけで、メニュー項目の隣に軽量のモーダル検索フォームを追加できます。

SearchWP モーダルフォームのプレビュー

WordPressメニューのモーダル検索フォームは、モダンな外観も提供します。気を散らすことのない検索エクスペリエンスを提供し、サイトのテーマにシームレスに適合します。

詳細については、WordPressでモーダル検索フォームを追加する方法に関するガイドをご覧ください。

この記事で、さまざまな方法を使用してWordPressに検索バーを追加する方法を学べたことを願っています。また、WordPressで検索ウィジェットをカスタマイズする方法およびWordPressの検索が機能しない問題を修正する方法に関するガイドも参照してください。

よりパーソナライズされたWordPress検索エクスペリエンスを作成する準備はできましたか?今すぐSearchWPで始めましょう!

著者アバター
Aazim Akhtar

今日からより良いWordPress検索エクスペリエンスを作成しましょう

役に立たない検索結果で訪問者を失うことはもうありません。SearchWPを使用すると、独自のスマートなWordPress検索をすばやく簡単に作成できます。

Get SearchWP Now
複数の検索エンジンアイコン