Dobrze skonstruowane menu nawigacyjne jest niezbędne do prowadzenia przewodnika po twojej witrynie WordPress i zapewnienia, że mogą oni łatwo znaleźć potrzebne informacje.
Niezależnie od tego, czy tworzysz swoją pierwszą witrynę internetową, czy próbujesz poprawić wrażenia użytkownika na istniejącej, nauka dodawania i dostosowywania menu nawigacyjnego jest ważną umiejętnością.
WordPress jest wyposażony w interfejs menu typu „przeciągnij i upuść”, który można wykorzystać do łatwego tworzenia menu nagłówków, menu z opcjami rozwijanymi i wielu innych.
Przez lata stworzyliśmy wiele różnych menu dla różnych marek, co dało nam doświadczenie z pierwszej ręki w projektowaniu stylów menu. Nauczyliśmy się, jakie rodzaje menu najlepiej sprawdzają się w różnych firmach, jakie odnośniki i strony należy uwzględnić oraz jak zoptymalizować nawigację, aby zapewnić lepsze wrażenia użytkownika.
W tym przewodniku krok po kroku pokażemy, jak łatwo dodać menu nawigacyjne w WordPress.
Czym jest menu nawigacyjne?
Menu nawigacyjne to lista odnośników prowadzących do ważnych obszarów witryny internetowej. Zazwyczaj są one prezentowane jako poziomy pasek odnośników u góry każdej strony witryny WordPress.
Te menu nadają twojej witrynie strukturę i pomagają odwiedzającym znaleźć to, czego szukają. Oto jak wygląda menu nawigacyjne na WPBeginner:
WordPress bardzo ułatwia dodawanie menu i podmenu. Możesz dodać odnośniki do najważniejszych stron, kategorii lub tematów, wpisów na blogu, a nawet własnych odnośników, takich jak profil w mediach społecznościowych.
Dokładne położenie menu zależy od twojego motywu WordPress. Większość motywów ma kilka opcji, dzięki czemu można tworzyć różne menu, które mogą być wyświetlane w różnych miejscach.
Na przykład, większość motywów WordPress ma menu główne, które pojawia się u góry. Niektóre motywy mogą również zawierać menu dodatkowe, menu stopki lub mobilne menu nawigacyjne.
To powiedziawszy, zobaczmy, jak można utworzyć własne menu nawigacyjne w 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
Tworzenie twojego pierwszego własnego menu nawigacyjnego
Aby utworzyć menu nawigacyjne, musisz przejść na stronę Wygląd ” Menu w kokpicie administratora WordPress.
Uwaga: Jeśli nie widzisz opcji„Wygląd ” Menu” na swojej witrynie i widzisz tylko„Wygląd ” Edytor„, oznacza to, że twój motyw ma włączoną pełną edycję witryny (FSE). Możesz kliknąć tutaj, aby przejść do sekcji FSE poniżej.
Gdy już tam będziesz, podaj nazwę twojego menu, na przykład „Top Navigation Menu”, a następnie kliknij przycisk „Utwórz menu”.
Spowoduje to rozwinięcie obszaru menu, który będzie wyglądał następująco:
Następnie możesz wybrać strony, które chcesz dodać do menu. Możesz automatycznie utworzyć wszystkie nowe strony najwyższego poziomu lub wybrać określone strony z lewej kolumny.
Najpierw kliknij kartę „Zobacz wszystko”, aby zobaczyć wszystkie strony twojej witryny. Następnie kliknij pole obok każdej ze stron, które chcesz dodać do twojego menu, a następnie kliknij przycisk „Dodaj do menu”.
Po dodaniu twoich stron możesz je przenosić, przeciągając je i upuszczając w sekcji „Struktura menu”.
W ten sposób można zmieniać ich kolejność i układ.
Uwaga: Wszystkie pozycje menu są wyświetlane na liście pionowej (od góry do dołu) w edytorze menu. Po uruchomieniu menu na twojej witrynie będzie ono wyświetlane pionowo lub poziomo (od lewej do prawej), w zależności od wybranego położenia.
Większość motywów ma kilka różnych lokalizacji, w których można umieścić menu. W tym przykładzie używamy motywu Astra, który ma 5 różnych lokalizacji.
Po dodaniu stron do menu, wybierz położenie, w którym chcesz je wyświetlić i kliknij przycisk „Zapisz menu”.
Wskazówka: Jeśli nie jesteś pewien, gdzie znajduje się każda lokalizacja, spróbuj zapisać menu w różnych miejscach, a następnie przejdź na swoją witrynę, aby zobaczyć, jak wygląda. Prawdopodobnie nie będziesz chciał używać wszystkich lokalizacji, ale możesz chcieć użyć więcej niż jednej.
Aby uzyskać więcej informacji na ten temat, warto zapoznać się z naszym poradnikiem na temat tworzenia pionowego menu nawigacyjnego w WordPress.
Oto nasze gotowe menu na witrynie:
Tworzenie menu rozwijanych w WordPress
Menu rozwijane, czasami nazywane menu zagnieżdżonym, to menu nawigacyjne z nadrzędnymi i podrzędnymi pozycjami menu.
Gdy najedziesz kursorem na element nadrzędny, wszystkie elementy podrzędne pojawią się pod nim w podmenu.
Aby utworzyć podmenu, przeciągnij element poniżej elementu nadrzędnego, a następnie przeciągnij go lekko w prawo. Zrobiliśmy to z 3 pozycjami podrzędnymi pod „Usługi” w naszym menu:
Możesz nawet dodać wiele warstw rozwijanych menu, aby twoje podmenu mogło mieć podmenu. Może to jednak wyglądać nieco bałaganiarsko, a wiele motywów nie obsługuje wielowarstwowych menu rozwijanych.
Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym poradnikiem na temat tworzenia rozwijanego menu w WordPress.
Oto podmenu na żywo na naszej witrynie demonstracyjnej:
Dodawanie kategorii do menu WordPress
Jeśli korzystasz z WordPressa do prowadzenia bloga, możesz dodać swoje kategorie blogów jako listę rozwijaną w menu WordPressa.
Robimy to na WPBeginner i mamy wiele kategorii, takich jak wiadomości, motywy, poradniki i inne.
Możesz łatwo dodać kategorie do twojego menu, klikając kartę Kategorie po lewej stronie ekranu menu. Może być również konieczne kliknięcie karty „Zobacz wszystko”, aby zobaczyć wszystkie twoje kategorie.
Po prostu wybierz kategorie, które chcesz dodać do menu, a następnie kliknij przycisk „Dodaj do menu”.
Kategorie pojawią się jako zwykłe pozycje menu w dolnej części twojego menu.
Następnie możesz przeciągnąć i upuścić je na swoje miejsce. Na przykład, umieścimy wszystkie te kategorie pod pozycją menu Blog.
Aby uzyskać dalsze instrukcje, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania tematów w menu nawigacyjnym WordPress.
Oto jak różne kategorie pojawiają się w menu nawigacyjnym na naszej witrynie demonstracyjnej:
Dodawanie własnych odnośników do menu nawigacji WordPressa
Oprócz kategorii i stron, WordPress umożliwia również bardzo łatwe dodawanie własnych odnośników do twojego menu. Możesz ich użyć do umieszczenia odnośników do Twoich profili w mediach społecznościowych, sklepu internetowego i innych witryn internetowych, których jesteś właścicielem.
Aby to zrobić, musisz użyć karty „Własne odnośniki” na ekranie menu. Po prostu dodaj odnośnik wraz z tekstem, którego chcesz użyć w twoim menu i kliknij przycisk „Dodaj do menu”.
Możesz nawet wykazać się kreatywnością i dodać ikonki mediów społecznościowych do twojego menu lub przycisków wezwania do działania, aby uzyskać więcej konwersji.
Edytowanie lub usuwanie pozycji menu w menu nawigacji WordPressa
Gdy dodajesz strony lub kategorie do własnego menu nawigacyjnego, WordPress używa tytułu strony lub nazwy kategorii jako tekstu odnośnika. Możesz to zmienić, jeśli chcesz.
Każdą pozycję menu można edytować, klikając znajdującą się obok niej strzałkę w dół.
W tym miejscu można zmienić nazwę pozycji menu. Możesz również kliknąć „Usuń”, aby całkowicie usuwać odnośnik z twojego menu.
Jeśli masz trudności z interfejsem „przeciągnij i upuść”, możesz również przenieść pozycję menu, klikając odpowiedni odnośnik „Przenieś”.
Dodawanie menu nawigacyjnych w pełnym edytorze witryn (FSE)
Nowy edytor pełnych witryn umożliwia dostosowanie własnych motywów WordPress za pomocą edytora bloków. Został on wydany w WordPress 5.9 i włącza dodawanie różnych bloków do twoich szablonów w celu stworzenia unikatowego projektu.
Aby dodać menu nawigacyjne za pomocą pełnego edytora witryny, przejdź do Wygląd ” Edytor z twojego kokpitu WordPress.
W tym poradniku użyjemy domyślnego motywu Twenty Twenty-Three. Więcej szczegółów można znaleźć w naszym artykule na temat najlepszych motywów WordPress do pełnej edycji witryny.
Po wejściu do edytora kliknij kartę „Nawigacja”, aby ją rozwinąć.
Spowoduje to otwarcie nowych ustawień w lewej kolumnie.
Z tego miejsca wystarczy kliknąć ikonkę „Edytuj” u góry.
Spowoduje to uruchomienie pełnego edytora witryny na twoim ekranie, gdzie możesz kliknąć ikonkę „+”, aby dodać element menu nawigacyjnego.
Zostanie wyświetlony monit, w którym można wybrać opcję z menu rozwijanego.
Jeśli jednak chcesz dodać własny odnośnik, możesz dodać etykietę i adres URL dla elementu menu nawigacji w panelu bloków. Możesz również dodać opcję wyszukiwania do twojego menu.
Po dodaniu elementu należy przejść do karty „Style” w kolumnie po prawej stronie.
Możesz teraz zmienić typografię, wygląd, wysokość, odstępy, wielkość liter i dekorację tekstu dla twoich pozycji menu.
Można również dodać podmenu, klikając jego ikonkę na pasku narzędzi bloku.
Po zakończeniu możesz wyświetlić podgląd zmian, aby zobaczyć, jak menu wygląda w czasie rzeczywistym. Następnie nie zapomnij kliknąć przycisku „Zapisz” u góry.
Dodawanie menu WordPress w panelach bocznych i stopkach
Nie musisz trzymać się tylko miejsc wyświetlania twojego motywu. Możesz dodać menu nawigacyjne w dowolnym obszarze, który wykorzystuje widżety, takie jak twój panel boczny lub stopka.
Po prostu przejdź do Wygląd ” Widżety, a następnie kliknij przycisk „Dodaj blok” (+) u góry i dodaj blok widżetu „Menu nawigacji” do twojego panelu bocznego.
Następnie dodaj tytuł widżetu i wybierz odpowiednie menu z listy rozwijanej „Wybierz menu”.
Po zakończeniu wystarczy kliknąć przycisk „Aktualizuj”.
Oto przykład własnego menu stopki WordPress zbudowanego na witrynie internetowej naszego założyciela, Syeda Balkhi.
Dalsze możliwości menu nawigacji
Jeśli chcesz stworzyć naprawdę epickie menu z mnóstwem odnośników, mamy poradnik, jak stworzyć mega menu w WordPress.
Umożliwia to utworzenie listy rozwijanej z wieloma elementami, w tym obrazkami.
Mega menu to świetna opcja, jeśli masz dużą witrynę, taką jak sklep internetowy lub witryna z wiadomościami. Ten rodzaj menu jest używany przez witryny takie jak Reuters, Buzzfeed, Starbucks itp.
Film instruktażowy
Jeśli wolisz obejrzeć ten poradnik, obejrzyj poniższy film:
Najczęściej zadawane pytania dotyczące menu WordPress
Oto niektóre z najczęstszych pytań zadawanych przez początkujących na temat menu nawigacyjnych WordPress.
1. Jak dodać odnośnik do strony głównej w menu WordPress?
Aby dodać twoją stronę główną do menu nawigacyjnego, musisz kliknąć kartę „Zobacz wszystko” w sekcji Strony. Stamtąd powinieneś zobaczyć swoją stronę główną.
Zaznacz pole obok „Strona główna” i kliknij „Dodaj do menu”. Pamiętaj, aby zapisać swoje zmiany.
2. Jak dodać wiele menu nawigacyjnych w WordPress?
W WordPress można utworzyć dowolną liczbę menu. Aby umieścić menu na twojej witrynie internetowej, musisz dodać je do jednego z położeń menu twojego motywu lub do obszaru widżetu, jak pokazaliśmy powyżej.
Jeśli chcesz dodać wiele menu nawigacyjnych do twojej witryny WordPress, najpierw utwórz menu zgodnie z naszym poradnikiem powyżej.
Aby umieścić je na twojej witrynie, kliknij kartę „Zarządzaj lokalizacjami”.
W tym miejscu możesz wybrać menu, które chcesz wyświetlać w położeniach menu dostępnych w twoim motywie.
Jeśli chcesz dodać nowe położenie menu do twojej witryny, zapoznaj się z naszym poradnikiem na temat dodawania własnych menu nawigacyjnych do motywów WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać menu nawigacyjne w WordPress. Możesz również zapoznać się z naszymi przewodnikami na temat stylizacji menu nawigacji w WordPress i tworzenia przypiętego pływającego menu nawigacji w 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.
Dennis Muthomi
what your thoughts are on having a sticky navigation menu? do recommend having a sticky one or an nonstick one?
WPBeginner Support
It is mostly a question of personal preference. There is not specifically better option between the two. At the moment we use a static menu instead of sticky
Administrator
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.
Administrator
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!
Administrator
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.
Administrator
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
Administrator
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.
Administrator
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/
Administrator
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.
Administrator
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.
Administrator
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.
Administrator
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
Administrator
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
Administrator
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/
Administrator
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
Administrator
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.
Administrator
Keith
Great resources
WPBeginner Support
Thank you
Administrator
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/
Administrator
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.
Administrator
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/
Administrator
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/
Administrator
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!