Jak dodać mega menu w WordPress za pomocą wtyczki i ręcznie

Podczas projektowania strony mega menu w WordPress to kluczowy element zapewniający płynną nawigację. Jest to szczególnie istotne w przypadku sklepów internetowych (e-commerce) oferujących szeroki wybór kategorii produktów.

Mega menu w WordPress pozwala wyświetlać zawartość menu w wielu kolumnach lub wierszach, co ułatwia organizację dużej ilości informacji. Dzięki temu użytkownicy mogą szybko i efektywnie dotrzeć do różnych sekcji strony bez konieczności przeglądania wielu podstron.

W tym obszernym poradniku pokażemy, jak dodać mega menu za pomocą wtyczki oraz ręcznie poprzez edycję kodu. Znajdziesz tu również propozycje najlepszych wtyczek do mega menu w WordPress oraz instrukcje tworzenia menu rozwijanych jako alternatywnego rozwiązania.

Mega menu w WordPress zazwyczaj składa się z kilku poziomów:

• Menu najwyższego poziomu. To główne menu widoczne dla odwiedzających zaraz po wejściu na stronę główną. Zwykle zawiera ono główne kategorie lub sekcje strony, na przykład stronę Produkty.
• Menu drugiego poziomu. Staje się widoczne, gdy użytkownik najedzie kursorem lub kliknie element menu najwyższego poziomu. Przykładowo, marki modowe często umieszczają Odzież jako jedną z pozycji drugiego poziomu w sekcji Produkty.
• Menu trzeciego poziomu. Ten rodzaj podmenu pojawia się, gdy odwiedzający wejdą w interakcję z menu drugiego poziomu. Na przykład elementy trzeciego poziomu dla kategorii Odzież mogą obejmować Koszule, Swetry i Kurtki. 

Choć można utworzyć więcej poziomów podmenu, warto poprzestać na trzech, aby nie przytłoczyć użytkowników.

Jak dodać mega menu w WordPress

Najprostszym sposobem na dodanie mega menu w WordPress jest użycie wtyczki. Jeśli posiadasz pewną wiedzę techniczną, możesz również dodać mega menu ręcznie za pomocą własnego kodu CSS.

W tej części omówimy obie opcje bardziej szczegółowo. Możesz od razu przejść do preferowanej metody.

Jak utworzyć mega menu w WordPress za pomocą wtyczki Max Mega Menu

Max Mega Menu to popularna, kompleksowa wtyczka do zarządzania menu, która obsługuje wiele lokalizacji menu. Dzięki tej elastyczności możesz dostosować ustawienia mega menu dla różnych sekcji swojej strony.

Zanim przejdziemy do tego, jak działa Max Mega Menu, najpierw zainstaluj i skonfiguruj tę wtyczkę.

1. Skonfiguruj wtyczkę Max Mega Menu

Aby zainstalować wtyczkę WordPress, zaloguj się do panelu administracyjnego WordPress i przejdź do Wtyczki → Dodaj nową. W polu wyszukiwania wpisz „Max Mega Menu”, a następnie kliknij Zainstaluj i Aktywuj przy znalezionej wtyczce.

Dalej przejdź do sekcji Mega Menu (z menu po lewej stronie ekranu) w kokpicie WordPress, aby skonfigurować domyślne ustawienia wtyczki. Na przykład, jeśli chcesz dodać nową lokalizację menu, wystarczy wykonać następujące kroki:

1. Przejdź do Wygląd → Menu.
2. Przełącz na kartę Lokalizacje menu i kliknij Dodaj kolejną lokalizację menu.
3. Wprowadź nazwę obszaru strony, w którym chcesz wyświetlać menu (na przykład nagłówek, stopkę lub pasek boczny).
4. Wybierz z listy własne menu, które zostało utworzone wcześniej.
5. Kliknij Dodaj lokalizację menu.

Po utworzeniu nowej lokalizacji zaznacz pole wyboru Enabled w sekcji General Settings (Ustawienia ogólne). Obok opcji Event wybierz jedną z trzech głównych metod aktywacji menu:

• Hover Intent. Użytkownik musi najechać kursorem myszy na element menu najwyższego poziomu i przytrzymać przez chwilę, zanim pojawi się menu drugiego poziomu. Takie opóźnienie zapobiega przypadkowemu otwarciu menu.
• Hover. Podmenu otwierają się natychmiast, gdy użytkownik najedzie kursorem na element nadrzędny. Z uwagi na brak opóźnienia metoda ta najlepiej sprawdza się, gdy zależy nam na płynnej nawigacji.
• Click. Wymaga od odwiedzającego kliknięcia (lub tapnięcia na ekranie dotykowym) elementu menu najwyższego poziomu, aby rozwinąć jego podmenu. Ta opcja jest szczególnie przydatna na urządzeniach mobilnych oraz w sytuacjach, gdy precyzyjne najechanie kursorem może być utrudnione.

Jeśli wybierzesz opcję Click, przejdź do zakładki Advanced → Click Event Behaviour. Następnie wybierz jedną z poniższych opcji, aby określić, co się stanie po kliknięciu mega menu przez użytkownika:

• Pierwsze kliknięcie otwiera podmenu, a drugie kliknięcie je zamyka.
• Pierwsze kliknięcie otwiera menu drugiego poziomu, a kolejne kliknięcie przechodzi do strony docelowej.
• Pierwsze kliknięcie od razu otwiera docelową stronę (link).

Następnie wróć do zakładki General Settings i znajdź sekcję Effect.

W tym miejscu wybierz typ animacji dla swojego mega menu, na przykład fade, fade up, slide lub slide up. Możesz także ustawić prędkość animacji: fast (szybką), medium (średnią) lub slow (wolną).

Aby włączyć animację dla menu mobilnego, wybierz styl przy opcji Effect (Mobile) – dostępne są slide down, slide left i slide right. Pamiętaj, że zastosowanie interaktywnej animacji może spowolnić działanie strony na urządzeniach mobilnych lub przy wolniejszym połączeniu internetowym.

Po zakończeniu konfiguracji kliknij Save Changes (Zapisz zmiany).

2. Ustaw układ i wygląd menu

Wtyczka Max Mega Menu oferuje domyślny motyw menu, z którego możesz skorzystać od razu. Jeśli jednak wolisz stworzyć własny motyw, możesz łatwo spersonalizować swoje mega menu.

Aby to zrobić, przejdź do sekcji Menu Themes w ustawieniach Max Mega Menu. Kliknij ikonę z trzema kropkami obok pola Select theme i wybierz Add new theme.

W zakładce General Settings możesz zmienić tytuł nowego motywu, wybrać styl strzałek nawigacyjnych, ustawić ogólną wysokość linii dla elementów podmenu oraz dodać cień do układu mega menu.

Następnie otwórz zakładkę Menu Bar, aby spersonalizować pasek menu najwyższego poziomu. Ustawienia te decydują o tym, jak menu nawigacyjne wygląda w swojej zminimalizowanej postaci.

W górnej części tej zakładki znajdziesz opcje dostosowania wysokości menu oraz koloru tła. Możesz także ustawić własne wartości odstępów (padding), aby uzyskać pożądany układ, oraz dodać obramowanie wokół elementów menu dla wyraźnego odróżnienia ich od siebie.

Po przewinięciu w dół znajdziesz także osobną sekcję do dostosowania elementów menu najwyższego poziomu:

• Menu Items Align. Ustaw wyrównanie wszystkich elementów menu do lewej, do środka lub do prawej strony.
• Item Font. Dostosuj typografię menu do stylu strony – możesz zmienić rodzinę czcionki, rozmiar, pogrubienie, kolor oraz inne opcje wyglądu tekstu.
• Item Background. Zmień kolor tła każdego elementu menu. Pozostaw go przezroczystym, jeśli ustawiłeś wcześniej tło całego menu (Menu Background).
• Item Spacing. Wyreguluj marginesy i odstępy wokół każdego elementu, aby precyzyjnie dostosować układ mega menu.
• Item Border. Zdefiniuj kolor obramowania, szerokość linii oraz promień zaokrąglenia krawędzi, aby uzyskać pożądany efekt wizualny.
• Highlight Current Item. Po włączeniu tej opcji bieżący element menu zostanie wyróżniony, gdy użytkownik najedzie na niego kursorem, co ułatwia nawigację.

Po dostosowaniu menu głównego przejdź do sekcji Mega Menu. W tej zakładce możesz zmienić krój pisma (czcionkę), kolor tła, odstępy i obramowanie elementów menu drugiego oraz trzeciego poziomu.

Aby uzyskać ciekawszy wygląd, warto zastosować odmienne schematy kolorystyczne dla menu głównego i podmenu. Zalecamy jednak użycie tej samej typografii na wszystkich poziomach menu, aby zachować spójność stylu.

Po zakończeniu nie zapomnij zapisać wprowadzonych zmian.

3. Dodaj zawartość do menu WordPress

Wtyczka Max Mega Menu zapewnia interfejs typu „przeciągnij i upuść”, co ułatwia dodawanie nowych elementów. Oprócz linków tekstowych możesz także dodawać produkty WooCommerce, obrazki i filtry wyszukiwania.

Na początek przejdź do Wygląd → Menu, aby utworzyć nowe menu lub edytować istniejące. Następnie wykonaj poniższe instrukcje:

1. Zaznacz pole Enable w sekcji ustawień Max Mega Menu po lewej stronie ekranu. Opcja ta pozwala również skonfigurować ustawienia menu dla wielu lokalizacji jednocześnie.
2. Przewiń w dół do sekcji Strony, zaznacz wszystkie potrzebne strony i kliknij Dodaj do menu.
3. Powtórz ten sam proces dla sekcji Wpisy, Kategorie oraz Kategorie produktów (jeśli dotyczy).
4. W sekcji Struktura menu przeciągnij podkategorie pod odpowiadające im główne kategorie. W ten sposób utworzysz menu drugiego poziomu. Podobnie możesz utworzyć podmenu trzeciego poziomu, przeciągając element nieco w prawo od jego elementu nadrzędnego.

Domyślnie ta wtyczka stosuje styl menu typu flyout (wysuwane) lub dropdown (rozwijane). Aby stworzyć mega menu, najedź kursorem myszy na pierwszy element menu najwyższego poziomu i kliknij przycisk Mega Menu.

Po pojawieniu się wyskakującego okienka ustaw tryb wyświetlania podmenu na Grid Layout (układ siatki) albo Standard Layout.

Układ siatki pozwala utworzyć menu składające się z wielu kolumn i wierszy. Natomiast w przypadku układu standardowego można jedynie zmienić liczbę kolumn.

Aby menu było bardziej atrakcyjne wizualnie, kliknij opcję Select a widget to add to the panel (Wybierz widżet do dodania do panelu). Następnie wybierz widżet z rozwijanej listy. Do wyboru masz m.in. pasek wyszukiwania, galerię obrazów, kalendarz, odtwarzacz audio, wideo czy filtry produktów. W ten sposób możesz pokazać różne treści za pomocą widżetów w obrębie menu.

Jeśli Twoja strona ma rozbudowane menu z wieloma linkami, przypisz ikonę do każdego elementu, aby zwiększyć wygodę użytkowników. Przejdź do sekcji Icons w menu po lewej stronie i wybierz ikony z dostępnych bibliotek. Przypisanie ikon do elementów menu pozwala użytkownikom szybciej zidentyfikować sekcje bez konieczności czytania etykiet nawigacyjnych.

Zamknij okno Mega Menu i powtórz ten proces dla każdego elementu menu najwyższego poziomu. Po skonfigurowaniu wszystkich ustawień kliknij Zapisz menu, aby aktywować mega menu na swojej stronie.

Jak stworzyć mega menu w WordPress ręcznie (za pomocą kodu)

Ręczne stworzenie mega menu w WordPress za pomocą kodu daje Ci większą kontrolę nad jego wyglądem i funkcjonalnością. Metoda ta wymaga jednak znajomości CSS oraz umiejętności edycji pliku stylów motywu.

Skorzystaj z poniższej instrukcji krok po kroku, aby dodać mega menu do swojej strony WordPress:

1. Przygotuj swoje środowisko deweloperskie

WordPress to system zarządzania treścią (CMS) o otwartym kodzie źródłowym, co oznacza, że możesz użyć własnego kodu do modyfikowania jego motywów i wtyczek.

Jednak edycja kodu bezpośrednio na działającej stronie może prowadzić do nieoczekiwanych problemów. Aby temu zapobiec, wykonaj kopię zapasową swojej strony WordPress i przygotuj bezpieczne środowisko do testów.

Zarządzany hosting Hostinger dla WordPress oferuje automatyczne kopie zapasowe, które chronią Twoje pliki. Plany Business i Cloud Startup zawierają również narzędzie WordPress Staging. Ta funkcja pozwala zduplikować stronę i testować zmiany przed wdrożeniem ich na aktywnej stronie.

Oto jak utworzyć środowisko testowe WordPress (staging) na Hostingerze:

1. Zaloguj się do hPanel i przejdź do sekcji Strony internetowe.

2. Wybierz swoją domenę i kliknij Zarządzaj.

3. Przejdź do WordPress → Staging w menu po lewej stronie.

4. Otwórz kartę Staging i kliknij Create Staging (Utwórz środowisko testowe).

5. Utwórz subdomenę dla środowiska testowego. Proces tworzenia może potrwać do 15 minut.

2. Uzyskaj dostęp do pliku stylów motywu

Kolejnym krokiem jest dostosowanie pliku style.css Twojego motywu na nowo utworzonej stronie testowej.

U większości dostawców hostingu wymaga to połączenia z zewnętrznym klientem FTP (File Transfer Protocol). Na szczęście użytkownicy Hostinger mogą łatwo zrobić to przez hPanel:

1. Przejdź do Pliki → Menedżer plików i wybierz opcję Dostęp do plików dla swojej domeny.
2. Otwórz folder public_html → staging → wp_content → themes.
3. Wybierz folder motywu WordPress, który chcesz zmodyfikować, i otwórz go.
4. Kliknij dwukrotnie plik style.css tego motywu, aby go edytować.
5. Przewiń na sam dół edytora kodu i wprowadź poniższy kod:

.main-navigation ul:hover li ul,

.main-navigation ul:hover li ul li ul {

   display: inherit;

}

To sprawi, że elementy menu drugiego i trzeciego poziomu będą widoczne po najechaniu na nie kursorem.

3. Dostosuj styl mega menu

Aby dalej dostosować styl menu, dodaj własny kod bezpośrednio do arkusza stylów motywu. Poniżej przedstawiamy kilka przykładowych fragmentów kodu CSS dla mega menu w WordPress:

Tworzenie kolumn w obrębie mega menu:

.mega-menu li.mega-menu-column {

 width: 25%; /* for a 4-column layout */

 float: left;

 padding: 10px;

}

Zmiana koloru, odstępów i stylu tekstu dla każdego elementu menu:

.mega-menu ul.mega-sub-menu li a {

 color: #555;

 padding: 8px 15px;

 display: block;

 text-decoration: none;

}

Optymalizacja układu menu dla widoku mobilnego:

@media screen and (max-width: 767px) {

 .mega-menu li.mega-menu-column {

   width: 100%;

   float: none;

 }

}

To, czy powyższe fragmenty kodu zadziałają zgodnie z oczekiwaniami, zależy od reszty CSS i struktury HTML Twojej strony. Dlatego ważne jest przetestowanie każdej zmiany i w razie potrzeby wprowadzenie poprawek.

Najlepsze wtyczki do mega menu w WordPress

Mimo że możliwe jest stworzenie mega menu w WordPress bez wtyczki, taka ręczna metoda nie jest odpowiednia dla osób bez doświadczenia w kodowaniu. Jeśli dopiero zaczynasz, najlepiej skorzystać z wtyczek do menu WordPress, aby ułatwić sobie cały proces.

Oprócz Max Mega Menu przedstawiamy trzy najlepsze wtyczki WordPress do tworzenia mega menu. Wtyczkę QuadMenu możesz zainstalować bezpośrednio z oficjalnego katalogu WordPress, natomiast WP Mega Menu Pro i JetMenu są dostępne wyłącznie na zewnętrznych platformach.

1. QuadMenu

QuadMenu to otwartoźródłowa, natywna wtyczka mega menu dla WordPress, oferująca szeroki wybór motywów i lokalizacji menu.

W darmowej wersji możesz wyświetlać widżet menu nawigacyjnego w obrębie menu, dostosowywać punkty przerwania (breakpointy) dla zwijania menu oraz tworzyć różne rodzaje mega menu. Obejmują one m.in. menu wysuwane z boku (off-canvas), przyklejone (sticky), a także menu poziome i pionowe.

Plany Pro zaczynają się od 179,99 PLN/rok, oferując dodatkowe funkcje, takie jak zakładki, formularze logowania/rejestracji, ikony społecznościowe oraz menu karuzelowe.

2. WP Mega Menu Pro

WP Mega Menu to łatwa w użyciu wtyczka do budowania mega menu, zaprojektowana z myślą o początkujących. Umożliwia błyskawiczną konfigurację, dzięki czemu możesz od razu tworzyć responsywne mega menu.

Mimo nastawienia na prostotę obsługi, ta wtyczka mega menu WordPress oferuje rozbudowane możliwości personalizacji. Możesz z łatwością dostosować czcionki, typy menu, wyświetlanie metadanych wpisów, schematy kolorów oraz animacje rozwijania menu.

Wtyczka WP Mega Menu jest dostępna wyłącznie w płatnej wersji. Kosztuje 69,99 PLN za licencję (na nieograniczoną liczbę stron) i obejmuje rok aktualizacji oraz priorytetowe wsparcie techniczne.

3. JetMenu

JetMenu to płatna wtyczka umożliwiająca stworzenie mega menu WordPress z obrazami, filmami, plikami audio oraz innymi rodzajami interaktywnych treści.

Wykupienie subskrypcji za 159 PLN/rok zapewnia dostęp do kreatora typu drag-and-drop oraz kilku układów menu – m.in. menu hamburger (ikonka ☰), układ poziomy i układ pionowy.

Inną wyróżniającą się funkcją JetMenu jest menedżer presetów, który umożliwia tworzenie i zapisywanie wielu szablonów dla różnych menu.

Zalety korzystania z mega menu w WordPress

W porównaniu ze standardowym menu, zastosowanie mega menu w WordPress przynosi Twojej stronie kilka korzyści:

• Lepsza organizacja. Jeśli Twoja strona ma bardzo dużo treści lub kategorii produktów, mega menu pomoże uporządkować je w przejrzysty sposób dla użytkowników.
• Atrakcyjniejszy wygląd. Mega menu można dostosować do identyfikacji wizualnej Twojej marki, co zapewnia spójny i estetyczny design strony.
• Większe zaangażowanie użytkowników. Odwiedzający chętniej eksplorują Twoją stronę, gdy łatwo znajdują to, czego potrzebują. Mega menu upraszcza nawigację, zachęcając użytkowników do dłuższego pozostania na stronie i interakcji z Twoimi treściami.
• Wydajne wykorzystanie przestrzeni. Dzięki mega menu możesz zaprezentować szeroką gamę opcji bez zagracania układu strony.
• Przewaga konkurencyjna. Obecność mega menu może wyróżnić Twoją stronę na tle konkurencji, pokazując, że zależy Ci na zapewnieniu wyjątkowych doświadczeń użytkownikom.

Alternatywa dla mega menu w WordPress

Choć mega menu w WordPress umożliwia wyświetlenie złożonej struktury nawigacji, możesz też wybrać prostsze rozwiązanie w postaci menu rozwijanych lub wysuwanych.

Taka opcja sprawdzi się szczególnie, jeśli Twoje menu ma nieskomplikowaną hierarchię, a Ty chcesz zachować przejrzysty wygląd strony.

Jak utworzyć menu rozwijane w klasycznym motywie WordPress

Jeżeli korzystasz z klasycznego motywu, oto jak utworzyć menu rozwijane za pomocą Personalizatora WordPress:

1. Zaloguj się do kokpitu WordPress i przejdź do Wygląd → Personalizuj.

2. W interfejsie Personalizatora wybierz Menu i zaznacz istniejące menu (lub utwórz nowe menu).

3. Kliknij Dodaj elementy, aby dodać nowe strony lub wpisy.

4. Ułóż podmenu hierarchicznie, przeciągając je poniżej i nieco w prawo od ich elementu nadrzędnego.

5. Na koniec przejdź do Lokalizacje menu i przypisz swoje menu rozwijane do wybranej sekcji (np. Menu główne w nagłówku).

6. Kliknij Opublikuj, aby zapisać zmiany.

Jak utworzyć menu rozwijane w edytorze blokowym

Jeśli używasz motywu blokowego (FSE), możesz stworzyć menu rozwijane za pomocą edytora Gutenberg:

1. Przejdź do Wygląd → Edytor w kokpicie WordPress.

2. W Edytorze blokowym kliknij ikonę + na górnym pasku narzędzi i wybierz kategorię Bloki.

3. Wyszukaj blok Nawigacja i przeciągnij go w wybrane miejsce w układzie strony.

4. Po dodaniu bloku Nawigacja przejdź do prawego panelu bocznego i rozwiń panel Ustawienia bloku.

5. Kliknij ikonę + w obrębie bloku Nawigacja i wybierz Odnośnik do strony, aby dodać główne strony oraz elementy podmenu.

6. Aby utworzyć menu rozwijane, przeciągnij elementy podmenu odrobinę w prawo, umieszczając je pod odpowiadającymi im elementami nadrzędnymi. Możesz też kliknąć ikonę z trzema kropkami obok wybranego elementu menu i wybrać Dodaj łącze do podmenu.

7. W zakładce Ustawienia (po prawej stronie) możesz dostosować układ menu – wyświetlać elementy pionowo lub poziomo.

8. Gdy menu rozwijane wygląda i działa zgodnie z oczekiwaniami, kliknij Opublikuj (lub Zaktualizuj), aby zapisać zmiany.

Podsumowanie

Przed uruchomieniem strony WordPress ważne jest upewnienie się, że nawigacja jest intuicyjna. Dla sklepów internetowych i stron z wieloma podstronami zastosowanie mega menu to idealne rozwiązanie.

W przeciwieństwie do standardowego menu WordPress, mega menu pozwala zaprezentować złożone informacje w prosty, a zarazem atrakcyjny wizualnie sposób.

Istnieją dwa główne sposoby dodania mega menu do strony. Początkującym zalecamy skorzystanie z wtyczki Max Mega Menu lub innych podobnych, aby łatwo utworzyć pasek nawigacyjny najwyższego poziomu i jego podmenu.

Jeśli jesteś zaawansowanym użytkownikiem i wolisz większą elastyczność, użyj kodu CSS, aby dostosować mega menu do swoich potrzeb. Aby zaoszczędzić czas i wysiłek, warto wybrać zaufanego dostawcę hostingu, takiego jak Hostinger, który oferuje narzędzie WordPress Staging oraz wbudowany edytor kodu.

Mamy nadzieję, że ten poradnik dostarczył Ci niezbędnych wskazówek, aby zapewnić lepsze doświadczenia użytkownikom Twojej strony. Jeśli masz więcej pytań, nie wahaj się zostawić komentarza poniżej.

Mega menu WordPress – najczęstsze pytania

Oto odpowiedzi na często zadawane pytania dotyczące mega menu w WordPress: