Menu, szkielet witryny. Odwiedzający skanuje go w kilka sekund: jeśli nie wiadomo, gdzie kliknąć, odchodzi. Podstawowy kreator WordPress w „Wygląd → Menu" składa nawigację w minutę, ale wygląda ona jak goły ciąg tekstu. Żadnych ikon, żadnego przyklejania podczas przewijania, żadnej normalnej wersji mobilnej.

Problem jest głębszy, niż się wydaje: standardowa funkcjonalność wystarcza na pierwsze dni po uruchomieniu, a potem potrzebne są rzeczy, których w rdzeniu po prostu nie ma. Ikony przy pozycjach, przycisk logowania bezpośrednio w nawigacji, shortcode do wstawiania menu w treść wpisu, inteligentny panel mobilny, to wszystko wymaga albo kodu, albo wtyczki.

Tutaj zebrano obie ścieżki: proste usprawnienia przez functions.php i style.css oraz najlepsze aktywne wtyczki do zaawansowanych menu. Materiał działa na klasycznych motywach, blokowych i w połączeniu z dowolnym popularnym builderem.

💡 Szybki przegląd:

• Zainstaluj wtyczkę Menu Icons i dodaj ikony do pozycji menu w pięć minut bez kodu
• Wstaw funkcję wp_loginout do functions.php, a przycisk logowania pojawi się bezpośrednio w nawigacji
• Zarejestruj shortcode menu i wyświetlaj gotowe menu w dowolnym miejscu witryny
• Przyklej menu podczas przewijania trzema linijkami CSS lub za pomocą jednej z trzech wtyczek
• Wybierz zaawansowany kreator z trzech opcji: UberMenu, Max Mega Menu lub QuadMenu
• Skonfiguruj nawigację mobilną przez WP Mobile Menu lub Mobi z interfejsem dotykowym

1. Ikony pozycji menu przez Menu Icons

Szybki sposób na ożywienie nawigacji: dodać ikony obok nazw sekcji. Oko „chwyta" znaczek szybciej niż tekst, a po kilku wizytach ikona zapamiętuje się mocniej niż jakakolwiek etykieta.

Zadanie realizuje darmowe Menu Icons od zespołu ThemeIsle, 400 000+ aktywnych instalacji na WordPress.org, ocena 4,4. Kod nie jest potrzebny.

Kolejność działań:

• Zainstaluj wtyczkę przez „Wtyczki → Dodaj nową", wpisz „Menu Icons"
• Aktywuj i przejdź do „Wygląd → Menu"
• Rozwiń dowolną pozycję, pojawi się blok wyboru ikony
• Wybierz znaczek z Dashicons (wbudowanych w WordPress), Font Awesome lub prześlij własny
• Skonfiguruj położenie i rozmiar, zapisz

Pod maską wtyczka dodaje klasę CSS z ikoną do elementu <li>, czyste rozwiązanie, bez konfliktów z motywami. Obsługuje Dashicons, Font Awesome, Elusive Icons i Genericons. Działa z każdym menu zarejestrowanym przez standardowe wp_nav_menu.

🔗 Menu Icons na WordPress.org

2. Przycisk logowania i wylogowania bezpośrednio w menu

Jeśli na stronie jest rejestracja, użytkownik potrzebuje szybkiego logowania bez szukania strony /wp-login.php. Odnośnik „Zaloguj się" lub „Wyloguj się" wisi bezpośrednio w głównym menu i automatycznie zmienia się w zależności od statusu.

Rozwiązuje się to jedną funkcją w functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Fragment zaczepia się o hak wp_nav_menu_items i dodaje <li> z odnośnikiem na końcu dowolnego menu. Funkcja wp_loginout() sama określa status: użytkownik wylogowany, pokazuje „Zaloguj się", zalogowany, „Wyloguj się" z przekierowaniem na tę samą stronę.

Po zapisaniu pliku przeładuj witrynę i sprawdź oba stany. Jeśli potrzebujesz przekierować użytkownika na konkretną stronę po zalogowaniu, zamień pierwszy argument wp_loginout() z 'index.php' na żądany URL.

3. Shortcode do wyświetlania menu w dowolnym miejscu

WordPress pozwala przypisać menu do obszaru nagłówka, stopki lub paska bocznego, dokładnie tam, gdzie motyw wyznaczył miejsce. Ale co, jeśli menu jest potrzebne wewnątrz wpisu, na landingu lub w widżecie tekstowym?

Odpowiedź: zarejestrować własny shortcode:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Dodaj kod do functions.php, zapisz, a w dowolnym miejscu witryny wpisz:

[menu name="главное-меню"]

Nazwę weź z „Wygląd → Menu", jest podana nad listą pozycji. Shortcode wywołuje standardowe wp_nav_menu() z wyciszonym wyjściem ('echo' => false) i zwraca gotowy znacznik HTML.

W ten sposób można trzymać ogólną nawigację w stopce, dodatkową, w panelu bocznym konkretnego wpisu, a dla landingu zbudować osobne menu całkowicie bez powiązania z motywem.

4. Pole wyszukiwania w pasku nawigacji

Standardowy widżet wyszukiwania WordPress znajduje się w pasku bocznym. Ale jeśli paska bocznego nie ma lub zjechał na dół w wersji mobilnej, odwiedzający po prostu nie znajdzie wyszukiwania. Przenieśmy je bezpośrednio do menu.

Wersja podstawowa, ta sama technika z filtrem wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

Funkcja get_search_form(false) zwraca HTML formularza wyszukiwania bez wyświetlania na ekranie. Pole przylgnie do ostatniej pozycji menu, najprawdopodobniej potrzebne będzie pozycjonowanie. Dodaj klasę CSS do <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

A w style.css motywu proszę dopisać odstępy:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Trzy linijki PHP i kilka linijek CSS. Efekt: pole wyszukiwania zawsze przed oczami, na każdym ekranie.

5. Przyklejone menu podczas przewijania

Sticky menu to sytuacja, gdy pasek nawigacji przykleja się do górnej krawędzi ekranu i jedzie razem z użytkownikiem w dół strony. Wygodne na landing page'ach, długich artykułach i w sklepach: nie trzeba przewijać z powrotem, aby przejść do innej sekcji.

Sposób 1: CSS (bezpłatnie, bez wtyczek)

Proszę znaleźć selektor głównego menu w swoim motywie, zazwyczaj .nav-menu, .genesis-nav-menu lub .main-navigation. Proszę dopisać w style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

Kluczowa linijka to position: fixed. Wyrywa ona blok z normalnego przepływu i unieruchamia go względem okna przeglądarki. top: 0; right: 0; left: 0 rozciągają menu na całą szerokość. Proszę odsunąć treść marginesem od góry, aby menu nie zasłoniło nagłówka.

Minus metody CSS jest jeden: po przyklejeniu menu znika z przepływu, a treść „podskakuje" do góry. Rozwiązuje się to przez dodanie do body padding-top równego wysokości menu.

Sposób 2: wtyczki (dokładniejsza kontrola, bez kodu)

Jeśli nie chcą Państwo zaglądać do plików motywu, oto trzy sprawdzone narzędzia.

myStickymenu, bezpłatna wtyczka z ponad 200 000 aktywnych instalacji na WordPress.org i oceną 4,6. Zaczepia się o klasę CSS nawigacji Państwa motywu, wystarczy podać ją w ustawieniach. Responsywna: na urządzeniach mobilnych efekt sticky wyłącza się automatycznie. Ma pole na własne style CSS i tryb „przyklejania" z opóźnieniem liczonym w pikselach przewijania.

Sticky Menu (or Anything!) On Scroll, kolejna bezpłatna opcja, która potrafi „przykleić" dosłownie dowolny element po selektorze CSS: nie tylko menu, ale też logo, cały nagłówek, przycisk. Będzie wymagać podstawowej znajomości HTML i CSS, aby znaleźć właściwy selektor, ale daje pełną swobodę.

UberMenu Sticky Extension, dodatek do wtyczki UberMenu za 8 USD. Jeśli UberMenu jest już zainstalowane, rozszerzenie dodaje tryb sticky jednym przełącznikiem. Na urządzeniach mobilnych automatycznie się wyłącza, aby nie zasłaniać ekranu.

6. Usuwanie pozycji menu z panelu administracyjnego WordPress

Kiedy przekazują Państwo stronę klientowi lub dają dostęp autorom, standardowy panel administracyjny jest zbyt „bogaty": ponad 10 sekcji, z których wiele jest użytkownikowi niepotrzebnych, a nawet niebezpiecznych. Wtyczki i ustawienia motywów powinny pozostać dostępne tylko dla administratora.

Poniższy kod usuwa wszystkie sekcje najwyższego poziomu dla wszystkich użytkowników oprócz administratorów:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Fragment należy umieścić w functions.php. Sprawdzenie !current_user_can('manage_options') odcina administratorów, oni widzą wszystko. Dla pozostałych ról lista jest przycinana do tego, co Państwo pozostawią.

Proszę usuwać tylko te linijki remove_menu_page, które są potrzebne. Na przykład dla redaktora można zostawić „Wpisy", „Media" i „Strony", a całą resztę usunąć. Ważny niuans: funkcja ukrywa pozycje w menu, ale nie blokuje bezpośredniego dostępu przez URL. Aby całkowicie zamknąć strony, proszę skonfigurować uprawnienia (capabilities) w roli użytkownika.

7. Zaawansowane wtyczki do tworzenia menu

Gdy standardowy edytor nie wystarcza, potrzebne są megamenu z obrazami, zakładkami, formularzami i elementami dynamicznymi. Trzy aktywnie rozwijane wtyczki do różnych zadań i budżetów.

7.1 UberMenu, najbardziej funkcjonalny kreator

Weteran rynku z ponad 43 000 sprzedaży na CodeCanyon. Tworzy responsywne megamenu z obsługą dotyku. Wewnątrz można umieścić obrazy, wideo, mapy i gotowy formularz kontaktowy w podmenu. Ponad 50 ustawień stylu z podglądem na żywo, automatyczne generowanie podmenu z treści oraz zakładki pod pozycjami. Integruje się z WooCommerce: potrafi dynamicznie pobierać kategorie produktów.

Cena: od 26 USD. 🔗 UberMenu na CodeCanyon

7.2 Max Mega Menu, darmowy lider

Najpopularniejsza darmowa wtyczka megamenu na WordPress.org: ponad 400 000 aktywnych instalacji i ocena 4,8. Buduje megamenu metodą przeciągnij i upuść w standardowym ekranie „Wygląd → Menu", bez osobnego interfejsu. Obsługuje siatkę kolumn, widżety wewnątrz podmenu, ikony oraz tryb off-canvas na urządzenia mobilne. Skrypt frontendowy waży mniej niż 2 KB po kompresji gzip, nie wpływa na szybkość strony.

• Zalety: wbudowany w natywny interfejs menu WordPress, minimalna waga skryptu, widżety wewnątrz podmenu, darmowa wersja pokrywa 90% zadań
• Wady: część zaawansowanych stylów i menu z zakładkami tylko w Pro (29 USD rocznie)
• Cena: Free / Pro od 29 USD rocznie
• Pobierz: 🔗 Max Mega Menu na WordPress.org

7.3 QuadMenu, zakładki, karuzele i pełna personalizacja

QuadMenu przekształca standardowe menu w megamenu z zakładkami i karuzelami, ma więcej funkcji niż Max Mega Menu, ale próg wejścia jest nieco wyższy. Obsługuje układy pionowe i poziome, integrację z Elementorem i Beaver Builderem, Google Fonts oraz ponad 2000 ikon Font Awesome. Ciemny i jasny motyw od razu po instalacji, responsywna wersja mobilna z panelem off-canvas.

• Zalety: zakładki i karuzele wewnątrz menu, głęboka integracja z kreatorami stron, przyjazna dla programistów (haki i filtry)
• Wady: trudniejsza w początkowej konfiguracji niż Max Mega Menu, część funkcji tylko w wersji płatnej
• Cena: Free / Premium od 15 USD rocznie
• Pobierz: 🔗 QuadMenu na WordPress.org

8. Menu mobilne na smartfony i tablety

Ruch mobilny dawno prześcignął desktop. Jeśli na telefonie menu zamienia się w nieczytelny arkusz, odwiedzający wychodzi. Responsywny motyw skaluje menu desktopowe do wąskiego ekranu, ale struktura pozostaje ta sama: pięć, sześć pozycji w rzędzie staje się długą pionową listą. Specjalistyczna wtyczka daje przycisk hamburgera, gesty przesuwania i dotykową optymalizację.

8.1 WP Mobile Menu, szybki off-canvas dla każdej strony

Najpopularniejsza bezpłatna wtyczka mobilnego menu na WordPress.org: 80 000+ aktywnych instalacji i ocena 4,7. Dodaje panel off-canvas, który wysuwa się po kliknięciu przycisku hamburger. Obsługuje trzy poziomy zagnieżdżenia, wyszukiwanie wewnątrz menu mobilnego, ikony i ustawienia kolorów. Oddzielnie konfiguruje się zachowanie dla różnych rozdzielczości ekranu.

• Plusy: minimalna konfiguracja (działa od razu po aktywacji), adaptive (pokazuje się tylko na urządzeniach mobilnych), nie koliduje z motywami
• Minusy: część zaawansowanych stylów i integracja z WooCommerce w wersji Pro (19 USD rocznie)
• Cena: Free / Pro od 19 USD rocznie
• Pobierz: 🔗 WP Mobile Menu na WordPress.org

8.2 Mobi, kreator menu mobilnego typu drag-and-drop

Intuicyjny kreator menu metodą przeciągnij i upuść. Menu umieszcza się na górze lub na dole ekranu. Wbudowanych jest ponad 700 ikon, dowolna liczba ikon mediów społecznościowych na panelu, czcionki Google do stylizacji. Można osobno zarządzać widocznością menu dla gości i zalogowanych użytkowników. Dobrze pasuje do stron, gdzie menu mobilne ma wyglądać jak samodzielny interfejs, a nie jak pomniejszona kopia wersji desktopowej.

Cena: od 16 USD. 🔗 Mobi na CodeCanyon

⁉️🤔 Często zadawane pytania

Czy można zrobić menu całkowicie bez wtyczek, wyłącznie kodem?

Tak, wszystkie opisane techniki, ikony, efekt sticky, shortcode, przycisk logowania można zrealizować przez functions.php i style.css bez instalowania narzędzi innych firm. Wtyczki po prostu oszczędzają czas i dają interfejs graficzny tym, którzy nie chcą zaglądać do kodu. Jeśli pewnie pracuje Pan/Pani z PHP i CSS, wtyczki nie są obowiązkowe. Ale gdy potrzebne są megamenu lub panel off-canvas z animacjami, gotowa wtyczka oszczędza godziny ręcznego kodowania.

Którą wtyczkę wybrać do sklepu internetowego na WooCommerce?

Dla sklepu kluczowe jest megamenu z kategoriami produktów, obrazkami i filtrami. Tutaj najlepiej sprawdza się UberMenu: dynamicznie pobiera kategorie WooCommerce i buduje podmenu w locie. Bezpłatną alternatywą jest Max Mega Menu z widżetami wewnątrz podmenu: obrazki kategorii są pobierane standardowym widżetem WooCommerce, a wyszukiwanie, osobnym wierszem.

Co zrobić, jeśli po dodaniu kodu do functions.php strona przestała się otwierać?

Należy przywrócić oryginalny plik przez FTP lub menedżer plików hostingu. Przed każdą edycją functions.php trzeba robić kopię zapasową. Alternatywną bezpieczną ścieżką jest wtyczka Code Snippets: pozwala dodawać fragmenty PHP przez panel administracyjny i automatycznie wyłącza kod w przypadku błędu krytycznego, przywracając stronę do działania.

Czy trzeba aktualizować menu po zmianie motywu WordPress?

Menu jest powiązane z obszarem wyświetlania (location), który rejestruje motyw. Podczas zmiany motywu te obszary się zmieniają, menu trzeba ponownie przypisać w „Wygląd → Menu" na karcie „Zarządzanie obszarami". Same pozycje, ich kolejność i zagnieżdżenie są zachowywane, traci się tylko powiązanie z lokalizacją.

Jak sprawdzić, czy menu mobilne działa na wszystkich urządzeniach?

Należy otworzyć stronę w trybie projektowania responsywnego w Chrome DevTools (F12 → ikona urządzenia) i przejść przez sześć punktów granicznych: 320px, 375px, 414px, 768px, 1024px, 1280px. Trzeba sprawdzić przycisk hamburger (musi być nad treścią, nie może być zasłonięty), szybkość reakcji animacji oraz widoczność wszystkich pozycji menu bez poziomego przewijania. Popularne wtyczki, takie jak WP Mobile Menu, dają możliwość ręcznego ustawienia punktu granicznego, można określić różną szerokość zadziałania pod konkretny motyw.

Co zastosować do Pana/Pani zadania: podsumowanie

Krótko mówiąc: najpierw należy wykorzystać wbudowane możliwości WordPressa i lekkie poprawki CSS, a dopiero potem sięgać po wtyczki. Dzięki temu stack pozostaje minimalny, strona, szybka, a nawigacja, dokładnie taka, jakiej potrzebują czytelnicy.

• Prosty blog lub wizytówka, proszę zacząć od Menu Icons (bezpłatnie) i sticky menu za pomocą trzech linijek CSS. To wystarczy, aby nawigacja przestała wyglądać surowo.
• Strona z rejestracją, proszę dodać przycisk logowania przez wp_loginout(). Użytkownicy przestaną szukać strony logowania.
• Landing page lub długi artykuł, shortcode [menu] rozmieści bloki nawigacyjne w dowolnym miejscu na stronie.
• Sklep internetowy lub portal treściowy, tutaj potrzebne jest megamenu. Proszę wybrać UberMenu, jeśli budżet na to pozwala i potrzebne jest maksimum funkcji, lub Max Mega Menu do typowych zadań (bezpłatnie i bez utraty szybkości).
• Dominuje publiczność mobilna, WP Mobile Menu pokryje 9 na 10 scenariuszy: instaluje się w minutę i od razu daje panel off-canvas z wyszukiwaniem. Jeśli potrzebny jest bardziej samodzielny interfejs mobilny, proszę spojrzeć na Mobi.

Proszę przyjąć zasadę: jedna wtyczka do jednego zadania. Nie należy instalować megamenu dla kilku ikon i nie należy pisać kodu dla panelu off-canvas, gdy wtyczka robi to w minutę. Równowaga między szybkością strony a wygodą nawigacji, dokładnie to, dla czego czytelnik zostaje na stronie.