Menu WordPress: jak stworzyć czytelną nawigację

Klasyczny panel znajdziesz zwykle w Wygląd → Menu, jeżeli motyw obsługuje ten sposób nawigacji. Utwórz menu z rozpoznawalną nazwą, dodaj strony, kategorie lub własne odnośniki, a następnie ustaw ich kolejność. Przesunięcie elementu w prawo tworzy pozycję podrzędną. Zapisanie listy nie wystarcza: trzeba jeszcze przypisać ją do lokalizacji udostępnionej przez motyw, na przykład nagłówka lub stopki.

W motywie blokowym zwykle pracujesz w Wygląd → Edytor i wybierasz blok Nawigacja w nagłówku. Sprawdź, czy edytujesz właściwy zestaw linków oraz część szablonu. Dokumentacja bloku Nawigacja opisuje zarządzanie jego elementami i ustawieniami. Dostępne ustawienia zależą od motywu i miejsca użycia bloku. Najpierw sprawdź źródło nawigacji oraz to, czy edytujesz listę linków, nagłówek czy ustawienia konkretnego szablonu strony.

Kreator motywu może mieć własne źródło menu. Jeśli zmiana nie pojawia się na stronie, najpierw porównaj nazwę edytowanej listy z listą używaną w nagłówku. Zapisz też oczekiwany zakres: jeden szablon, wszystkie podstrony czy osobny nagłówek sklepu. Szersze podstawy pracy w edytorze znajdziesz w poradniku Gutenberga.

Zacznij od zadań odwiedzającego: znalezienia usługi, kategorii produktu, informacji o firmie albo kontaktu. Nazwy pozycji powinny wskazywać, co znajduje się po kliknięciu. Jeśli firma ma kilka różnych usług, ogólne Oferta może wymagać dodatkowego poziomu. Z kolei rozpisanie wszystkich podstron w nagłówku szybko utrudnia orientację.

Nie istnieje uniwersalny limit siedmiu elementów, który gwarantuje SEO lub dobrą obsługę. Oceń długość nazw, szerokość nagłówka, liczbę kategorii i znaczenie każdej pozycji. Linki w menu pomagają docierać do ważnych stron, ale liczba elementów sama nie rozstrzyga rankingu. Unikaj sztucznego upychania słów kluczowych w etykietach.

Mega menu ma sens, gdy czytelny podział na grupy ułatwia wybór w dużym katalogu. Najpierw rozrysuj strukturę bez ikon i zdjęć. Jeżeli grupa nie daje się nazwać, problemem może być podział oferty, nie brak bardziej rozbudowanej wtyczki. Przed zakupem rozszerzenia sprawdź bieżące funkcje, zgodność z motywem i działanie na telefonie. W projekcie strony internetowej warto odebrać strukturę nawigacji przed dopracowaniem jej animacji.

Link służy do przejścia pod adres, a przycisk do wykonania działania, na przykład rozwinięcia listy. Jeżeli nazwa kategorii prowadzi na stronę zbiorczą, a obok znajduje się strzałka, oba elementy powinny mieć jasne, oddzielne zadania. Użytkownik telefonu nie powinien zgadywać, czy pierwsze dotknięcie otworzy podmenu, czy od razu opuści stronę.

Dla zwykłej nawigacji witryny odpowiedni bywa wzorzec disclosure: przycisk pokazuje i ukrywa grupę linków, a aria-expanded opisuje aktualny stan. Przykład W3C disclosure navigation wyjaśnia, dlaczego taka nawigacja nie musi używać aplikacyjnej roli menu. Dodanie role=menu lub aria-haspopup=menu bez właściwego modelu klawiatury może wprowadzać błędne oczekiwania czytnika ekranu.

Sprawdź otwarcie przyciskiem Enter i Spacja, przejście Tabem oraz zamknięcie klawiszem Escape, jeśli dany wzorzec je przewiduje. Ukryte linki nie powinny zostawać przypadkowo w kolejności fokusu. Po zamknięciu panelu użytkownik ma wiedzieć, gdzie się znajduje. Przy własnej implementacji samo podpięcie skryptu nie rozwiązuje semantyki; poradnik o hookach WordPressa pomaga uporządkować miejsce kodu, lecz dostępność wymaga osobnego odbioru.

Moment przełączenia menu na przycisk mobilny dobierz do rzeczywistego układu, a nie automatycznie do szerokości 768 px. Długie polskie etykiety, logo i dodatkowy przycisk mogą przestać mieścić się wcześniej. Sprawdź również powiększenie tekstu i zmianę orientacji urządzenia. Menu powinno nadal umożliwiać dotarcie do tych samych istotnych treści.

Osobne menu mobilne oznacza dodatkową listę do utrzymania. Po zmianie oferty łatwo zaktualizować komputer i zapomnieć o telefonie. Jeśli używasz dwóch list, uwzględnij obie w odbiorze publikacji. Nie usuwaj ważnych kategorii tylko dlatego, że na mniejszym ekranie potrzebują kolejnego rozwinięcia.

Przypięty nagłówek może ułatwiać nawigację, ale nie powinien zasłaniać treści ani aktywnego pola. CSS position: sticky pozostaje w normalnym przepływie dokumentu, więc dodawanie padding-top do całej strony nie jest obowiązkowym rozwiązaniem. Position: fixed działa inaczej i może wymagać zarezerwowania miejsca. Sprawdź także przewinięcie do kotwicy, otwartą klawiaturę ekranową i wysoki panel podmenu. Podgląd szerokości w narzędziach przeglądarki uzupełnij próbą na prawdziwym urządzeniu.

W kryterium 2.5.8 WCAG 2.2 na poziomie AA wielkość celu wynosi co do zasady 24×24 piksele CSS, z opisanymi wyjątkami, między innymi dotyczącymi odstępów. W3C wyjaśnia zasady Target Size Minimum. Często spotykane 44×44 piksele dotyczą rozszerzonego kryterium 2.5.5 na poziomie AAA. Większy wygodny obszar może być dobrą decyzją projektową, ale nie należy mylić jej z bezwarunkowym minimum AA.

Oceń faktyczny obszar aktywny, nie tylko rozmiar ikony. Mała strzałka może mieć większy przycisk wokół, a duży napis może być otoczony zbyt bliskimi sąsiednimi celami. Sprawdź zwykły tekst, fokus, stan otwarty i aktywną stronę. Kontrast tekstu zależy również od jego rozmiaru; próg 4,5:1 dla zwykłego tekstu nie jest jedyną regułą dostępności.

Automatyczny skaner pomaga znaleźć część błędów, lecz nie oceni całego doświadczenia. Przejdź menu bez myszy i sprawdź nazwy kontrolek czytnikiem ekranu. Gdy na stronie są różne obszary nawigacji, powinny dać się rozróżnić. W odbiorze wdrożenia WordPress zapisz konkretne problemy i adresy, zamiast uznawać obecność ARIA za końcowy wynik testu.

Po zmianie motywu sprawdź lokalizacje menu i właściwy nagłówek. Nowy motyw może nie korzystać z przypisania poprzedniego. W edytorze blokowym zweryfikuj, czy widzisz ręcznie ułożoną nawigację, czy automatyczny blok listy stron. To może wyjaśnić kolejność inną od zapisanej w klasycznym panelu.

Gdy podmenu nie reaguje, zanotuj urządzenie, przeglądarkę i dokładny element. Sprawdź błędy JavaScript oraz ostatnie zmiany optymalizacji skryptów. Wyłączenie wszystkich wtyczek na działającej stronie może zakłócić inne funkcje; konflikt odtwarzaj na kopii i zmieniaj jeden czynnik naraz. Cache sprawdzaj po potwierdzeniu właściwego źródła menu, nie jako uniwersalne pierwsze lekarstwo.

Po poprawce odbierz nagłówek na różnych szablonach, listę mobilną, stopkę i kluczowe cele linków. Zanotuj, które ustawienie rozwiązało problem. Jeżeli potrzebujesz pomocy, opisz problem KC Mobile wraz z adresem i krokami odtworzenia. Po wdrożeniu możemy uzgodnić małe pakiety godzinowe na zmiany i wsparcie; zakres oraz warunki SLA ustalamy indywidualnie.

Sprawdź także wariant językowy strony, jeśli każda wersja językowa korzysta z osobnego zestawu odnośników.