構造化されたナビゲーションメニューは、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.
Lindsey
Thank you for these instructions, very helpful! I have a question that I think relates back to my menu but I’m not totally sure. When I click on a menu item from the home page the site address adds “aboutme” between the main address and the menu page. I do not have anything called “about me” on my site. I don’t understand why it is adding this extra piece of information to each page. Any suggestions on how to remove this “aboutme” information?
hans
Thank you.
I learned much knowledge.
Karen
Hi. I am using Ocean WP and Elementor.
I have a menu organized, but there on one of my Nested menu dropdown sections I want the FIRST category NOT to be linked to a page (I tried to remove the link but I failed).
The nested section is as follows: THERAPY (on top)>Individual>Group
I don’t want THERAPY to lead to a page, it’s blank, it’s just a category I guess. I’ve done this in my previous site but I can’t for the life of me remember how to do it!
I did create a “page” called Therapy so it would show up in the menu options…help me obi wan kenobi you are my only hope!
Dr Karen
WPBeginner Support
Hi Karen,
Add your top link Therapy as a ‘Custom Link’. In the URL field enter # sign and click add to menu. Adjust its position in the menu and then click on Save Menu button.
管理者
Eric Wenocur
Aha, that’s how you do it! Thanks, great tutorials!
WPBeginner Support
You’re welcome, glad you like our content
saurabh
Hello,
We use the two menu system (i.e. primary/top & main/secondary menu) across our websites. And the top/primary menu does not appear on the mobile website.
One of our clients, want both the menus to be visible on the mobile site. Any suggestions on how to do that?
(The website is running on newspaper theme, if that helps.)
Ahmed
Suppose I want to post many articles related to android. Should I create a android page or android category in my wp menu.
WPBeginner Support
Hi Ahmed,
Categories are better to sort your content into different topics. You can add a category to your website’s navigation menu and then it will show all posts filed under that category.
管理者
Lerissa
Hi – Thanks for providing this.
I don’t have any items in my Pages section, which is strange, because my site has several. Did I configure a setting wrong?
Lerissa
WPBeginner Support
Hi Lerissa,
What happens when you click on ‘View All’ under pages?
管理者
Tom
Thanks for this illustration.
Manish Ransubhe
hi sir
thank you, i have started my new WordPress blog and I Stuck on the menu I don’t know how to add menu thanks for your this useful post and Your site helped me to launch my website.
WPBeginner Support
Hi Manish,
Glad you found this guide helpful. You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
管理者
Cyndi Jarvis
Hi and thanks for your support. I have a website almost completed, pretty basic but want to link the menu items to the page that relevant text exists and somehow be able to take the user back to the main menu with a back button. Can you please help.
Thanks
WPBeginner Support
Hi Cyndi,
The tutorial above allows you to link to pages and add them to navigation menus. Seems like you want something a little different, can you please provide more details?
管理者
cyndi
Thanks for trying to help. I am not looking for anything unusual with my menu in the website. I have menu items setup as Home, About Us, Services, Contact. The menu name is First Menu and set to primary. What happens is that I click on Home and the page flashes but I don’t go anywhere. This happens with all of the menu items I click on. Any suggestions what I have setup incorrectly?
Thanks
WPBeginner Support
Hi Cyndi,
You can try this. Go to Apperance » Menus page and click on create a new menu. The following the instructions in the article create new menu by adding your pages from left column to the right. After that select the location for your menu ‘Primary’ and then click on save menu button.
If this doesn’t solve your issue, then preview your website with a default theme. If your navigation menu works as expected with the default theme, then there may be some issue with your current theme. Hope this helps.
管理者
Regina Clarke
This was so helpful and it worked beautifully on my laptop. But on my iPhone the submenu categories I dropped into my Blog menu (which all show up indented as they should) also include the description I created of the category. On my laptop that appears on the archive page for each category but on the phone it appears in the dropdown, which makes it all look muddy. Is there a way to create yet another indent for just the descriptions under each category, effectively nesting three levels?
Thanks very much for any suggestions.
Jillian
Hi there, I have created a nested menu which looks great in the desktop version, but when it gets to the mobile version everything nested is shown on the menu at once! It creates a super long menu page. I have a responsive theme and am unsure if can be fixed.
Amber Shock
Thanks for making such an easy to follow video. It helped a lot and I quickly got my issue figured out.
Bartek
I have problems that wordpress doesn´t let me add any category any more or even is deleting and changing place of some which were once added. Anybody know what can be a reason?
Ahmed Azeem
My website don’t have option of primary, secondary but main and footer menu. I want to add top menu in my website can you please guide me how to add top menu. also in my portfolio page whatever items I am adding is not showing so kindly help me out regarding that. Thanks in advance.
John
I thought this was an explanation about how to add a navigation menu in your WordPress site, but it’s missing the vital code to actually add it to your website. This is the dumbest tutorial (or article title) I have ever seen.
WPBeginner Support
Hi John,
You may want to check out our tutorial on how to add custom navigation menus in WordPress.
管理者
Shibani
I have a site where I want to display custom menu which is a category – like travel. It works fine, but it displayed – Category – Travel above posts. How can I hide that? I’m using wordpress.com and using free plan.
Prachi
Suppose my website is example.com
I want to create a tab called HOME and place it menu.
Whenever I am creating this HOME, the url does not accept example.com
It is becoming as example.com/home.
What should I do?
WPBeginner Support
Hi Prachi,
WordPress already has a navigation menu that you can use. On the navigation menus screen click on the pages and then click on View All. There you will see all your pages and an item called Home. Select home and then click on add to menu button.
管理者
John
I have followed the above instruction. My menu though will not actually appear on any of the sites pages. May I have some guidance please ?
John
Haitham Alnaqeb
Have tried a different themes? Sometime the themes you are using is not supported to some of these futures.
Ike Ezeani
I created a second dropdown menu but when I click the main menu I see the dropdown but it takes to a blank page. Please help.
Stephen B
Hello,
When I log into my wordpress, my edit menu looks completely different and I am having a significantly difficult time adding menus and customizing my site because of this. Can you help me?
Malkeet
Hi, Thanks for the nice detailed explanation of adding menu, but how to call this menu ????
Husnaa
Thanks for helping me out.
Keep helping others.
Lucy
Hi, I’m really struggling with navigation for a clients site and am not sure how to explain what i need. When you click on a Top-Level menu item, I want it to open an additional menu underneath. Each Top-Level will have a different sub menu that stays activated whilst you are in that area of the site.
Like on this website
When you click on say “Commercial Solar” another menu appears and allows you to browse the commercial solar area. The top menu stays selected throughout.
Any help you can offer would be great! Thanks Lucy
WPBeginner Support
Hi Lucy,
Please see our article on how to add a menu item without linking to a page.
管理者
David Blaska
I want to link my pages to headers on the home page that synopsize those pages. How to do? (Like “Our History,” “Who We Are,” etc.) I have a page for each of those but a small blurb on each on the Home Page. Would like for visitors to click on the header of each of those.
Michael
Hi, I need for my main navigation window to ‘push up’ as opposed to ‘drop down’. I’m using Google Doubleclick Ad Exchange for display ads and they claim that my drop down menu could create false clicks on ads. Is there anyway that I could make it push up?
Emma
Thank you so much for this, been trying to figure out how to create drop down menus, this really helped!
isa alshabany
hello
I Am A Beginner Not Professional , I Am Using A Template Theme & You Can See It In My Site .. I Have An Arabic Menu .. I Need To Create An English Menu Underneath It So English Speaking Browser Can Access The English Pages .. Thanks A Lot .. Isa
Haitham Alnaqeb
I think you need to have multi WordPress websites and insert a code in your landing page to redirect your visitors based on their computers language or countries. Each of these website will have a WordPress with its language because it is does not make sense to me if I log in into an Arabic websites that has only Menu in English or the opposite.
Steven Denger
Helo – I have a subdomain for . I really do not use it except to store pages. On one experiment, I use a css code for a page to hide header and navbar. But since then when I removed the css code and tried to create a menu, the nav bar will not show. I am quite familuar with wordpress menus and how to place them. But I just cannot get this one to show. I exported some pages into this subdomain and tried to create a menu – but it is no use – it just will not show. This is what gets me about wordpress – you never know when or how it is going to go haywire. Would ou know what the matter is?
Paul Nye
How can I add a drop down menu in an area of a page other than my sidebar widget?
Mary
HI there,
I was actually wondering if the custom menu takes the place of the default navigation menu. How does it effect the existing default menu and its nesting?
I would have to remember to add my pages to the custom menu.
It may sound silly, but this seems very complicated to me.
I wanted to make a few pages unclickable (like “reviews”) and I like the eventual idea of sub nesting
Thanks for putting so much energy into this article. Mary
munir
Hi all
how could i add a menu on a certain page of my website? (i don’t need the menu to appear on the home page or the front page)
thank you all
Asir
You need to install and activate plugin called (Page Specific Menu items)
How to make this plugin work?
Create a menu from appearance > menus
Select the menu you want to use from settings > PS MenuItems > Select Menu
Assign the menu to menu location from appearance > menus
Check the items you want to hide from pages > edit > Page Specific Menu Items
View the page and the selected items should be gone.
jenijeya
super to quickly understand
Lucas Phan
Hey bro, i have a question for you.
How to create side menu like this
thank bro.
WPBeginner Support
Can be achieved using CSS and JavaScript. See our article on how to add a slide panel menu in WordPress themes, and try using it as a starting point.
管理者
Zac
Hi, I don’t see all those fancy options (e.g., drag and drop sub menus etc) on my FREE wordpress site. I wonder if the information you gave is for the premium wordpress version. Thanks
WPBeginner Support
Hi Zac,
These options described in the tutorial are available in self hosted WordPress.org sites. You are probably using a free WordPress.com website. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Bridget
Thank your for this video. It all seems very simple, but for me when I open wordpress, I do not have the option to choose “appearance.” There is just a link for “menu.” I have created a menu that appears on my blog, but I cannot add categories to it, so the menu is basically useless. When you click on, say, “travel planning” in the menu, it won’t take you to all the article about travel planning, just to something random. I am working on an 11″ laptop, and I read something that said possibly the issue is the size of the screen? If so, I am not sure how to work around that since I travel long term and this is all I have to use. Do you have any suggestions? I really want the menu to work so people can find what they’re looking for! Thanks! Bridget
Hatem Tahir
Hello,
under the menu theme location, i’m not seeing ‘Primary’, ‘Secondary’, thus the pages I added were not shown on the main header, can you please help.
Thanks much
sreekanth
thanks for the guide and how to create the catagerious (if you know please create the video)
Deepak Raghav
Hello Sir, I wan t to create more navigation menu in my wordpress themes. Please tell me how to add more
Dylan
Thank you for the insight, found this very helpful.
Question,
I currently have a menu button link to a certain area of my home page, for instance I named a section/column “#portfolio” so the page will scroll down to that section when the menu button “Portfolio” is clicked.
My problem is that when the user goes to a menu page that loads a new page, my portfolio button wont go back to the home page, its just a dead link/ menu button.
Mija
Great-thank you sooooo much for making it so succibt, precise, clear and understandable!!!
Rafi sultan
Really nice ,every step s defined clearly ,nice material.
thanks
Carrie
Thank you for the information! Understand
1) If I can create different menus but may I know if I can tailor make the location (even if the theme doesn’t provide it) ?
OR
2) Create a double line menu bar at the primary menu (instead of hide those tabs that don’t fit in one line)
I’m using pique theme at wordpress.com
Many thanks and really look forward to a solution.
Cheers,
Carrie
Jennifer
This helped me so much! Thank you! Thank you! Thank you!
lisa thomson
Thanks for this informative how to, article, Sayed. I have a question. I changed my menu and for some weird reason it’s now overlapping into my side bar. So, it’s uneven on the top. Do you know how that can be corrected? I appreciate any tips you have.
Dr.sunita karmankar
Hi, Thanks for the nice detailed explanation of adding menu, it really helped me
khalid mehmood
It really helped.
thanks.
Laxmikant Bhumkar
Super excellent information on a navigation menu. Very easy to learn.
Chirag
Really nice. Go it very easily. Thank you a lot!
You Rock
pinku
very very useful information…now it is easy to create navigation menu
thanks a lot
Sheryl Roger
Excellent material. Every step is defined so clearly that even a novice can implement this step without any difficulty. Thanks for sharing such material as it will be very helpful for beginners in website development.
Francisco
Nice article.
Thanks!