Nowy serwis bez menu to jak supermarket bez drogowskazów. Gdzie jest kasa? W którym rzędzie jest pieczywo? Odwiedzający wychodzi, bo nie może znaleźć tego, po co przyszedł.

Ta sama historia z WordPress. Standardowa instalacja nie tworzy menu automatycznie, trzeba je zbudować ręcznie. Na szczęście deweloperzy sprawili, że to zadanie jest wizualne: zero kodu, tylko przeciąganie i upuszczanie oraz kilka kliknięć. Menu nawigacyjne składa się ze stron, kategorii i dowolnych odnośników w prostym interfejsie Wygląd → Menu.

Jeśli mają już Państwo treść, ale nie mają nawigacji, tracą Państwo zarówno odwiedzających, jak i pozycje w wyszukiwarce. Przejrzysta struktura menu pomaga Google zrozumieć architekturę serwisu. Poniżej instrukcja krok po kroku, od pierwszego kliknięcia do gotowego menu z podpunktami i umieszczeniem w widgetach.

💡 Szybki przegląd:

• Otwierają Państwo edytor menu: Wygląd → Menu, nadają nazwę i klikają „Utwórz menu"
• Dodają Państwo elementy: strony, kategorie, dowolne odnośniki za pomocą lewego panelu edytora
• Ustalają Państwo kolejność przeciągając i tworzą podmenu przesuwając w prawo
• Konfigurują Państwo lokalizację wyświetlania i zapisują wynik
• W razie potrzeby wyświetlają Państwo menu w sidebarze za pomocą widgetu „Menu niestandardowe"

Możliwości menu zależą od motywu. Niektóre szablony dają jedno miejsce na nawigację, inne cztery-pięć: główne, mobilne, stopka, społecznościowe. Część motywów obsługuje animowane menu i megamenu z obrazkami. Ale podstawowa mechanika, strony, odnośniki, kategorie, jest taka sama dla każdego serwisu na WordPress.

Dalej omówimy szczegółowo każdy krok. Nawet jeśli otworzyli Państwo panel administracyjny po raz pierwszy, do końca poradnika będą Państwo mieć działające menu.

Krok 1: tworzymy pierwsze menu

Proszę wejść do panelu administracyjnego i przejść ścieżką Wygląd → Menu. Na świeżej instalacji WordPress strona będzie prawie pusta: po lewej panel dostępnych elementów, po prawej obszar do tworzenia listy.

Pierwsza czynność, nadać menu nazwę, aby później je rozróżniać, jeśli utworzą Państwo kilka:

• Proszę wpisać zrozumiałą nazwę w polu Nazwa menu, na przykład „Menu główne" lub „Nawigacja główna"

• Proszę kliknąć przycisk Utwórz menu

Prawa część ekranu natychmiast się zmieni: pojawią się bloki „Struktura menu" i „Ustawienia menu". Na razie struktura jest pusta, przechodzimy do wypełniania.

Pięć-sześć menu jednocześnie raczej nie będzie Państwu potrzebne. Ale możliwość utworzenia osobnej nawigacji dla stopki czy wersji mobilnej istnieje, WordPress nie nakłada ograniczeń co do liczby.

Krok 2: dodajemy elementy do menu

Teraz główny punkt uwagi, lewy panel edytora. Zgromadzono tam zakładki z tym, co można wysłać do nawigacji:

• Strony, lista wszystkich opublikowanych stron serwisu
• Wpisy, posty na blogu
• Kategorie, rubryki, według których zgrupowane są wpisy
• Dowolne odnośniki, dowolne adresy URL, w tym do zewnętrznych serwisów

Dla typowego bloga rdzeń menu to strony („O projekcie", „Kontakt", „Usługi") plus kategorie („Aktualności", „Poradniki", „Recenzje"). Kolejność działań:

• Proszę otworzyć odpowiednią zakładkę
• Proszę zaznaczyć ptaszkami strony/kategorie, które mają trafić do menu
• Proszę kliknąć Dodaj do menu
• Proszę powtórzyć dla pozostałych zakładek

Strony i kategorie są pobierane automatycznie, wystarczy postawić ptaszki. Z dowolnym odnośnikiem jest nieco inaczej: potrzebują Państwo pełnego adresu URL (na przykład https://developer.wordpress.org) i etykiety tekstowej, tego, co zobaczy odwiedzający w menu zamiast gołego adresu.

Proszę zwrócić uwagę: kategorie działają jako grupowanie wpisów. Gdy odwiedzający klika pozycję „Poradniki" w menu, trafia na stronę ze wszystkimi postami z tej rubryki. Więcej o logice kategorii w materiale SitePoint.

Krok 3: ustalamy kolejność i tworzymy podmenu

Gdy tylko w prawej kolumnie pojawią się co najmniej dwa elementy, można zmieniać ich kolejność. WordPress daje dwa sposoby.

Przeciąganie. Proszę przytrzymać element lewym przyciskiem myszy i przeciągnąć w górę lub w dół. Pozycje zamieniają się miejscami natychmiast, interfejs działa bez przeładowania.

Za pomocą strzałki. Proszę kliknąć małą strzałkę po prawej stronie nazwy pozycji, rozwinie się karta z opcjami:

• Przenieś w górę / w dół, przesunięcie o jedną pozycję
• Do góry / Na początek, przeniesienie do pierwszego wiersza
• Pod <nadrzędny>, przekształcenie w podpunkt (patrz niżej)
• Z <nadrzędnego>, powrót na górny poziom
• Usuń, czerwony odnośnik na dole karty, usuwa element TYLKO z menu, nie naruszając samej strony ani wpisu

Podmenu tworzy się prostym przesunięciem w prawo. Proszę przytrzymać element, odsunąć nieco w prawo od nadrzędnego, a stanie się podrzędnym. Na stronie taka pozycja rozwinie się po najechaniu na nadrzędną.

Ważne: proszę nie przesadzać z głębokością. Jeden poziom zagnieżdżenia to norma. Dwa to skrajny przypadek dla bardzo rozbudowanych serwisów. Trzy to przesada: odwiedzający się gubi, a na ekranach mobilnych takie menu zamienia się w labirynt.

Ten sam rezultat można uzyskać przez kartę elementu: proszę rozwinąć strzałką, kliknąć Pod <nazwa pozycji nadrzędnej>. Do powrotu proszę użyć Z <nadrzędnego> lub po prostu przeciągnąć w lewo.

Usunięcie elementu z menu nie usuwa strony z serwisu. Dowolny odnośnik przy usunięciu jest tracony bezpowrotnie, jeśli planują go Państwo przywrócić później, proszę zapisać URL osobno.

Krok 4: ustawienia menu przed zapisaniem

Zanim klikną Państwo „Zapisz menu", proszę sprawdzić dwa parametry w dolnej części prawej kolumny.

Automatyczne dodawanie stron najwyższego poziomu. Jeśli włączone, każda nowa strona bez nadrzędnej będzie automatycznie trafiać do tego menu. Na małych serwisach opcja oszczędza czas. Na serwisach z dziesiątkami stron raczej tworzy chaos, proszę trzymać wyłączoną.

Lokalizacja wyświetlania. Tutaj wymienione są miejsca, które motyw zarezerwował pod menu: nawigacja główna, stopka, menu mobilne itd. Proszę zaznaczyć potrzebne ptaszkami, jedno menu można wyświetlić w kilku miejscach jednocześnie.

Gdy struktura i ustawienia są odpowiednie, proszę kliknąć Zapisz menu. Przycisk jest zarówno na górze, jak i na dole edytora, działają tak samo.

Krok 5: rozszerzone możliwości przez „Opcje ekranu"

Na samej górze strony edytora menu znajduje się zakładka Opcje ekranu. Proszę ją rozwinąć, pojawi się lista dodatkowych opcji, domyślnie ukrytych.

Co można włączyć:

• Etykiety i formaty wpisów, jeśli w motywie używany jest mechanizm formatów (aside, gallery, video), można je dodać do menu jako osobne pozycje
• Atrybut docelowy odnośnika, otwieranie pozycji w nowej karcie (target="_blank")
• Klasy CSS, niestandardowe klasy do stylizacji konkretnej pozycji przez CSS
• Relacje odnośników (XFN), mikroformat do określania związku między stronami (rzadko potrzebny, proszę zostawić puste)
• Opis, tekst, który pojawia się po najechaniu na pozycję (zależy od motywu)

W praktyce najbardziej pożądane z tej listy to otwieranie w nowej karcie (dla zewnętrznych odnośników) i klasy CSS (do zadań projektowych). Reszta to niszowe narzędzia, których większość serwisów nie rusza.

Krok 6: wyświetlamy menu w sidebarze przez widgety

Jeśli motyw obsługuje widgety, menu można umieścić nie tylko w nagłówku, ale także w bocznej kolumnie, stopce czy dowolnej innej strefie widgetów.

Algorytm:

• Proszę przejść do Wygląd → Widgety
• Proszę znaleźć na liście dostępnych widgetów Menu niestandardowe
• Proszę przeciągnąć go do odpowiedniego obszaru, na przykład „Panel boczny" lub „Widgety stopki"
• Z rozwijanej listy proszę wybrać wcześniej utworzone menu
• Proszę nadać tytuł (wyświetli się nad menu w sidebarze) i kliknąć Zapisz

Ten sam mechanizm działa zarówno dla starych motywów na „Klasycznych widgetach", jak i dla motywów blokowych opartych na edytorze serwisu, logika jest ta sama, zmienia się tylko interfejs.

⁉️🤔 Często zadawane pytania

Czy można utworzyć dwa różne menu i wyświetlać je w różnych miejscach?

Tak, bez ograniczeń. Proszę utworzyć kilka menu przez Wygląd → Menu i przypisać każdemu własną lokalizację wyświetlania. Jedno menu do nagłówka, drugie do stopki, trzecie do panelu bocznego przez widgety. Liczba miejsc przypisania zależy od motywu: średnio 2-4 pozycje.

Co zrobić, jeśli w motywie jest tylko jedno miejsce na menu?

Proszę wykorzystać widgety. Przez Wygląd → Widgety można umieścić dodatkowe menu w sidebarze lub stopce, nawet jeśli motyw nie rejestruje tam specjalnych pozycji. Albo proszę użyć wtyczki do rozszerzonej nawigacji, na przykład Max Mega Menu dodaje megamenu i dodatkowe miejsca umieszczenia bez edycji kodu.

Jak dodać menu do mobilnej wersji serwisu?

W większości nowoczesnych motywów menu mobilne jest automatycznie budowane z tego samego menu głównego. Po prostu zaznaczają je Państwo na liście lokalizacji, a motyw sam dostosowuje wyświetlanie do ekranów mobilnych (ikona hamburgera, lista rozwijana). Jeśli motyw tego nie robi, proszę szukać w ustawieniach konfiguratora (Wygląd → Dostosuj) sekcji Menus / Mobile Menu.

Czy można dodać do menu koszyk WooCommerce lub przycisk wyszukiwania?

Standardowymi środkami nie. Domyślnie do menu dodaje się tylko strony, kategorie i dowolne odnośniki. Do ikon koszyka, wyszukiwania czy przycisku logowania potrzebna jest albo specjalistyczna wtyczka (na przykład Menu Icons by ThemeIsle), albo motyw z obsługą takich elementów w ustawieniach konfiguratora.

Czy menu znika przy zmianie motywu?

Same menu nie, są one powiązane z serwisem, a nie z motywem. Ale przypisane lokalizacje wyświetlania tak, ponieważ każdy motyw rejestruje swoje pozycje pod własnymi nazwami. Po zmianie motywu proszę wejść do edytora menu i ponownie przypisać lokalizacje w bloku „Ustawienia menu".

Podsumowując: zbudowaliśmy nawigację w sześciu krokach

Stworzenie pierwszego menu zajmuje trzy minuty, jeśli wie się, gdzie kliknąć. W praktyce schemat jest taki: nadali Państwo nazwę → dodali 4-5 kluczowych stron i parę kategorii → ustalili kolejność → zapisali. To wszystko. Dalej można dopracowywać: podmenu do strukturyzacji, dodatkowe miejsca przez widgety, klasy CSS do precyzyjnej stylizacji.

Główna zasada: proszę robić menu dla odwiedzającego, a nie dla ozdoby. Trzy-cztery zrozumiałe pozycje są lepsze niż dziesięć drobnych, w których nikt się nie orientuje. Jeśli stronę trudno znaleźć w dwa kliknięcia z menu, najprawdopodobniej z nawigacją jest coś nie tak.

Proszę sprawdzić, jak menu wygląda na telefonie, jedna trzecia ruchu serwisów WordPress pochodzi z urządzeń mobilnych. Źle sformatowane podmenu na smartfonie niweczy całą korzyść z nawigacji.