Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのメニューにページにリンクせずにタイトルを追加する方法

WordPressのメニューにリンクを追加せずにタイトルを追加する方法はないかと、ユーザーからよく質問を受けます。

長年にわたり、私たちは何千人ものユーザーがWordPressを使い始めるお手伝いをしてきました。メニューの設定は、新しいウェブサイトを始める際に最も重要なことのひとつです。

しかし、ドロップダウンメニューを作成する際、特定のページにリンクさせずにサブメニューのタイトルを追加したい場合があります。こうすることで、訪問者を同じページに留めることができます。

この投稿では、ページにリンクせずにWordPressのメニューにタイトルを追加する方法を紹介します。

Add WordPress Menu items without links

なぜページへのリンクなしにメニュータイトルをつけるのか?

WordPressには、ウェブサイトをカスタマイズするための複数のオプションが用意されており、ターゲットとするユーザーにリーチし、優れたユーザー体験を提供することができます。

スムーズなユーザーエクスペリエンスを提供するために、WordPressサイトには構造化されたナビゲーションメニューが必要です。これにより、ユーザーはサイト内のコンテンツやさまざまなページを簡単に見つけることができます。

メニュータイトルを追加する際、WordPressは初期設定で各メニューにページへのリンクまたはカスタマイザーリンクを必須としています。しかし、状況によってはメニュータイトルは表示させるが、ページへのリンクは表示させたくない場合があります。

例えば、カテゴリドロップダウンがあり、メニューのタイトルテキストを’categories’にしたいが、リンクを追加する必要はない。ユーザーがカテゴリーをクリックすると、ドロップダウンメニューのサブメニューが開きます。

とはいえ、ページへのリンクを貼らずにWordPressのメニューにタイトルを追加する方法を見てみましょう。

ページへのリンクを使わずにWordPressメニューのタイトルを追加する

まず最初に行う必要があるのは、メニューに新しいメニュー項目を追加することです。WordPressの管理画面から外観 ” メニューを開いてください。

注: 外観 ” メニューのオプションが表示されない場合は、ブロックテーマを使用しているため、このチュートリアルはあなたのテーマでは機能しません。

次に、カスタムリンクを追加します。メニュー項目の追加」に「カスタムリンク」のオプションがあります。

カスタムリンクが表示されていない場合は、画面右上の「画面オプション」ボタンをクリックします。次に、「カスタムリンク」にチェックを入れます。

Screen options in WordPress

その後、メニュー項目のラベルまたはタイトルを入力する必要があります。

URLフィールドにハッシュタグ(#)記号を入力し、「メニューに追加」ボタンをクリックする。

Add a custom link menu item

メニュー項目がWordPressメニューに追加されます。

次に、このカスタムリンクの隣にあるドロップダウン矢印をクリックして、メニュー項目を編集する必要があります。URLフィールドからハッシュタグを削除し、「メニューを保存」ボタンをクリックします。

Remove the hashtag sign and save menu

このメニュー項目にサブメニューを追加し、好きなページにリンクさせたり、カスタマイザーリンクを入力することができます。

メニューの追加にお困りの場合は、WordPressでナビゲーションメニューを追加する方法をご覧ください。

WordPressブログにアクセスすると、リンクのないメニュー項目が表示される。

Menu title preview without link

この記事で、ページにリンクせずに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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

104件のコメント返信を残す

  1. Marit

    Thank you! This was exactly the information I needed!

  2. Ken

    Just what I needed.
    I was scratching my head wondering how I would be able to do this.
    Then I came across this article, thank you very much.

  3. Jon

    This worked great, thanks!

  4. Petur Kirke

    One small thing missing in this article.
    How to get rid of the hand (cursor: pointer), or is it only me, who have this problem ?

  5. Scot

    I’ve used this type of custom link in the top level of my primary menu, and it works great on the desktop. But on mobile devices, when I tap the custom link, it doesn’t open the sub menus below it, so none of those pages are available. Is there a way to fix that?

  6. adnan

    this was helpful thanks

  7. Hamba Allah

    thank you soo much :*

  8. Luis Casanova

    Thank you!
    Just what I needed!

  9. Steve

    I added a title to my web site menu as you suggested using the # method but needed to remove it. I did so on Dashboard but it still shows on my site main menu and when opened it says “blank page” and that it is unsecure. How do it remove it.

    • WPBeginner Support

      If you are using a caching plugin then please delete cached files. Also visit Menus screen to make sure that you have deleted the menu item. Don’t forget to click on the save menu item after removing or adding an item to the menu. Hope this helps.

      管理者

  10. Pam Hill

    I have an existing menu that I need to remove page links from. How do I do that? I have 3 titles in the header that link to its own page. I do not want it to link to any page.

  11. Danielle

    OMG this was a life saver and I’d wish I found this about 6 mos ago….I’ve been trying to figure this out for the longest time. THANK YOU SO MUCH!!

  12. Brendan Dunne

    I used this method to solve my problem and it works great thanks.

    However, the created menu header is not a page so when I go to map the sub pages, how do I structure them?

  13. Marek

    Hello,

    I created a custom menu item in which I want to function as a label only, so I deleted the URL from that item, but it still shows a different color on mouse-over as if it was a link. How do I disable that hover effect from that item?

    You can see it here: and the item is the ‘Written About Braunstein’s:’ in the menu below the logo.

    Thanks

    • Susan Taunton

      This is in response to Marek’s August 9th question about how to remove the hover effect from a non-linked menu title:

      Marek,

      You can use the browser development tool to identify that title’s menu-item-number and then use css to define the link, visited, hover, focus, active colors to all be the same and so remove the hover effect.

      Example:
      #menu-item-2036 a,
      #menu-item-2036 a:link,
      #menu-item-2036 a:visited,
      #menu-item-2036 a:hover,
      #menu-item-2036 a:focus,
      #menu-item-2036 a:active {
      color:#C1A45B;
      }

      Susan

  14. Huzni Saud

    great work mate

  15. Penelope Whiteley

    I didn’t understand this … are there any more images that maybe show the finished product?

  16. Norbert

    Thanks, it is brilliant and works!!!!

  17. WILLIAM

    Thank you, it works like a charm.

  18. Rui

    Using Appearance>Menus,create a Custom Links item with the URL as

    javascript: void(0);

    This is the a great way of solving that problem :)

  19. Peter

    This has bugged my for a while but never did anything about it. Googled and bingo, sorted. So simple thank you.

  20. Annelisse Miller

    Worked Perfect! So easy to follow! Thank you!

  21. teri matelson

    can you make a custom link, added to the primary navigation, open in a new window?

  22. Matthias

    Thanks – really helpful!

  23. Rajit

    Hi, How do I modify the styling of custom links? I want to separate two sets of menu items with separate non-clickable headings.

    Thanks

  24. Graham

    Cheers for that. We were really stuck. Knew it could be done, but didn’t know how…until now. Yer a star :)

  25. Rosie

    Thank you!! This is exactly what I needed to do and it has worked a treat.
    Rosie

  26. Sanjay Nair

    So simple! Just what I needed. Thank you.

  27. Hayley

    Thank you! Exactly what I needed!

  28. Carol M. Smith

    Thanks … but I do not want the words “Menu Item” to be in the menu … Can I change the name “Menu Items” ?

  29. Leanne

    exactly what I needed to know! thank you!!

  30. Bob Varaleau

    I was using categories to do this but this is much better. There is one problem that you might be able to help me with.

    If a viewer was to click on the custom link the custom menu link will remain high lighted until you click on a sub item or some where else on the page. It is a minor thing but if it could be rectified it would make this fix for the menu even better. Is it possible to make this custom link menu button non-clickable using CSS??

  31. Menno van der Krift

    Cheers! Works like a charm.

  32. Mike

    Oddly this doesn’t work on the iPad. Before the submenu can appear, it asks if you want to save the image? Works perfectly well when the drop down button has a normal page link, i.e, the menu item is drawn from ‘Pages’.

  33. George

    This is great – it works. However, the title of my drop-down menu has changed colour – from white to blue. Can anyone explain how I can correct this in wordpress?

  34. jhodgski

    Thanks for this, but wouldn’t it result in invalid HTML as I see you end up with an anchor/link element which has no href attribute. It would also be semantically incorrect to use and anchor/link element if the item isn’t actually a link. Is there a better way?

  35. viktoriana

    This didn’t work in my case :/ Have “converted” a menu which was a ul list of links into a registered wp_nav_menu and now the categories which where listed as wp_list_categories do NOT appear under the custom link as they used to. Somehow wp_list_categories has to be added still into the wp_nav_menu , and it’s not at all that simple as this post suggests. :/

  36. viktoriana

    except this is not working :( followed exactly what you’ve written, added two categories us subpages, but submenu is not showing.
    there must be some wp_list_categories thingy messing up my wp_nav_menu …

  37. bb

    I love wpbeginner! Thanks for this tweak, cheers

  38. Rob Lowndes

    Just what I am looking for. But when I place some pages as sub items under the new blank menu item it looks great until I save the menu and then those pages autmatically revert to the main menu! In other words WP 3.7.1 is not allowing me to save any sub menus to the new item. Can someone help me?

  39. Wayne Gerald

    I did this on my extensive training website. However, I ran out of custom links, meaning I reached WordPress’s custom link limit. Going past this limit, the navigation menu no longer saves. So how do bypass this custom link limit? Is there a plugin? If so, I can’t find it.

    Any help would be much, much appreciated.

  40. kuldip

    Thanx dude it’s helpful for me

  41. Muhlis

    this is what i looking for to edit category dropdown menu in my website resellerhunter.com, thanks for helping.

  42. grrprep

    I want to do something reverse. I want to add pages but not let them appear in menus. I have around 20 pages and do not want 20 sub links in my menu. help is appreciated.

    • CHRIS

      Go to the menus and uncheck the “Automatically add new top-level pages” Now if you want any page to appear at menu you will have to add by yourself.

  43. Janet

    Thank you! I’ve always wondered how to do this.:)

  44. Jake Tyler

    That’s some nice tut, really, thanks so much.

  45. Chris

    Is there any way when we left the mouse on that menu item who hasent got any link, not to change the mouse cursor? Practicaly the browser not to understand as a link?

    Thanks.

    • Mike Ott

      You could just target the element in CSS with:

      cursor:crosshair;

  46. Buck

    Nice tut, i never know this is possible.

  47. Beth Pittman

    Thank you for this post! Is it just me but does anyone else have trouble getting the drop down arrows on the menu screen to open up? When I click on the arrow, it simply moves the menu item down on the menu. I have to repeatedly do this until, finally, it will open. Any tips?

  48. Lorne

    How would accomplish (change) the same thing on a web site WP v3 with already existing Menus?

    Thanks

  49. SmittenbyBritain

    Thanks for the tip. I was trying to figure out how to do that. I just linked things back to home if I didn’t have a url. This works great!

  50. bob

    what if you have already established a large menu bar? can you go back and change the first menu bar title to not connect to a page?

    • Editorial Staff

      Yes, you can always adjust the menus. This technique is particularly helpful if you want to add dropdown items in your long menu bar.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。