Menu pionowe w WordPressie pomaga uporządkować rozbudowaną nawigację, gdy poziomy pasek nie mieści już wszystkich kategorii, stron lub produktów. Możesz zbudować je za pomocą natywnych widżetów, kreatora stron takiego jak Elementor albo dedykowanej wtyczki do menu. Wybór zależy od tego, czy potrzebujesz prostej listy linków, menu zwijanego czy rozbudowanego Mega Menu.
Dlaczego warto wybrać menu pionowe?
Menu pionowe, nazywane też side menu, układa odnośniki w jednej kolumnie, zwykle w panelu bocznym strony. W przeciwieństwie do menu poziomego nie wymaga zmniejszania tekstu ani zawijania wielu pozycji do kolejnego wiersza. Dzięki temu użytkownik może szybciej przeskanować listę i łatwiej przejść do wybranej kategorii.
Taki układ dobrze sprawdza się w sklepach internetowych, portalach z rozbudowaną strukturą oraz stronach, na których trzeba wyświetlić wiele kategorii. Na mniejszych ekranach menu może zostać zwinięte pod przyciskiem typu „Wszystkie kategorie”, dzięki czemu nie zajmuje całej wysokości strony.
Jak wybrać metodę dla swojej strony?
Nie każdy motyw WordPressa ma gotowy sidebar lub obsługę bocznego menu. W takim przypadku potrzebujesz widżetu oferowanego przez motyw, kreatora stron albo osobnej wtyczki. Prosty widżet Menu WordPressa wyświetla zwykle listę wcześniej utworzonych odnośników. Dedykowana wtyczka może natomiast dodać akordeon, przełącznik, animacje lub Mega Menu z wieloma kolumnami.
Poszczególne podejścia różnią się zakresem konfiguracji i wymaganiami:
| Metoda | Elastyczność | Wymagania | Zastosowanie |
|---|---|---|---|
| Natywny widżet | Podstawowa | Motyw z obsługą panelu bocznego lub widżetów | Prosta lista stron, kategorii lub produktów |
| Page Builder, na przykład Elementor | Duża | Kreator stron i często dodatkowa wtyczka z widżetem menu | Indywidualny wygląd, różne układy i kontrola nad responsywnością |
| Dedykowana wtyczka menu | Duża lub bardzo duża | Instalacja i konfiguracja dodatkowego rozszerzenia | Menu zwijane, akordeony, Mega Menu i rozbudowane sklepy |
Natywny widżet będzie wystarczający, gdy potrzebujesz kilku poziomów nawigacji bez nietypowego wyglądu. To najmniej złożone rozwiązanie i zwykle nie zwiększa liczby instalowanych rozszerzeń. Jego możliwości zależą jednak od motywu.
Elementor daje większą kontrolę nad szerokością panelu, odstępami, kolorami i zachowaniem menu na tabletach oraz telefonach. Sam kreator nie zawsze zapewnia zaawansowane menu pionowe, dlatego można połączyć go z rozszerzeniem takim jak ElementsKit i jego widżetem Vertical Menu. Taki zestaw pozwala wybrać utworzone menu, dodać przycisk przełączający i ustawić sposób otwierania podmenu.
Dedykowana wtyczka jest właściwym kierunkiem, gdy zwykła lista nie wystarcza. W przypadku sklepu z licznymi kategoriami przydatne może być Mega Menu, czyli rozwijany panel prezentujący grupy podkategorii, dodatkowe linki, a czasem także elementy wizualne. Trzeba jednak sprawdzić zgodność rozszerzenia z motywem i liczyć się z dodatkowym obciążeniem strony.
Jak wdrożyć menu pionowe w WordPressie?
Ogólny proces wygląda podobnie niezależnie od wybranej wtyczki. Różnice pojawiają się dopiero przy stylizacji i konfiguracji funkcji dodatkowych:
- Utwórz strukturę menu – w panelu WordPressa przejdź do „Wygląd” i „Menu”, utwórz nowe menu, dodaj strony, kategorie lub własne odnośniki, a następnie ustaw hierarchię pozycji.
- Wybierz miejsce wyświetlania – przypisz menu do obszaru widżetów, takiego jak sidebar, albo umieść je w szablonie strony przygotowanym w kreatorze.
- Dodaj widżet lub shortcode wtyczki – w przypadku dedykowanego rozszerzenia użyj jego widżetu, bloku lub shortcode’u i wskaż wcześniej utworzone menu.
- Skonfiguruj wygląd i zachowanie – ustaw szerokość, kolory, odstępy, strzałki podmenu oraz sposób otwierania elementów. Dla długich list włącz tryb akordeonu lub przycisk Toggle.
- Sprawdź stronę przed publikacją – przetestuj linki, poziomy zagnieżdżenia oraz działanie menu na komputerze, tablecie i telefonie.
Jeżeli używasz Elementora i ElementsKit, najpierw tworzysz menu w ustawieniach WordPressa, następnie włączasz widżet Vertical Menu w ustawieniach ElementsKit, a na końcu przeciągasz go na stronę w Elementorze. Moduł Mega Menu można traktować jako osobne rozszerzenie dla pozycji wymagających rozbudowanego panelu rozwijanego.
Na co zwrócić uwagę podczas projektowania?
Sama obecność side menu nie gwarantuje dobrej nawigacji. Układ powinien pomagać w odnalezieniu treści, a nie prezentować wszystkie możliwe odnośniki naraz. Szczególnie ważne jest zachowanie czytelnej hierarchii i dostosowanie menu do szerokości ekranu.
Podczas konfiguracji sprawdź następujące zasady:
- Responsywność – na telefonie menu powinno się zwijać, ukrywać pod przyciskiem albo przechodzić do układu łatwego do obsługi dotykiem.
- Krótki opis pozycji – krótkie etykiety ograniczają zawijanie tekstu w wąskim sidebarze.
- Logiczne grupowanie – najważniejsze kategorie umieść na pierwszym poziomie, a szczegółowe elementy przenieś do podmenu.
- Przycisk Toggle przy długich listach – użytkownik może otworzyć menu dopiero wtedy, gdy go potrzebuje.
- Testy na różnych rozdzielczościach – sprawdź, czy podmenu nie wychodzi poza ekran i czy każdy element można wygodnie kliknąć.
Dla prostej witryny najczęściej wystarczy natywny widżet menu w sidebarze. Elementor z dodatkowym widżetem sprawdzi się wtedy, gdy liczy się kontrola nad wyglądem, a dedykowana wtyczka będzie lepszym wyborem przy akordeonach, menu zwijanym lub strukturze Mega Menu. Jeśli motyw nie udostępnia panelu bocznego, a potrzebne są modyfikacje wykraczające poza opcje wtyczki, konfigurację warto przekazać osobie znającej CSS lub PHP.
