WordPressのナビゲーションメニューに検索バーを追加したいですか？
WordPressの初期設定では、サイトのサイドバー、フッター、その他のウィジェット対応エリアに検索を追加することができます。しかし、多くのユーザーはWordPressの検索ボックスをナビゲーションメニューに設置することを好みます。
この投稿では、コーディングの知識がなくてもWordPressのメニューに検索バーを簡単に追加する方法を紹介します。
なぜWordPressのナビゲーションメニューに検索バーを追加するのか？
検索バーは、ユーザーがWordPressサイトを離れることなく探しているものを見つけるのに役立ちます。これにより、ユーザーエクスペリエンスが向上し、サイト訪問者の滞在時間が長くなり、エンゲージメントが高まります。
そのため、ほとんどのサイトデザイナーや専門家は、ユーザーが見つけやすいナビゲーションメニューに検索バーを追加することを推奨している。
使用しているテーマによって、メニューに検索バーを追加する方法は異なります。クラシックテーマをお使いの場合は、WordPress検索プラグインが必要です。
ブロックテーマ・ユーザーに関しては、フルサイトエディター（FSE）を使用すればよい。
それを念頭に置いて、2つの方法を1つずつ見ていこう。以下のクイックリンクから、お好きなセクションに飛べます：
方法1：クラシックWordPressテーマのメニューに検索バーを追加する
この最初の方法は、クラシックWordPressテーマを使っている人向けです。つまり、WordPressのダッシュボードにある「外観 “ カスタマイズ」 メニューが表示され、テーマカスタマイザーにアクセスできることを意味します。
クラシックテーマを使用している場合、WordPress検索ウィジェットはサイドバーなどのウィジェット対応エリアにのみ追加でき、WordPressメニューには追加できません。
この問題を回避するには、ナビゲーションメニューを含むサイトの他のエリアに検索バーを追加できるプラグインが必要です。
SearchWP モーダル検索フォームが一番のおすすめです。この無料プラグインは使いやすく、どんなテーマにも似合い、サイトのパフォーマンスに悪影響を与えません。また、SearchWPプラグインは必須ではありません。
注： このプラグインはWordPressの最新バージョンでテストされていないことにお気づきかもしれません。しかし、私たち自身でテストしたところ、この目的には問題なく動作しました。
未検証のWordPressプラグインをインストールすべきかどうかについての記事をお読みください。
まず最初に、SearchWP モーダル検索フォーム プラグインをインストールして有効化します。詳しくはWordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、WordPressメニューに検索バーを追加する必要があります。本当に〜してもよいですか？」ドロップダウンメニューでプライマリメニューを選択してください。
その後、「選択」ボタンをクリックする。
次に、画面左側のSearchWPモーダル検索フォームボックスをクリックします。
プラグインが自動的に「Native WordPress」検索テンプレートを追加しているのがわかります。Native WordPress」にチェックを入れてください。
そして、「メニューに追加」ボタンをクリックする。
WordPressはメニューに新しい「Native WordPress」項目を追加します。
この項目を設定するには、クリックしてください。まず始めに、ナビゲーションラベルを「検索」に変更し、訪問者にここが検索フィールドであることを知らせるのが良いでしょう。
この変更を行うには、「ナビゲーション・ラベル」フィールドに「検索」と入力するだけです。
その後、「メニューを保存」ボタンをクリックして変更を保存します。これで、WordPressブログにアクセスすると、ナビゲーションメニューに新しい検索バーが表示されます。
SearchWPは、以下の画像にあるように、WordPressテーマに合わせて自動的に検索をスタイルします。
方法2：ブロックWordPressテーマのメニューに検索バーを追加する
WordPressのブロックテーマを使用している場合、フルサイトエディターを使ってナビゲーションメニューに検索バーを追加することができます。
WordPress管理エリアの「外観“ エディター」を開きます。
テーマをカスタマイズするオプションのリストが表示されます。
ここでは、『ナビゲーション』をクリックすればいい。
次に、鉛筆の「編集」ボタンをクリックする。
これでブロックエディターが表示されます。
この段階で、画面上の任意の場所で「＋ブロック追加」ボタンをクリックできる。
その後、検索ブロックを選択する。
ナビゲーションメニューに検索バーがあるはずです。
さらに、プレースホルダー・テキストを編集して、’What are you searching for?’のように変更することもできる。ブロック設定のサイドバーでは、検索バーの見え方を自由にカスタマイズできる。
検索ブロックに満足したら、「保存」をクリックするだけです。
WordPress検索を向上させる専門家のヒント
ナビゲーションメニューに検索バーを追加する以外にも、WordPressの検索体験を向上させる方法はたくさんあります。
ひとつはSearchWPを使うこと。このプラグインは、WordPressの検索アルゴリズムをカスタマイズするのに役立ちます。
例えば、Ajaxテクノロジーを使ってライブ検索結果を追加することで、検索フォームをさらにユーザーフレンドリーにすることができます。これにより、訪問者がクエリーを入力すると、Googleのように自動的に関連する検索結果が表示されます。
詳しくは、WordPressサイトにライブAjax検索を追加する方法の投稿をご覧ください。
WordPressの検索を強化するその他のヒントやトリックをご紹介します：
この投稿が、WordPress メニューに検索バーを追加する方法を学ぶのにお役に立てば幸いです。また、当社の専門家が選んだ中小企業に最適なライブチャットソフトウェア、またはWordPress をスピードアップし、パフォーマンスを向上させるための便利なヒントのリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Angel Rodriguez says
Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.
WPBeginner Support says
Glad our recommendation was helpful!
管理者
Maricel says
Thank you! Very helpful and very easy.
WPBeginner Support says
Glad to hear our article was helpful!
管理者
Rawan says
These plugins are untested for WP version 5.8.1
Is it still ok to install them or is there other plugins that are tested for that version?
jafrin says
hi
This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page
WPBeginner Support says
It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
Erin says
Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
thank you
WPBeginner Support says
For customizing the results page you would want to check with the plugin’s support and they should be able to assist.
管理者
Okereke Divine says
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support says
You’re welcome, glad our guide could be helpful
管理者
Parwez says
Sir, how did u create logo, search bar and menu in header side by side
WPBeginner Support says
Our theme is custom created so we manually set that up with the creation of the theme
管理者
Angelica says
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
WPBeginner Support says
You’re welcome, glad our article could be helpful
管理者
Rochelle says
I would like the search item to appear as the first item in the menu, not the last. Is this possible?
WPBeginner Support says
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 says
Hi,
How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,
Thanks
WPBeginner Support says
For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Rubb says
The explain it not right, the screens images is wrong and I think it is the wrong plugin
WPBeginner Support says
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
管理者
James King says
This doesn’t work guys. There’s no such plugin for a start.
WPBeginner Support says
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 says
Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!
WPBeginner Support says
We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
管理者
Ann says
why does my setting doesnt have an ADD TO SEARCH MENU
Dan Conway says
Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.
Aditi Bisen says
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
Ihsan says
unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.
Damith says
No, You don’t need to become developer or professional to make small custom CSS.