Menu WordPress - jak stworzyć profesjonalną nawigację
Menu nawigacyjne to kluczowy element każdej strony - prowadzi użytkowników do najważniejszych treści. WordPress ma wbudowany system menu, który jest prosty w obsłudze, ale oferuje też zaawansowane możliwości.
Krótka odpowiedź
Tworzenie podstawowego menu
Krok 1: Nowe menu
- Wygląd → Menu
- Wpisz nazwę menu (np. "Menu główne")
- Kliknij "Utwórz menu"
Krok 2: Dodawanie elementów
- Po lewej: Strony, Wpisy, Własne odnośniki, Kategorie
- Zaznacz elementy do dodania
- Kliknij "Dodaj do menu"
Krok 3: Układanie
- Przeciągaj elementy żeby zmienić kolejność
- Przesuń w prawo żeby utworzyć podmenu (dropdown)
Krok 4: Lokalizacja
- Na dole: "Pozycje menu"
- Zaznacz gdzie ma się wyświetlać (zależy od motywu)
- Primary Menu, Footer Menu, itp.
Krok 5: Zapisz
- Kliknij "Zapisz menu"
Własne odnośniki i opcje zaawansowane
Własne odnośniki:
- URL: dowolny adres (zewnętrzny lub wewnętrzny)
- Tekst odnośnika: co wyświetlić w menu
- Przydatne dla: linków zewnętrznych, kotwic (#sekcja), specjalnych stron
Opcje ekranu (prawy górny róg):
- Włącz: Cel odnośnika (otwórz w nowym oknie)
- Włącz: Klasy CSS (własne style)
- Włącz: Opis (tekst pod linkiem)
Otwieranie w nowym oknie:
- Dodaj element do menu
- Rozwiń → Zaznacz "Otwórz odnośnik w nowej karcie"
Klasy CSS:
- Dodaj własną klasę do elementu
- Stylizuj w CSS motywu
- Np. przycisk CTA w menu
Podmenu (dropdown menu)
Tworzenie podmenu:
- Przeciągnij element pod inny i w prawo
- Wcięcie oznacza poziom zagnieżdżenia
- Można tworzyć wiele poziomów
Przykładowa struktura:
```
- Usługi (główne)
- Strony internetowe (podmenu)
- Sklepy online (podmenu)
- SEO (podmenu)
- O nas
- Kontakt
```
Stylizacja dropdown:
- Zależy od motywu
- Większość motywów obsługuje dropdown
- Customizer lub ustawienia motywu
Problemy z dropdown na mobile:
- Touch vs hover
- Większość motywów obsługuje
- Wtyczka Responsive Menu jeśli nie
Mega Menu - rozbudowana nawigacja
Co to mega menu:
- Duży dropdown z kolumnami
- Obrazki, opisy, ikony
- Popularne w sklepach i portalach
Wtyczka Max Mega Menu (polecana):
- Darmowa wersja wystarczy na start
- Wygląd → Max Mega Menu
- Włącz dla wybranego menu
- Konfiguracja: kliknij "Mega Menu" przy elemencie w edytorze menu
Opcje Max Mega Menu:
- Kolumny i szerokość
- Widżety w menu
- Ikony przy elementach
- Animacje
Alternatywy:
- UberMenu (premium, zaawansowana)
- Jeśli używasz Elementor: Pro ma mega menu builder
- Divi: wbudowane mega menu
Menu mobilne i responsywność
Automatyczna obsługa:
- Większość motywów zamienia menu na "hamburger" na mobile
- Testuj na telefonie/tablet
Problemy z menu mobilnym:
- Za dużo elementów - podziel lub skróć
- Złe zachowanie - sprawdź ustawienia motywu
- Konflikt z wtyczkami - wyłącz wtyczki menu
Wtyczka Responsive Menu:
- Pełna kontrola nad menu mobilnym
- Własne style, animacje
- Przydatna gdy motyw ma słabe menu mobile
Separate mobile menu:
- Niektóre motywy pozwalają na osobne menu dla mobile
- Mniej elementów, ważniejsze na początku
- Ustawienia motywu lub Customizer
Sticky menu:
- Menu przyklejone przy scrollowaniu
- Ustawienia motywu lub wtyczka
- Poprawia UX na długich stronach