構造化されたナビゲーションメニューは、WordPressサイト内で訪問者を誘導し、必要な情報を簡単に見つけられるようにするために不可欠です。
初めてサイトを立ち上げる場合でも、既存のサイトのユーザーエクスペリエンスを向上させる場合でも、ナビゲーションメニューの追加とカスタマイズの方法を学ぶことは重要なスキルです。
WordPressには、ヘッダーメニューやドロップダウンメニューなどを簡単に作成できるドラッグ＆ドロップメニューインターフェースが搭載されています。
長年にわたり、様々なブランドの様々なメニューを制作してきました。私たちは、さまざまなビジネスにとってどのタイプのメニューが最も効果的か、どのようなリンクやページを含めるべきか、より良いユーザーエクスペリエンスのためにどのようにナビゲーションを最適化すべきかを学んできました。
このステップバイステップのガイドでは、WordPressでナビゲーションメニューを簡単に追加する方法をご紹介します。
ナビゲーションメニューとは？
ナビゲーションメニューは、サイトの重要なエリアを指すリンクのリストです。通常、WordPressサイトの各ページの上部に横長のリンクバーとして表示されます。
これらのメニューはサイトに構造を与え、訪問者が探しているものを見つけられるようにします。WPBeginnerのナビゲーションメニューはこんな感じです：
WordPressでは、メニューやサブメニューを簡単に追加することができます。最も重要なページ、カテゴリーやトピック、ブログ投稿、さらにはソーシャルメディアプロフィールのようなカスタムリンクへのリンクを追加することができます。
メニューの正確な位置はWordPressテーマによって異なります。ほとんどのテーマにはいくつかの設定オプションがあるので、異なる場所に表示できる異なるメニューを作成することができます。
例えば、ほとんどのWordPressテーマには、上部に表示されるプライマリメニューがあります。テーマによっては、セカンダリーメニュー、フッターメニュー、モバイルナビゲーションメニューもあります。
それでは、WordPressでカスタマイザーナビゲーションメニューを作成する方法を見ていきましょう。
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- Video Tutorial
- FAQs About WordPress Menus
カスタムナビゲーションメニューの作成
ナビゲーションメニューを作成するには、WordPress管理ダッシュボードの外観 ” メニューページにアクセスする必要があります。
注意：あなたのサイトに「外観 ” メニュー」オプションが表示されず、「外観 ” エディター」だけが表示される場合は、あなたのテーマがフルサイト編集（FSE）を有効化していることを意味します。ここをクリックして、下のFSEセクションに進んでください。
トップ・ナビゲーション・メニュー」のようにメニューの名前をプロバイダーで指定し、「メニューを作成」ボタンをクリックします。
そうするとメニューエリアが広がり、このように表示される：
次に、メニューに追加したいページを選択します。新しいトップレベルページをすべて自動的に追加するか、左のカラムから特定のページを選択することができます。
まず、「すべてを表示」タブをクリックして、サイトのすべてのページを表示します。その後、メニューに追加したい各ページの横にあるボックスをクリックし、「メニューに追加」ボタンをクリックします。
ページが追加されたら、「メニュー構造」セクションでドラッグ＆ドロップしてページを移動できます。
そうすれば、順番を変えたり、並べ替えたりすることができる。
注意:メニューエディターでは、すべてのメニュー項目は縦（上から下）に表示されます。サイトにメニューを表示する場合、選択した場所によって、縦または横（左から右）に表示されます。
ほとんどのテーマには、メニューを置くことができるいくつかの異なる場所があります。この例では、5つの異なる場所があるAstraテーマを使用しています。
メニューにページを追加したら、表示したい場所を選択し、「メニューを保存」ボタンをクリックします。
ヒント:各ロケーションがどこにあるか本当に〜してもよいですか?おそらく、すべての場所を使いたいとは思わないでしょうが、複数の場所を使いたいと思うかもしれません。
この詳細については、WordPressで垂直ナビゲーションメニューを作成する方法のチュートリアルを参照してください。
これがサイトに掲載された完成したメニューだ：
WordPressでドロップダウンメニューを作成する
ドロップダウン・メニューは、ネスト・メニューと呼ばれることもあり、親メニュー項目と子メニュー項目を持つナビゲーション・メニューです。
親項目にカーソルを合わせると、その下に子項目がすべてサブメニューとして外観表示される。
サブメニューを作成するには、親項目の下に項目をドラッグし、少し右にドラッグします。私たちのメニューでは、「サービス」の下に3つのサブ項目を作りました：
サブメニューにサブメニューを持たせるように、ドロップダウンを何層にも重ねることもできます。これは、少し乱雑に見えるかもしれません、そして、多くのテーマは、マルチレイヤードロップダウンメニューをサポートしていません。
より詳しい説明は、WordPressでドロップダウンメニューを作成する方法のチュートリアルをご覧ください。
これがデモサイトでのサブメニューです：
WordPressのメニューにカテゴリーを追加する
WordPressを使ってブログを運営しているのであれば、WordPressのメニューにブログのカテゴリーをドロップダウンで追加するとよいだろう。
WPBeginnerでは、ニュース、テーマ、チュートリアルなど複数のカテゴリーを用意しています。
メニュー画面の左側にある「カテゴリー」タブをクリックすると、メニューにカテゴリーを簡単に追加することができます。また、すべてのカテゴリーを表示するには、「すべて表示」タブをクリックする必要があります。
メニューに追加したいカテゴリーを選択し、「メニューに追加」ボタンをクリックするだけです。
カテゴリーはメニューの一番下に通常のメニュー項目として表示されます。
次に、これらをドラッグ＆ドロップで配置します。例えば、これらのカテゴリーをすべて「ブログ」メニュー項目の下に配置します。
詳しくは、WordPressのナビゲーションメニューにトピックを追加する方法の初心者向けガイドをご覧ください。
デモサイトのナビゲーションメニューにカテゴリーがどのように表示されるかをご紹介します：
WordPressナビゲーションメニューへのカスタムリンクの追加
カテゴリーやページだけでなく、WordPressはメニューにカスタムリンクを追加するのもとても簡単です。ソーシャルメディア・プロフィールやオンライン・ストア、あなたが所有する他のサイトへのリンクに使うことができます。
これを行うには、メニュー画面の「カスタムリンク」タブを使用する必要があります。メニューに使用したいテキストと共にリンクを追加し、「メニューに追加」ボタンをクリックするだけです。
より多くのコンバージョンを得るために、メニューやコール・トゥ・アクションのボタンにソーシャルメディアのアイコンを追加することもできる。
WordPressナビゲーションメニューのメニュー項目の編集と削除
カスタムナビゲーションメニューにページやカテゴリーを追加すると、WordPressはページタイトルやカテゴリー名をリンクテキストとして使用します。必要であれば、これを変更することができます。
どのメニュー項目も、その横の下向き矢印をクリックすれば編集できる。
メニュー項目名はここから変更できます。また、「削除」をクリックして、メニューからリンクを完全に削除することもできます。
ドラッグ＆ドロップのインターフェースで苦労している場合は、適切な「移動」リンクをクリックしてメニュー項目を移動することもできます。
フルサイトエディター（FSE）でのナビゲーションメニューの追加
新しいフルサイトエディターでは、ブロックエディターを使ってWordPressテーマをカスタマイズできます。WordPress 5.9でリリースされ、テンプレートにさまざまなブロックを追加してユニークなデザインを作成することが有効化されました。
フルサイトエディターを使ってナビゲーションメニューを追加するには、WordPressダッシュボードから外観 ” エディターにアクセスしてください。
このチュートリアルでは、デフォルト設定のTwenty Twenty-Threeテーマを使用します。詳しくは、WordPressのフルサイト編集に最適なテーマの投稿をご覧ください。
エディターに入ったら、「ナビゲーション」タブをクリックして展開する。
これで左カラムにいくつかの新しい設定が開きます。
ここから、上部にある「編集」アイコンをクリックするだけです。
これで画面上にフルサイトエディターが表示され、「+」アイコンをクリックしてナビゲーションメニュー項目を追加することができます。
プロンプトが表示されますので、ドロップダウンメニューからオプションを選択してください。
しかし、カスタムリンクを追加したい場合は、ブロックパネルでナビゲーションメニュー項目のラベルとURLを追加することができます。また、メニューに検索オプションを追加することもできます。
項目を追加したら、右側の列から「スタイル」タブに切り替えます。
メニュー項目のタイポグラフィ、外観、高さ、間隔、大文字と小文字、文字装飾を変更できるようになりました。
ブロックツールバーのアイコンをクリックしてサブメニューを追加することもできる。
変更が完了したら、プレビューしてメニューの見え方をリアルタイムで確認できます。その後、一番上の「保存」ボタンをクリックするのを忘れないでください。
サイドバーとフッターにWordPressメニューを追加する
テーマの表示場所だけに先頭に固定表示する必要はありません。サイドバーやフッターなど、ウィジェットを使うエリアならどこでもナビゲーションメニューを追加できます。
外観 ” ウィジェットにアクセスし、上部にある「ブロックを追加」（+）ボタンをクリックして、「ナビゲーションメニュー」ウィジェットブロックをサイドバーに追加するだけです。
次に、ウィジェットのタイトルを追加し、’Select Menu’ ドロップダウンリストから適切なメニューを選択します。
完了したら、「更新」ボタンをクリックするだけです。
当社の創設者であるSyed Balkhiのサイトで構築されたWordPressフッターカスタムメニューの例です。
ナビゲーション・メニューをさらに使いこなす
リンクがたくさんある壮大なメニューを作成したい場合は、WordPressでメガメニューを作成する方法のチュートリアルがあります。
これにより、画像を含む多くの項目を持つドロップダウンを作成することができます。
メガメニューは、オンラインショップやニュースサイトなど、大規模なサイトを持っている場合に最適な設定です。このタイプのメニューは、ロイター、バズフィード、スターバックスなどのサイトで使われています。
動画チュートリアル
このチュートリアルをご覧になりたい方は、以下の動画をご覧ください：
WordPressメニューに関するFAQ
WordPressのナビゲーションメニューについて、初心者の方によくある質問をご紹介します。
1.WordPressメニューにホームページリンクを追加するにはどうすればよいですか？
ナビゲーションメニューにホームページを追加するには、ページの下にある「すべて表示」タブをクリックする必要があります。そこから、あなたのホームページが表示されるはずです。
ホーム」の隣にあるボックスにチェックを入れ、「メニューに追加」をクリックします。変更を保存することを忘れないでください。
2.WordPressで複数のナビゲーションメニューを追加するには？
WordPressでは、好きなだけメニューを作成することができます。サイトにメニューを設置するには、上で紹介したように、テーマのメニューの場所かウィジェットエリアにメニューを追加する必要があります。
WordPressサイトに複数のナビゲーションメニューを追加したい場合は、まず上記のチュートリアルに従ってメニューを作成してください。
サイトに設置するには、「ロケーションの管理」タブをクリックしてください。
ここから、あなたのテーマで利用可能なメニューの場所に表示したいメニューを選択することができます。
サイトに新しいメニューの場所を追加したい場合は、WordPressテーマにカスタムナビゲーションメニューを追加する方法のチュートリアルを参照してください。
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.
Dayo Olobayo
This was exactly what I needed. I’ve been wanting to make my website look more professional and adding a navigation menu is a big part of that. Thanks for the clear instructions!
Jiří Vaněk
Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.
WPBeginner Support
You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.
管理者
Jiří Vaněk
Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.
David Keevis
Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!
WPBeginner Support
Glad to hear our guide helped!
管理者
NPH LLC
If I “remove” a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.
Thanks!
WPBeginner Support
Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.
管理者
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
管理者
Sunny
A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks
WPBeginner Support
You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.
管理者
Lisa
I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as “Dinner recipes” and “Side dishes”… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?
aberry
Is there a way that when you add a category it automatically adds the sub categories?
WPBeginner Support
You would want to take a look at one of our older articles covering this below for showing subcategories on the parent category page:
https://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/
管理者
HJ
Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?
WPBeginner Support
You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.
管理者
Janien
I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?
WPBeginner Support
You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.
管理者
Miranda
I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?
WPBeginner Support
You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.
管理者
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
管理者
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
管理者
atta
Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.
WPBeginner Support
For that, you would want to use anchor links which we cover in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
管理者
Gina
Hi,
I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?
WPBeginner Support
That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown
管理者
wan
i try to add menu item on my menu structure. even when i save menu, the website doesn’t change. why?
WPBeginner Support
You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.
管理者
Keith
Great resources
WPBeginner Support
Thank you
管理者
Linda McMillan
Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.
WPBeginner Support
You would want to take a look at making an anchor link: https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
管理者
Annie
Pretty much there with the navigation. One question though, I have one point in my navigation “products” from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?
WPBeginner Support
You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.
管理者
Ishan
Thank you for your help.I was facing the same problem
Terry L. Cooper
How old is this anyway?? I’m not seeing any of this on the WP page.
WPBeginner Support
The steps in this article should still work for WordPress.org sites, are you on WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
Azizi
Sorry sir, which WordPress theme you’re using on WPbeginner.com?????
WPBeginner Support
We are using a theme we created for our site built on the Genesis Framework, for more on what we’re using on our site you would want to take a look at our blueprint page here: https://www.wpbeginner.com/blueprint/
管理者
Inzamam ul haq
It really helped me. very informative.Thanks
Natalie V
Hi! Thanks so much for this post. It helped me a lot. I have the “Karuna” theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!
David
Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.
Elliot Kershaw
Hello,
I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!