Jak zrobić menu w WordPress i dodać różne typy nawigacji do strony internetowej?

Każda strona, nawet typu tzw. one-page, powinna posiadać menu nawigacyjne, które pozwoli użytkownikom poruszać się po poszczególnych sekcjach witryny. W systemie WordPress obsługa menu jest banalnie prosta, jednak dla konkretnych typów, np. rozwijanego menu, warto poznać dobre praktyki i wtyczki. W tym poradniku przygotowałem zestaw wskazówek dla początkujących, dzięki którym utworzysz dowolną nawigację na swojej stronie internetowej.

Czym jest menu nawigacyjne na stronie www?

Menu na stronie internetowej to zestaw linków umieszczony zazwyczaj w górnej części (topbar, header), w panelu bocznym i stopce strony. Oto przykład tzw. menu głównego:

W serwisach umieszcza się też bardziej rozbudowane lub dodatkowe menu w stopce. Oprocz podstron ofertowych, znajdują się tam także odnośniki do informacji, dla których zabrakło miejsca w górnym menu.

Przykład rozbudowanej nawigacji ze strony Empik.com:

Innym rodzajem jest tzw. hamburger menu, które jest najczęściej ukryte pod ikoną i rozwija się po kliknięciu w nią.

Czym większy serwis, tym bardziej rozbudowany pasek nawigacyjny. Dla prostych stron bez problemu zmieścimy w nim linki do najważniejszych dla nas podstron. Jesli jednak nasza struktura kategorii, np. w sklepie internetowym, jest mocno rozbudowana, przydatne jest wówczas tzw. menu rozwijane pionowo lub poziomo.

Menu rozwijane poziomo, np. na Ceneo.pl:

Menu rozwijane pionowo, np. w Amazon.pl:

Odpowiednio skonstruowane menu pozwala nie tylko poprawić doświadczenia użytkowników na stronie (User Experience), ale też pomaga w pozycjonowaniu strony na WordPress.

Jak dodać menu w WordPress?

Aby przejść do edycji menu w systemie WordPress, poszukaj zakładki Wygląd, a następnie wybierz Menu:

Zobaczysz wówczas widok konfiguracji nawigacji na Twojej stronie internetowej:

Pamiętaj, że przed zmianami w witrynie, warto zrobić kopię zapasową WordPressa, by w razie potrzeby przywrócić stronę internetową do poprzedniej wersji.

Aby utworzyć nowe, wpisz jego nazwę, a następnie kliknij przycisk Utwórz menu.

Nowe menu nie będzie wyświetlane, jeśli nie wybierzesz jego lokalizacji. Jak wspominałem wcześniej, może być ono umieszczone u góry strony internetowej, w panelu bocznym, stopce lub innym miejscu, które jest określone w szablonie.

Umiejscowienie nawigacji wybierasz w sekcji Ustawienia menu, np.:

W tym przypadku możesz zaznaczyć, czy dany pasek nawigacyjny ma wyświetlać się u gory strony, czy w stopce.

Powyższe opcje nie są stałe – w zależności od tego, z jakiego motywu korzystasz, możesz mieć do wyboru więcej lub mniej pozycji.

Jak dodać strony i wpisy do menu na WordPress?

Po lewej stronie zauważysz zakładki pozwalające na dodanie wybranych linków do naszego nowego menu. Znajdują się tam opcje dodawania stron, wpisów, kategorii, czy własnych odnośników do nawigacji:

Wybierając właściwe pozycje, możesz je umieścić poprzez kliknięcie przycisku Dodaj do menu. Natychmiast pojawią się one w sekcji po prawej stronie:

Pamiętaj, by zapisywać menu po wszelkich zmianach. W przeciwnym wypadku po wyłączeniu zakładki lub przejściu do innej podstrony, konieczne będzie powtórzenie wszystkich czynności. W trakcie edycji klikaj przycisk Zapisz menu, by nie utracić postępów!

Jak dodać inne linki do menu?

Sekcja Własne odnośniki pozwala na dodanie do nawigacji linków do innych stron. Jesli np. chcesz umieścić tam link do profilu w social mediach, czy jakiekolwiek innej domeny zewnętrznej, wybierz właśnię tę zakładkę:

W miejsce Adres URL wklej odpowiedni link, a w Treść odnośnika dodaj tekst, który ma pojawić się w menu.

Jak zrobić menu rozwijane w WordPress?

Aby zrobić bardziej rozbudowane menu, możesz umieszczać linki na drugim poziomie. Oznacza to, że dany link będzie traktowany jako tzw. submenu, czyli nawigację drugiego poziomu. W ten sposób utworzysz rozwijany pasek nawigacji na swojej stronie:

Edytując menu przeciągnij wybrany element w taki sposób, by ukazało się zagnieżdżone pole:

W zależności od ustawień szablonu, możesz tworzyć więcej poziomów swojego rozwijanego menu:

Po zapisaniu zmian, podejrzyj swoją stronę. Może okazać się, że menu nie funkcjonuje tak, jak chcieliśmy. Powodem może być brak odpowiednich stylów CSS w szablonie. Konieczna będzie wówczas edycja motywu z poziomu kodu źródłowego.

Jak umieścić menu w panelu bocznym WordPress (sidebarze)?

Aby dodać menu w innym miejscu, np. w panelu bocznym na blogu firmowym, musisz przejść do zakładki Wygląd > Widżety.

Tutaj odszukaj sekcję odpowiadającą panelowi bocznemu – może nazywać się np. Sidebar Right (w rożnych motywach WordPress występuja inne nazwy). Nastepnie dodaj nowy blok o nazwie Navigation Menu:

Możesz wybrać teraz odpowiednie menu, które chcesz dodać w tym miejscu. Jeśli w widżetach nie widzisz sekcji odpowiadającej za panel boczny, bardzo prawdopodobne, że nie ma jej zadeklarowanej w Twoim szablonie. Chętnie pomożemy – skontaktuj się z nami, a utworzymy menu wedle Twoich wytycznych.

Jak dodać różne menu na podstronach?

W konkretnych przypadkach może zajść potrzeba wyświetlenia innego menu na różnych typach podstron. Jeśli w danej kategorii, czy we wpisach blogowych chcesz dodać inne linki nawigacyjne niż na stronie głównej, możesz wykorzystać wtyczkę Conditional Menus.

Pozwala ona na dodanie warunków wyświetlania danego menu – ustaw odpowiednie wytyczne, by Twoje menu wyświetlało się tylko na podstronach, które wybraliście.

Jak dodać Mega Menu do swojej strony na WordPress?

Mega menu to rodzaj rozwijanego menu na stronach internetowych, które oferuje bardziej zaawansowane i rozbudowane możliwości niż standardowe menu. Charakteryzuje się tym, że może wyświetlać wiele opcji i zawartości w bardziej kompleksowy sposób.

Oto kilka kluczowych cech mega menu:

1. Duża pojemność – mega menu może pomieścić znacznie więcej elementów niż tradycyjne menu rozwijane. Pozwala to na umieszczenie większej liczby linków, kategorii, podkategorii, a nawet treści multimedialnych.
2. Lepsza organizacja – dzięki większej przestrzeni, mega menu pozwala na bardziej uporządkowane i logiczne grupowanie linków i kategorii, co ułatwia nawigację.
3. Wsparcie dla treści multimedialnych – w mega menu można umieszczać nie tylko tekstowe linki, ale również obrazy, mapy, filmy wideo, czy nawet formularze.
4. Lepsza widoczność – duże, rozwijane panele mega menu sprawiają, że są one bardziej widoczne i przyciągające uwagę użytkownika.
5. Wykorzystanie w dużych witrynach – mega menu jest szczególnie przydatne w dużych witrynach internetowych z wieloma stronami i sekcjami, ponieważ pomaga zorganizować dużą ilość treści w sposób przystępny dla użytkownika.

WordPress oferuje proste narzędzia do konstruowania menu na stronach, a wiele szablonów zawiera już zintegrowane opcje dla tzw. Mega Menu. Niemniej, jeżeli używany przez Ciebie motyw nie dysponuje takimi rozwiązaniami, możesz skorzystać z jednej z wymienionych niżej wtyczek, aby ulepszyć system nawigacji na swojej stronie.

Max Mega Menu – wszechstronna wtyczka do WordPress, która umożliwia łatwą konwersję standardowego menu w mega menu. Oferuje możliwość dodania do menu widżetów WordPress, personalizacji jego wyglądu przez edytor motywu, oraz dostosowania jego funkcjonalności dzięki wbudowanym opcjom konfiguracyjnym.

UberMenu – to wtyczka premium, która zawiera szereg zaawansowanych funkcji umożliwiających stworzenie menu dostosowanego do indywidualnych potrzeb. Jej główne zalety to wsparcie techniczne i obszerna dokumentacja.

ElementsKit – idealna dla stron stworzonych przy użyciu Elementora. Ta wtyczka zapewnia większą elastyczność w konfiguracji nagłówków i menu.

Mega menu jest szczególnie popularne w sklepach opartych o WooCommerce i na dużych stronach korporacyjnych, gdzie łatwa nawigacja i dostęp do wielu sekcji jest kluczowy dla dobrej obsługi użytkownika.