Menu i nawigacja

Moduł 4: Tworzenie treści · Czas czytania: 7 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili stworzyć przejrzyste menu, zarówno w motywie blokowym, jak i w motywie klasycznym, oraz wiedzieć, co składa się na dobre menu.

Kluczowe pojęcia: blok nawigacji, Edytor witryny, Wygląd > Menu, lokalizacja menu, podmenu, link niestandardowy, menu mobilne, menu w stopce, tekst linku, dostępność

Dwa sposoby, w zależności od motywu

Miejsce, w którym tworzą Państwo menu, zależy od motywu (lekcja 5.1):

• Motyw blokowy: menu jest blokiem nawigacji w nagłówku witryny. Edytują je Państwo w Edytorze witryny (Wygląd > Edytor > Nawigacja, lub w części szablonu Nagłówek).
• Motyw klasyczny: menu tworzą Państwo w Wygląd > Menu i wybierają tam lokalizację menu oferowaną przez motyw, taką jak „Główne menu” lub „Stopka”.

Jeśli w Wyglądzie nie widzą Państwo opcji Menu, a tylko Edytor? Oznacza to, że używają Państwo motywu blokowego. To częste źródło nieporozumienia po zmianie motywu: „moje menu zniknęło”. Stare menu nadal istnieje (znajduje się w bazie danych jako lista elementów menu), ale nowy motyw szuka go w innym miejscu. W Edytorze witryny można w bloku nawigacji zaimportować istniejące menu klasyczne.

Co można w nim umieścić

Element menu może być:

• stroną (WordPress) lub wpisem z Państwa witryny;
• kategorią (wtedy prowadzi do archiwum tej kategorii);
• linkiem niestandardowym: dowolnym adresem, również do innej witryny, lub kotwicą w obrębie strony (/diensten/#prijzen);
• w motywie blokowym również innymi blokami w nawigacji, takimi jak pole wyszukiwania, ikony mediów społecznościowych lub przycisk „Umów wizytę”.

Elementy menu można przesuwać pod siebie jako podmenu: w motywie klasycznym przez przeciągnięcie ich nieco w prawo, w bloku nawigacji za pomocą opcji „Dodaj podmenu” lub przeciągając element na inny.

Element menu prowadzi do strony, ale ma własną etykietę. Jeśli później zmienią Państwo tytuł strony, etykieta w menu nie zmieni się automatycznie (w menu klasycznym nigdy, w bloku nawigacji zależy to od sposobu dodania elementu). Po zmianie tytułu warto więc sprawdzić też menu.

Dobre menu

Menu nie jest spisem treści całej witryny. To drogowskaz do kilku miejsc, do których chce trafić większość odwiedzających. Kilka wskazówek:

• Niewiele elementów głównych: od pięciu do siedmiu. Więcej i tak nie zmieści się na telefonie, a odwiedzający tego nie czytają.
• Maksymalnie jedna warstwa podmenu. Podmenu w podmenu jest trudne w obsłudze na telefonie i mylące dla czytników ekranu.
• Nagłówek podmenu jest też linkiem. W wielu motywach kliknięcie „Usługi” otwiera podmenu, ale samo „Usługi” jest też stroną. Proszę zadbać o to, by ta strona istniała i pokazywała coś sensownego, albo by było jasne, że element jest tylko nagłówkiem.
• Zwykłe słowa, których użyliby odwiedzający: „Cennik”, a nie „Nasze możliwości inwestycyjne”.
• Kontakt i najważniejsza akcja (umówienie wizyty, zamówienie) zawsze dostępne, często po prawej stronie menu lub jako przycisk.
• Linki prawne (polityka prywatności, regulamin, ustawienia cookie) należą do menu w stopce, a nie do menu głównego. Powinny jednak zawsze być dostępne, na każdej stronie (lekcja 9.3).

Mobilność i dostępność

Na telefonie menu zwykle zwija się do przycisku z trzema kreskami („menu hamburgerowe”). W bloku nawigacji ustawiają Państwo, kiedy to się dzieje (zawsze, czy tylko na małych ekranach). Proszę zawsze to przetestować na prawdziwym telefonie:

• Czy mogą Państwo dotknąć każdego elementu kciukiem, nie dotykając przypadkowo sąsiedniego?
• Czy podmenu otwierają się stuknięciem i ponownie się zamykają?
• Czy menu zamyka się po wybraniu elementu?

W kwestii dostępności (odwiedzający korzystający z czytnika ekranu lub tylko z klawiatury) proszę zwrócić uwagę na:

• Jasne teksty linków. „Dowiedz się więcej” lub „Kliknij tutaj” nic nie mówi, gdy czytnik ekranu odczytuje wszystkie linki po kolei. „Dowiedz się więcej o naszych godzinach otwarcia” już tak.
• Obsługę klawiaturą: tabulatorem po menu, Enterem otwieranie elementu. Większość motywów i blok nawigacji robi to dobrze; samodzielnie napisane menu ze skryptami często nie.
• Link do innej witryny najlepiej otwiera się w tym samym oknie. Jeśli musi otworzyć się w nowym oknie, proszę to wyraźnie zaznaczyć.

Inna nawigacja

Oprócz menu głównego odwiedzającym pomagają znaleźć drogę te elementy:

• pole wyszukiwania (blok wyszukiwania), zwłaszcza w witrynie z wieloma wpisami;
• okruszki (breadcrumbs) („Strona główna > Usługi > Projektowanie stron”), często dostarczane przez wtyczkę SEO lub motyw;
• linki wewnętrzne w tekstach do innych stron (dobre też dla widoczności w wyszukiwarkach, lekcja 9.2);
• strona 404, która pomaga: z polem wyszukiwania i linkami do najważniejszych stron zamiast samego „nie znaleziono”. W motywie blokowym edytują ją Państwo jako szablon „404” w Edytorze witryny.

W praktyce: tak to wygląda w panelu

W panelu administracyjnym WordPress:

• Motyw blokowy: Wygląd > Edytor > Nawigacja. Proszę wybrać menu, dodać elementy znakiem plus, przeciągnąć je w odpowiedniej kolejności i w ustawieniach bloku nawigacji wybrać, kiedy pojawia się menu mobilne.
• Motyw klasyczny: Wygląd > Menu. Proszę utworzyć menu, zaznaczyć po lewej stronie strony i kliknąć Dodaj do menu, przeciągnąć kolejność i na dole zaznaczyć lokalizację menu. Zapisać.

Podsumowanie

• W motywie blokowym menu tworzą Państwo za pomocą bloku nawigacji w Edytorze witryny; w motywie klasycznym w Wygląd > Menu z lokalizacją menu.
• Menu wskazuje drogę do kilku ważnych miejsc: niewiele elementów, maksymalnie jedna warstwa podmenu.
• Linki prawne należą do menu w stopce, zawsze dostępnego.
• Proszę przetestować menu mobilne na prawdziwym telefonie i używać tekstów linków, które mówią coś same w sobie.
• Pole wyszukiwania, linki wewnętrzne i pomocna strona 404 uzupełniają menu.

Quiz

Zadanie

Zadanie D4.3: Menu, które działa. Proszę stworzyć (lub ulepszyć) menu główne swojej witryny z maksymalnie siedmioma elementami głównymi, jednym podmenu i jednym linkiem niestandardowym, oraz menu w stopce z polityką prywatności. Proszę przetestować menu mobilne na telefonie i samą klawiaturą (Tab i Enter). Proszę zaznaczyć, co działa, i zanotować: jaki rodzaj motywu Państwo mają (blokowy czy klasyczny), gdzie utworzyli Państwo menu oraz który tekst linku poprawili Państwo i w jaki sposób?

Więcej informacji

Do pracy w samym WordPressie nie mamy jeszcze własnych artykułów; oficjalna dokumentacja WordPress jest obszerna.

• Blok nawigacji (wordpress.org, w języku angielskim): https://wordpress.org/documentation/article/navigation-block/
• Menu w motywach klasycznych (wordpress.org, w języku angielskim): https://wordpress.org/documentation/article/appearance-menus-screen/
• Edytor witryny (wordpress.org, w języku angielskim): https://wordpress.org/documentation/article/site-editor/