WordPressのメニューにもっと多くのリンクを追加しても、訪問者が探しているものを見つけられないのであれば意味がありません。特にモバイルでは、長いメニューは非常に使いにくいです。複数のリンクをタップするのは時間がかかり、訪問者は目的のページにたどり着く前に諦めてしまうことがよくあります。
これは、コンテンツが多く成長中のウェブサイトでよくある問題です。そのため、多くのユーザーはナビゲーションメニューに直接検索バーがあることを期待しています。検索バーがあれば、より速く、よりきれいに、そして訪問者がコンテンツを見つけやすくなります。
これを数十のウェブサイトでテストしましたが、結果は常に同じです。ユーザーがメインメニューから直接検索できると、より多くのインタラクションを行い、より長く滞在します。これは大きな改善につながる小さな調整です。
このステップバイステップガイドでは、ほとんどのテーマで機能する初心者向けの簡単な方法で、WordPressメニューに検索バーを追加する方法を説明します。🔎
WordPressナビゲーションメニューに検索バーを追加する理由
検索バーは、WordPressサイトから離れることなく、ユーザーが必要なものを見つけるのに役立ちます。これにより、ユーザーエクスペリエンスが向上し、訪問者がサイトに長く滞在し、エンゲージメントを高めることができます。
そのため、ほとんどのウェブサイトデザイナーや専門家は、ナビゲーションメニューに検索バーを追加することを推奨しています。そこならユーザーは簡単に見つけることができます。
使用しているテーマによって、メニューに検索バーを追加する方法は異なります。
クラシックテーマを使用している場合は、WordPress検索プラグインが必要です。一方、ブロックテーマのユーザーは、フルサイトエディター（FSE）を使用するだけで済みます。
これを踏まえ、2つの方法を順を追って説明します。ご希望のセクションにスキップするには、以下のクイックリンクを使用してください。
さあ、始めましょう。
方法1：クラシックWordPressテーマのメニューに検索バーを追加する
この最初の方法は、クラシックなWordPressテーマを使用している方向けです。これは、WordPressダッシュボードに外観 » カスタマイズメニューが表示され、テーマカスタマイザーにアクセスできることを意味します。
クラシックテーマを使用している場合、WordPress検索ウィジェットはサイドバーなどのウィジェット対応エリアにのみ追加でき、WordPressメニューには追加できません。
この問題を回避するには、ナビゲーションメニューを含むサイトの他の領域に検索バーを追加できるプラグインが必要です。
SearchWPモーダル検索フォームが私たちのおすすめです。この無料プラグインは使いやすく、どのテーマでも見栄えが良く、サイトのパフォーマンスに悪影響を与えません。また、プレミアムのSearchWPプラグインは必要ありません。
まず最初に行うべきことは、SearchWP Modal Search Formプラグインをインストールして有効化することです。
WordPress管理画面で、プラグイン » プラグインの新規追加 に移動します。
次に、検索バーを使用してプラグインをすばやく見つけることができます。
見つけたら、「今すぐインストール」をクリックし、表示されたら「有効化」をクリックするだけです。
詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
プラグインが有効化されたら、WordPressメニューに検索バーを追加できます。外観 » メニュー に移動し、「編集するメニューを選択」ドロップダウンでプライマリメニューを選択していることを確認してください。
その後、「選択」ボタンをクリックします。
次に、画面左側にあるSearchWPモーダル検索フォームのボックスをクリックします。
プラグインが自動的に「ネイティブ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には組み込みの検索フォームブロックが付属しており、ナビゲーションメニューを含むサイトのどこにでも追加できます。
FAQ: WordPressに検索バーを追加する方法
WordPressサイトに検索バーを追加するのは通常簡単ですが、途中でいくつか一般的な質問が出てきます。以下では、読者がよく尋ねる最も一般的な問題や関連機能に対する簡単な回答をカバーします。
検索バーが表示されないのはなぜですか？
これは通常、テーマまたは検索ウィジェットの配置場所が原因で発生します。一部のテーマでは、ヘッダーやサイドバーなどの特定のエリアにのみ検索バーが表示されます。カスタムCSSによって非表示にされたり、正しいメニューまたはウィジェットエリアに追加されなかったりする場合もあります。
一時的にデフォルトのWordPressテーマに切り替えることで、問題がテーマに関連しているかどうかを確認できます。プラグインを使用している場合は、それが有効になっており、メニューまたはヘッダー設定に正しく接続されていることを確認してください。
WordPressサイトに検索アイコンを追加するにはどうすればよいですか？
多くのWordPressテーマには、ヘッダーまたはナビゲーションメニューに検索アイコンを表示するための組み込みオプションが含まれています。通常、これは外観 » カスタマイズまたはテーマのヘッダー設定で見つけることができます。
テーマがこれをサポートしていない場合、一部のプラグインで検索バーを開くクリック可能な検索アイコンを追加できます。これは、特にモバイルでメニューをすっきりと保つための一般的なオプションです。
WordPressで検索可能なテーブルを作成するにはどうすればよいですか？
テーブルを検索可能にするには、組み込みの検索機能を備えたテーブルプラグインが必要です。これらのプラグインを使用すると、訪問者は検索フィールドに入力して、キーワードに基づいてテーブルの行を即座にフィルタリングできます。
これは、ユーザーが特定の情報をすばやく見つける必要がある価格表、製品リスト、ディレクトリ、または比較チャートに役立ちます。
ページで検索バーを表示するにはどうすればよいですか？
最も簡単な方法は、WordPressブロックエディターを使用してページに検索ブロックを追加することです。検索ブロックを検索して、表示したい場所に配置するだけです。
一部のプラグインやテーマでは、ボタンやアイコンを使用して検索バーを表示することもできます。クリックすると展開されるため、ランディングページやモバイルレイアウトに適しています。
プラグインなしでWordPressに検索バーを追加するにはどうすればよいですか？
プラグインなしで基本的な検索バーを追加するには、WordPressに組み込まれている検索ブロックまたはウィジェットを使用できます。ブロックエディターまたはウィジェット設定を使用して、ページ、投稿、サイドバー、またはフッターに配置するだけです。
メニューやヘッダーにプラグインなしで検索を追加するなど、高度な配置を行う場合は、通常、テーマファイルを編集するか、カスタムコードを追加する必要があります。そのため、多くの初心者はプラグインを使用することを好みます。それがより速く、より安全だからです。
次のステップ: WordPressの検索機能を改善する
この記事が、WordPressメニューに検索バーを追加する方法を学ぶのに役立ったことを願っています。
WordPressサイトの検索機能をさらに改善したい場合は、開始するための他のヒントやトリックを以下に示します。
- WordPressで複数の検索フォームを使用する方法
- WordPressで検索結果ページをカスタマイズする方法
- WordPressでカテゴリ別に検索する方法
- WordPress検索結果からページを除外する方法
- WordPressで多言語検索を追加する方法
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
アンヘル・ロドリゲス
これ、ありがとうございます。このプラグインはうまく機能し、テーマを再度交換したり編集したりする手間を省いてくれました。
WPBeginnerサポート
当社の推奨が役立ったようで嬉しいです！
管理者
マリセル
ありがとうございます！非常に役立ち、非常に簡単でした。
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです！
管理者
Rawan
これらのプラグインはWPバージョン5.8.1でテストされていません
それらをインストールしても大丈夫ですか、それともそのバージョンでテストされた他のプラグインはありますか？
jafrin
こんにちは
このビデオは私にとって非常に役立ちます。しかし、アマゾンのページのようなバーメニューが欲しいです。助けてください。アマゾンのページのような大きな検索バーをどのように作成しますか？
WPBeginnerサポート
お探しの内容によって異なりますが、開始点としては、以下の記事をご覧になることをお勧めします。
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
エリン
プラグインによって生成された結果を別の方法で表示する方法はありますか？画像と説明のリストが表示されますが、画像はすべて異なるサイズで表示されます。商品ページと同じように、1ページあたり24件の結果、4列で表示したいです。
ありがとうございます
WPBeginnerサポート
結果ページのカスタマイズについては、プラグインのサポートに問い合わせてみてください。サポート担当者が対応してくれるはずです。
管理者
オケレケ・ディバイン
いつものように、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://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
ラッブ
説明が正しくない、画面の画像が間違っている、そして間違ったプラグインだと思います
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
管理者
レイモンド
なぜこのウェブサイトのすべてのソリューションはプラグインなのですか？プラグインはウェブサイトを肥大化させ、遅くします。あなたはそれを知っているはずです。すべてにプラグインをインストールするよりも良い解決策があります！
WPBeginnerサポート
ユーザーにとって可能な限り簡単なソリューションを提供するよう努めているため、記事はプラグインに偏りがちです。これにより、ユーザーがサイトのファイルを編集することに慣れていない場合でも、うまくいかない場合に簡単にサイトから削除できるプラグインオプションがあります。
また、すべてのプラグインがサイトを遅くするほど単純ではありません。コードの悪いプラグインはサイトを遅くします。https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
管理者
Ann
なぜ私の設定に「ADD TO SEARCH MENU」がないのですか？
Dan Conway
アップデートによるものか分かりませんが、私も同じことに気づきました。しかし、オプションは「Ivory Search > 設定」の下に見つかるようで、その後、「メニュー検索」という最初の設定が表示され、最初のアコーディオンオプションで追加するメニューを選択できます。
アディティ・ビセン
こんにちは、
検索結果をモバイル/タブレット版のみに表示し、デスクトップ版には表示しないように選択できますか？
イフサン
残念ながら、ナビゲーションメニューと干渉してしまい、正しく表示されません。さまざまなプラグインを試しましたが、すべて同じです。初心者にとっては、テーマ開発者に問い合わせるか、専門家の助けを借りて手動でコーディングする以外に方法はないようです。
Damith
いいえ、簡単なカスタムCSSを作成するために開発者やプロになる必要はありません。