Jak dodać menu mobilne w WordPress?

Menu mobilne w WordPressie jest zwykle częścią motywu, a nie osobną funkcją dodawaną przez wtyczkę. Sposób konfiguracji zależy od tego, czy korzystasz z motywu klasycznego, czy blokowego. W pierwszym przypadku użyjesz sekcji „Wygląd → Menu”, a w drugim edytora witryny i bloku „Nawigacja”.

Jak rozpoznać typ motywu?

Motyw klasyczny udostępnia zwykle osobną sekcję „Wygląd → Menu”. To tam tworzysz listę odnośników, ustawiasz jej kolejność i przypisujesz ją do lokalizacji, na przykład menu głównego w nagłówku.

W motywie blokowym, korzystającym z FSE, czyli Full Site Editing, możesz nie widzieć zakładki „Menu”. W takim przypadku przejdź do „Wygląd → Edytor” i odszukaj blok „Nawigacja” w nagłówku. To on odpowiada za linki oraz sposób ich prezentowania na telefonie.

Jak dodać menu mobilne w motywie klasycznym?

W większości motywów klasycznych menu desktopowe po zmniejszeniu szerokości ekranu automatycznie zmienia się w przycisk, często nazywany hamburger menu. Nie tworzysz więc osobnej listy tylko dla telefonu, chyba że motyw wyraźnie przewiduje taką opcję.

Aby skonfigurować menu, wykonaj następujące kroki:

1. Przejdź w panelu WordPressa do „Wygląd → Menu”.
2. Utwórz nowe menu i nadaj mu rozpoznawalną nazwę.
3. Dodaj strony, kategorie lub własne odnośniki, które mają pojawić się w nawigacji.
4. Przeciągnij elementy, aby ustawić ich kolejność. Przesunięcie pozycji w prawo utworzy podmenu.
5. W sekcji lokalizacji zaznacz miejsce używane przez nagłówek, na przykład „Primary Menu” lub „Menu główne”.
6. Zapisz menu i sprawdź jego wygląd w podglądzie mobilnym oraz na prawdziwym telefonie.

Samo zapisanie listy odnośników nie wystarczy. Lokalizacja menu mówi motywowi, gdzie ma wyświetlić daną strukturę. Jeżeli menu nie zostało przypisane do lokalizacji nagłówka, może nie pojawić się ani na komputerze, ani na urządzeniu mobilnym.

Jeśli nie widzisz sekcji „Wygląd → Menu”, prawdopodobnie korzystasz z motywu blokowego. Możliwą przyczyną są też ograniczone uprawnienia konta albo własny kreator dostarczony przez motyw.

Jak skonfigurować menu w motywie blokowym?

W motywie blokowym menu edytujesz bezpośrednio w układzie witryny. Zmiana dotyczy konkretnego bloku „Nawigacja” oraz części szablonu, w której ten blok się znajduje.

Postępuj według tej kolejności:

1. Otwórz „Wygląd → Edytor” i przejdź do widoku wzorców lub części szablonu.
2. Wybierz nagłówek używany przez stronę.
3. Kliknij blok „Nawigacja”.
4. Dodaj strony, własne odnośniki albo elementy podmenu i ustaw ich kolejność.
5. Sprawdź ustawienia bloku, w tym sposób wyświetlania na węższym ekranie.
6. Zapisz zmiany i przetestuj nagłówek na kilku szerokościach oraz na telefonie.

W tym miejscu możesz edytować ręcznie ułożoną listę linków albo automatyczną nawigację, na przykład listę stron. Jeżeli zmiana nie pojawia się na stronie, upewnij się, że pracujesz na właściwym nagłówku i właściwym szablonie. Sklep, strona główna oraz podstrony mogą korzystać z różnych części witryny.

Menu mobilne nie działa – co sprawdzić?

Przed zmianą kodu lub instalacją kolejnych rozszerzeń ustal, skąd pochodzi menu widoczne na stronie. Najczęstsze przyczyny problemów to:

• Brak przypisania menu do lokalizacji używanej przez nagłówek.
• Edycja innego bloku „Nawigacja” albo innej części szablonu niż ta wyświetlana na stronie.
• Nieaktualna pamięć podręczna przeglądarki, wtyczki cache lub systemu optymalizacji.
• Konflikt JavaScriptu, przez który przycisk hamburgera nie otwiera panelu.
• Zbyt długie nazwy i zbyt wiele poziomów podmenu na małym ekranie.
• Zmiana motywu, który korzysta z innych lokalizacji lub innej struktury nagłówka.

Nie instaluj od razu wtyczki typu „Mobile Menu”. Może ona dublować funkcje motywu i powodować konflikty z jego kodem, stylami albo skryptami. Najpierw sprawdź ustawienia motywu, lokalizację menu i konsolę przeglądarki. Jeśli problem dotyczy konfliktu JavaScriptu, testy najlepiej wykonywać na kopii strony, zmieniając jeden czynnik naraz.

Jak sprawdzić dostępność menu mobilnego?

Menu powinno być wygodne nie tylko dla osoby korzystającej z ekranu dotykowego. Dobre praktyki WCAG obejmują także obsługę klawiaturą, widoczny fokus i prawidłowe komunikowanie stanu rozwinięcia podmenu. Samo dodanie atrybutów ARIA nie potwierdza jeszcze dostępności.

Przed publikacją przejdź przez tę listę kontrolną:

• Przycisk otwierający menu ma wystarczająco duży obszar aktywny i łatwo trafić w niego kciukiem.
• Menu otwiera się i zamyka poprawnie na prawdziwym telefonie, a nie tylko w emulatorze przeglądarki.
• Linki i przyciski podmenu są rozróżnialne, a użytkownik wie, czy dotknięcie otworzy stronę, czy rozwinie listę.
• Całą nawigację można przejść klawiszem Tab, a fokus pozostaje widoczny.
• Ukryte podmenu nie trafia przypadkowo do kolejności fokusu.
• Długie etykiety, powiększony tekst i obrót telefonu nie zasłaniają istotnych linków.

W przypadku własnych rozszerzeń przycisk rozwijający podmenu powinien poprawnie informować o stanie, na przykład za pomocą aria-expanded. Zwykła nawigacja witryny nie wymaga automatycznie roli aplikacyjnego menu. Semantyka musi odpowiadać rzeczywistemu zachowaniu elementów.

W WCAG 2.2 kryterium 2.5.8 na poziomie AA wskazuje co do zasady cel o wymiarze 24 × 24 piksele CSS, z określonymi wyjątkami. Często przywoływane 44 × 44 piksele dotyczy kryterium na poziomie AAA. Niezależnie od wymagań sprawdź faktyczny obszar kliknięcia, odstępy między elementami oraz działanie menu bez myszy.

Jeżeli po tych testach menu nadal nie działa, a problem wynika z konfliktu skryptów lub niestandardowego nagłówka, potrzebna może być analiza motywu przez osobę pracującą z WordPressem. Najważniejsze jest jednak ustalenie źródła nawigacji przed wprowadzaniem kolejnych zmian.