Jak dodać Mega Menu do WordPressa (+ 5 najlepszych wtyczek)

Menu odgrywają ważną rolę w projektowaniu i funkcjonalności Twojej witryny. Pomagają odwiedzającym nawigować między stronami i mogą poprawić ogólną użyteczność. Mimo to, gdy masz dużo treści, wymyślenie, jak je wyświetlić, aby nie wyglądało na zatłoczone lub chaotyczne, może być trudne.

W tym miejscu pojawiają się mega menu. Mega menu WordPressa może nadać Twojej witrynie bardziej profesjonalny wygląd i ułatwić użytkownikom znajdowanie treści, których szukają. Ponadto istnieje wiele metod, których możesz użyć, aby dodać je do swojej witryny.

W tym poście wyjaśnimy, czym jest mega menu i jakie są zalety korzystania z niego w WordPressie. Następnie przeprowadzimy Cię przez opcje tworzenia jednego i odkryjemy pięć najlepszych opcji wtyczek mega menu.

Czym jest mega menu w WordPressie?

Twoje menu WordPress to struktura, której używasz do organizowania i wyświetlania stron Twojej witryny. Zwykle znajduje się na górze witryny — choć może być również z boku lub pokazany w inny unikalny sposób.

Aby uzyskać dostęp do wbudowanego systemu menu, możesz zacząć od zalogowania się do swojej witryny WordPress. Następnie z panelu administracyjnego przejdź do Wygląd → Menu .

Domyślnie WordPress używa standardowych menu, które pokazują listę stron, czasami z rozwijanymi w jednej kolumnie. Nie ma żadnych dodatkowych informacji ani treści, takich jak obrazy, opisy itp. — to tylko seria list. Zazwyczaj jest to dość proste i proste, ale ogranicza liczbę stron, objętości lub informacji, które możesz dołączyć. Oto przykład z WooCommerce:

Mega menu to rodzaj rozwijanego menu, które umożliwia użytkownikom dostęp do dużej ilości treści w jednym miejscu. Mega menu są często używane w witrynach eCommerce i stają się coraz bardziej popularne również w innych typach. Możesz zobaczyć przykład na stronie Nalgene, która prezentuje zdjęcia produktów, suwaki i inne treści w bardziej poziomym stylu:

Kluczową różnicą jest to, że mega menu zazwyczaj zawiera wiele kolumn treści, podczas gdy tradycyjne menu rozwijane ma tylko jedną kolumnę. Pozwala to na znacznie bardziej rozbudowane i rozbudowane menu, które może być szczególnie pomocne na stronach z dużą ilością informacji.

Dlaczego warto korzystać z mega menu w WordPressie?

Jedną z zalet korzystania z mega menu jest to, że może zmniejszyć liczbę kliknięć potrzebnych do przejścia do określonego fragmentu treści. Jest to idealne rozwiązanie dla odwiedzających, którzy szukają czegoś konkretnego w Twojej witrynie, ale poprawia również wrażenia użytkowników, którzy odwiedzają ją po raz pierwszy, pomagając im efektywniej przeglądać Twoją witrynę.

Mega menu można również wykorzystać do poprawy wyglądu i stylu Twojej witryny, a nawet do promowania określonych treści lub zachęcania do działań, które mają podjąć odwiedzający. Ponadto są wysoce konfigurowalne — dzięki czemu mogą grać z resztą Twojej marki, aby zapewnić płynne, atrakcyjne wizualnie wrażenia.

Jak stworzyć mega menu WordPress

Istnieje kilka różnych sposobów tworzenia mega menu w WordPressie. Jedną z opcji jest zrobienie tego ręcznie, dodając własny kod. Drugą (szybszą i łatwiejszą) opcją jest użycie wtyczki. Przyjrzyjmy się, jak dodać mega menu do WordPressa za pomocą obu tych metod.

Ręczne tworzenie mega menu (bez wtyczki)

Jeśli czujesz się komfortowo w pracy z plikami witryny, może to być dobra opcja do stworzenia czegoś bardzo unikalnego.

Zanim to zrobisz, ważne jest, aby wykonać kopię zapasową witryny WordPress. Możesz również rozważyć utworzenie strony testowej, aby zbudować i przetestować swoje mega menu przed opublikowaniem go na żywo. Pomoże to uniknąć problemów, które zakłócają działanie Twojej aktywnej witryny.

Najpierw przejdź do Wygląd → Menu na pulpicie nawigacyjnym WordPress i nazwij swoje menu.

Kliknij przycisk Utwórz menu . Przeciągnij i upuść strony, które chcesz umieścić w mega menu, w razie potrzeby wcinając je jako podmenu.

Gdy skończysz, możesz wybrać Zapisz Menu .

Następnie przejdź do Menedżera plików cPanel lub użyj klienta protokołu przesyłania plików (FTP), aby połączyć się z plikami witryny. Znajdź arkusz stylów swojego motywu, przechodząc do / wp-content → /themes → /your-theme-or-child-theme → /style.css . Na dole dodaj następujący wiersz kodu:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

Spowoduje to, że elementy podmenu pojawią się, gdy ktoś najedzie na element najwyższego poziomu. Teraz dostosujemy kod, aby był trochę bardziej atrakcyjny wizualnie, upewniając się, że każdy element podrzędny jest wyświetlany w pełnej szerokości, z sekcjami elementów pojawiającymi się obok siebie. Dodaj ten kod:

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

Następnie możesz bawić się stylizacją, aby wyglądała tak, jak chcesz, zgodnie z Twoją marką i resztą witryny. Na przykład możesz chcieć zmienić kolor tła swojego mega menu lub pogrubić niektóre elementy. Możesz także dostosować odstępy między kolumnami lub dodać dodatkowe elementy, takie jak zdjęcia. Jeśli jesteś programistą lub masz pewne doświadczenie w kodowaniu, możesz stworzyć swoje mega menu tak, aby wyglądało tak, jak chcesz!

Potrzebujesz bardziej szczegółowego przewodnika? Tuts+ oferuje pełny opis przejścia.

Inną opcją tworzenia mega menu bez wtyczki jest sprawdzenie wbudowanych opcji motywu. Niektóre, takie jak motyw Hestia, domyślnie zawierają opcje mega menu. Jednak nie zawsze tak jest.

Tworzenie mega menu za pomocą wtyczki WordPress

Jeśli nie masz ochoty edytować plików witryny lub Twój motyw nie oferuje wbudowanych opcji mega menu, inną metodą tworzenia mega menu w WordPressie jest wtyczka. Dostępnych jest wiele opcji, które omówimy w następnej sekcji.

Chociaż jest to bezpieczniejsza opcja niż ręczne tworzenie, nadal należy wykonać kopię zapasową witryny WordPress przed wprowadzeniem jakichkolwiek zmian.

Specyficzne cechy i funkcjonalność wtyczki będą się różnić w zależności od narzędzia, z którego zdecydujesz się korzystać. Ale ogólnie koncepcja będzie taka sama.

Jako przykład użyjemy Max Mega Menu. Aby rozpocząć, możesz zainstalować i aktywować wtyczkę w swojej witrynie WordPress.

Następnie musisz włączyć funkcję mega menu, przechodząc do Wygląd → Menu . Możesz wybrać żądaną lokalizację menu, a następnie kliknąć pole obok opcji Włącz.

Zapisz zmiany, gdy skończysz. Aby dostosować wygląd i ustawienia mega menu, przejdź do Mega Menu → Menu Themes .

Tutaj znajdziesz wiele opcji stylizacji menu. Możesz modyfikować typ menu, a także jego wygląd i funkcjonalność.

Pięć najlepszych wtyczek do mega menu WordPress

Jeśli zdecydujesz, że chcesz korzystać z wtyczki WordPress mega menu, masz wiele opcji do wyboru. Podczas ich badania ważne jest, aby wziąć pod uwagę konkretne funkcje, których szukasz, a także budżet. Mając to na uwadze, spójrzmy szczegółowo na pięć najlepszych wtyczek mega menu WordPress.

1. Maksymalne Mega Menu

Max Mega Menu to niezwykle popularna wtyczka, która pozwala łatwo dodawać wysokiej jakości, konfigurowalne menu do witryny WordPress. Zawiera narzędzie do przeciągania i upuszczania, które jest łatwe w użyciu. Obsługuje również wiele mega menu dla różnych lokalizacji w witrynie.

Najważniejsze cechy Max Mega Menu:

• Wiele, indywidualnie konfigurowalnych lokalizacji menu
• Kreator układu siatki
• Opcje najechania na menu i przejścia
• Konstruktor typu „przeciągnij i upuść”
• Skróty
• Ikony pozycji menu
• Pole wyszukiwania
• Logo menu

Plusy Max Mega Menu:

• Dostępne są opcje bezpłatne i premium.
• Jest lekki, z czystym kodem.
• Obejmuje wsparcie dla WooCommerce i Easy Digital Downloads.
• Możesz umieścić mega menu w wielu lokalizacjach.
• Widżety umożliwiają dodawanie map, formularzy kontaktowych i nie tylko.
• Możesz także tworzyć mega menu od podstaw lub korzystać z istniejących menu.
• Nawigacja za pomocą klawiatury zapewnia lepszą dostępność.

Wady Max Mega Menu:

• Zaawansowane opcje dostosowywania są dostępne tylko z licencją pro.
• Nie ma bezpłatnego okresu próbnego dla planów premium.

Łatwość użytkowania :

Max Mega Menu jest bardzo prosty w obsłudze. Automatycznie konwertuje istniejące menu w mega menu. Posiada przyjazny dla użytkownika interfejs, który jest prosty w nawigacji. Licencja pro obejmuje również aktualizacje i priorytetowe wsparcie.

Cennik :

Max Mega Menu oferuje darmową wersję z ograniczonymi opcjami dostosowywania. Plany Pro z zaawansowanymi funkcjami zaczynają się od 29 USD za licencję na jedną witrynę. Obejmuje to również rok wsparcia.

2. QuadMenu

QuadMenu to kolejna popularna wtyczka mega menu, która jest łatwa w użyciu niezależnie od poziomu doświadczenia. Elastyczne narzędzie zawiera intuicyjny kreator typu „przeciągnij i upuść” oraz szeroką gamę opcji stylizacji i dostosowywania do tworzenia menu i podmenu dla WordPress.

Najważniejsze cechy QuadMenu :

• Konstruktor typu „przeciągnij i upuść”
• Wiele lokalizacji menu
• Menu poza kanwą, przyklejone i pionowe
• Opcje wyrównywania linków
• Pływające menu rozwijane
• Ikony Font Awesome i czcionki Google
• Animacje rozwijane
• Różnorodne filtry
• Wyświetlaj widżety

Plusy QuadMenu:

• Dostępna jest zarówno wersja bezpłatna, jak i premium.
• Jest odpowiedni dla początkujących i programistów.
• Obsługuje motywy potomne.
• Istnieje automatyczna i ręczna integracja menu.
• Jest intuicyjny i łatwy w użyciu.
• W wersji pro dostępne są menu kart i karuzeli.

Wady QuadMenu:

• Zaawansowane opcje stylizacji wymagają licencji pro.
• Dostępne są ograniczone opcje podglądu na żywo.

Łatwość użytkowania :

QuadMenu jest odpowiednie zarówno dla początkujących, jak i programistów. Konstruktor typu „przeciągnij i upuść” sprawia, że ​​tworzenie i dostosowywanie mega menu jest szybkie i łatwe.

Cennik:

QuadMenu ma darmową wersję. Licencje Pro są dostępne od 30 USD za jedną witrynę.

3. UberMenu

Jeśli szukasz narzędzia do tworzenia mega menu premium, warto sprawdzić UberMenu. To potężne, bogate w funkcje narzędzie wykorzystuje zaawansowany system siatki, który pozwala szybko zbudować profesjonalnie wyglądające mega menu.

Najważniejsze cechy UberMenu :

• Unikalny system siatki
• Ponad 50 ustawień stylu
• Dynamiczne generowanie pozycji
• Podmenu oparte na postach, kategoriach i nie tylko
• Możliwość dodawania zakładek w menu
• Menu dotykowe
• Rozwijane przejścia CSS3
• Wiele wyzwalaczy menu (najechanie, zamiar najechania i kliknięcie)
• Różne lokalizacje menu
• Elastyczne układy

Plusy UberMenu :

• Jest szeroko stosowany i wysoko oceniany wśród właścicieli witryn WordPress.
• Dostępne są opcje dodawania niestandardowego kodu HTML, skrótów i widżetów.
• Używa natywnego interfejsu WordPress Customizer.
• Istnieje nieograniczona liczba tematów menu.

Wady UberMenu :

• Dostępna jest tylko wersja premium.
• W zależności od motywu, może to nie być najlepsza opcja, jeśli nie masz umiejętności programowania CSS/PHP.

Łatwość użytkowania :

Korzystanie z UberMenu będzie prawdopodobnie proste dla doświadczonych użytkowników WordPressa, ponieważ interfejs jest zbudowany na natywnym Customizerze. Możesz wyświetlać podgląd swojego menu w czasie rzeczywistym podczas jego tworzenia. Jednak dla początkujących WordPress może to być trudniejsze w nawigacji niż intuicyjny interfejs konstruktora typu „przeciągnij i upuść”.

Cennik :

Licencja UberMenu na jedną stronę kosztuje 26 USD. Obejmuje to sześć miesięcy wsparcia dla programistów.

4. Zestaw elementów

Jeśli znasz i używasz kreatora stron Elementor, ElementsKit to doskonała wtyczka do mega menu do rozważenia. Narzędzie zawiera obszerną bibliotekę niestandardowych modułów, w tym narzędzie do budowania nagłówków i stopek.

Najważniejsze cechy ElementsKit :

• Interfejs treści na żywo
• Niestandardowa biblioteka modułów
• Konstruktor nagłówków i stopek
• Przewijanie paralaksy
• Ponad 200 wstępnie zaprojektowanych szablonów stron
• Widżet minutnika
• Animacje rozwijane
• Menu poza płótnem, lepkie i pionowe
• Czcionka Awesome ikony
• Jasne i ciemne motywy
• Dwa układy menu mobilnego
• niestandardowe CSS

Plusy ElementsKit :

• W pełni integruje się z kreatorem stron Elementor.
• Zawiera funkcję przeciągnij i upuść.
• Jest początkujący i przyjazny dla użytkownika.
• Ma dostosowania kolorów ikon i znaczków.
• Posiada wbudowane funkcje WooCommerce.
• Oferuje zaawansowane opcje mega menu.

Wady ElementsKit :

• Nie jest to idealne rozwiązanie, chyba że używasz kreatora stron Elementor.
• To może być przytłaczające, jeśli szukasz tylko narzędzia do budowania mega menu.

Łatwość użytkowania :

ElementKits to proste, wszechstronne narzędzie. Jeśli nie znasz Elementora, przyzwyczajenie się do interfejsu może trochę potrwać. Chociaż, jeśli już korzystasz z wtyczki do tworzenia stron, prawdopodobnie szybko opanujesz ten dodatek.

Cennik :

ElementsKit oferuje bezpłatną wersję. Licencje premium zaczynają się od 39 USD rocznie za jedną witrynę.

5. Mega Menu WP

Jeśli szukasz prostego i prostego narzędzia freemium do tworzenia mega menu w WordPressie, WP Mega Menu to kolejna solidna opcja. Ta wtyczka jest łatwa w użyciu i zapewnia wszystkie podstawowe funkcje i funkcje potrzebne do zbudowania wysokiej jakości mega menu dla szerokiej gamy witryn. Jako darmowe narzędzie zawiera również imponujący zestaw opcji dostosowywania i stylizacji.

Najważniejsze cechy WP Mega Menu :

• Intuicyjna nawigacja
• Interfejs typu „przeciągnij i upuść”
• Możliwość tworzenia i zapisywania motywów menu
• Logo, pasek wyszukiwania i obrazy tła
• Czcionki Google i ikony Font Awesome
• Ikony społecznościowe
• Etykietowanie menu

Plusy WP Mega Menu :

• Jest całkowicie darmowy do pobrania i używania, z dostępną uaktualnieniem do wersji pro.
• Jest łatwy w nawigacji i obsłudze.
• Posiada funkcje, które inne wtyczki zawierają tylko w wersjach premium.
• Ma opcję tworzenia i zapisywania motywów menu do wykorzystania w wielu witrynach internetowych.

Wady WP Mega Menu :

• Brakuje narzędzi przeznaczonych dla programistów w porównaniu z innymi opcjami wtyczek.
• W bezpłatnej wersji nie ma opcji lepkich ani poza płótnem.

Łatwość użytkowania :

WP Mega Menu to przyjazna dla początkujących wtyczka z wieloma opcjami. Jest wyposażony w intuicyjny interfejs, który jest łatwy do zrozumienia i nawigacji.

Cennik :

WP Mega Menu jest bezpłatne. Ale oferuje również plany Premium od 29 USD rocznie za jedną licencję.

Porównanie najlepszych wtyczek mega menu dla WordPress

Często zadawane pytania (FAQ) dotyczące mega menu

W tym momencie mam nadzieję, że dobrze rozumiesz, jak tworzyć i dodawać mega menu w WordPressie. Poświęćmy jednak chwilę na podsumowanie kilku najczęściej zadawanych pytań (FAQ).

Czy mogę dodać obrazy i ikony do mega menu WordPress?

Tak, możesz dodawać obrazy i ikony do mega menu WordPress. Niektóre wtyczki mają wbudowaną obsługę tego. Możesz również dodać obrazy i ikony, edytując kod swojej witryny.

Czy mogę dodać mega menu do mojego paska bocznego WordPress?

Tak, możesz dodać mega menu do paska bocznego WordPress. Istnieje kilka różnych wtyczek, których możesz użyć, aby dodać mega menu do paska bocznego. Większość wtyczek, które umożliwiają wyświetlanie menu jako widżetów, pozwala również dodawać je do paska bocznego.

Zacznij dostosowywać swoje menu WordPress

Menu odgrywają kluczową rolę w projektowaniu i funkcjonalności Twojej witryny, ponieważ można ich używać do poprawiania wyglądu i obsługi dowolnej witryny. Tak więc, jeśli masz dużą witrynę WordPress z dużą ilością treści i stron, możesz rozważyć dodanie mega menu.

Jak omówiliśmy w tym poście, istnieją trzy główne metody, których możesz użyć do stworzenia mega menu w WordPressie. Jednym z nich jest użycie opcji motywu w celu dodania mega menu. Drugi to zakodowanie go ręcznie. Jeśli żadna z tych opcji nie jest możliwa lub jeśli chcesz po prostu zaoszczędzić trochę czasu, możesz wypróbować wtyczkę mega menu, taką jak Max Mega Menu, QuadMenu lub ElementsKit.

Czy chcesz jeszcze bardziej zwiększyć wydajność swojej witryny WordPress? Oprócz zapewniania łatwych, automatycznych kopii zapasowych i innych funkcji bezpieczeństwa WordPress, Jetpack może pomóc zwiększyć szybkość i UX Twojej witryny!