Jak utworzyć menu rozwijane w WordPress (przewodnik dla początkujących)

Czy chcesz utworzyć menu rozwijane w WordPress?

Menu rozwijane pokazuje listę linków, gdy najedziesz myszką na element menu. Możesz używać tych menu, aby pokazać wiele opcji w małej przestrzeni i pomóc odwiedzającym znaleźć to, czego szukają, organizując linki w kategorie.

W tym przewodniku dla początkujących pokażemy Ci, jak utworzyć menu rozwijane w WordPress.

Dlaczego warto używać menu rozwijanych w WordPress?

WordPress posiada wbudowany system zarządzania menu, który pozwala na łatwe dodawanie menu nawigacyjnych do Twojej witryny.

Menu nawigacyjne to linki do najważniejszych stron Twojej witryny i zazwyczaj pojawiają się w rzędzie obok logo Twojej witryny.

Jeśli zakładasz bloga WordPress lub tworzysz stronę internetową z tylko kilkoma stronami, sensowne może być utworzenie menu jako pojedynczego rzędu. Odwiedzający będą mogli wtedy zobaczyć wszystkie ważne strony na pierwszy rzut oka.

Jednak jeśli prowadzisz sklep internetowy lub dużą witrynę, możesz mieć dużo treści. Dodanie wszystkich tych linków do menu może być przytłaczające i sprawić, że Twoja witryna będzie wyglądać niechlujnie.

Rozwijane menu rozwiązują ten problem, wyświetlając linki do menu tylko wtedy, gdy odwiedzający najeżdża kursorem myszy na element nadrzędny. Pozwalają również na organizowanie treści według tematów, kategorii lub grup. Możesz nawet dodawać tytuły do swoich menu.

Podobnie jak w przypadku pionowych menu nawigacyjnych, są one idealne do wyświetlania dużej ilości treści w niewielkiej przestrzeni.

Mając to na uwadze, przyjrzyjmy się, jak możesz łatwo tworzyć menu rozwijane w WordPress, a następnie dodawać je do swojej witryny.

Samouczek wideo

Subskrybuj WPBeginner

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, po prostu czytaj dalej.

Krok 1: Wybór motywu z obsługą menu rozwijanego

WordPress posiada wbudowany system zarządzania menu, ale wygląd tych menu będzie się różnić w zależności od Twojego motywu WordPress.

Prawie wszystkie motywy WordPress obsługują menu rozwijane domyślnie. Jednak niektóre motywy mogą nie mieć odpowiedniej obsługi menu rozwijanych. Na początek musisz upewnić się, że Twój motyw obsługuje menu rozwijane.

Skąd mam wiedzieć, czy mój motyw obsługuje nawigację rozwijaną?

Jeśli pobrałeś motyw z oficjalnego repozytorium WordPress, po prostu odwiedź stronę tego motywu i kliknij przycisk „Podgląd”, aby zobaczyć demonstrację na żywo.

Możesz wtedy sprawdzić, czy demo zawiera menu rozwijane.

Jeśli korzystasz z motywu WordPress premium, jego twórca może udostępniać demonstrację na żywo na swojej stronie internetowej. Możesz również sprawdzić dokumentację motywu, aby uzyskać więcej informacji.

Jeśli nadal nie masz pewności, zawsze możesz poprosić dewelopera o pomoc. Więcej na ten temat znajdziesz w naszym przewodniku jak prawidłowo prosić o wsparcie WordPress i je uzyskać.

Jeśli Twój motyw WordPress nie obsługuje menu rozwijanych, będziesz musiał znaleźć motyw, który je obsługuje. Aby uzyskać wiele wskazówek, zobacz nasz przewodnik po tym, jak wybrać idealny motyw WordPress.

Aby Ci pomóc, oto kilka doskonałych motywów, które obsługują menu rozwijane:

• Astra – uniwersalny motyw WordPress, który zawiera kilka gotowych stron i mnóstwo funkcji.
• motywy StudioPress – Zbudowane na bazie frameworka motywów Genesis, te profesjonalne motywy powinny pomóc Twojej witrynie ładować się szybciej.
• OceanWP – Popularny motyw WordPress odpowiedni do wszelkiego rodzaju stron internetowych.
• Ultra – Zasilany przez kreator Themify, ten motyw WordPress typu „przeciągnij i upuść” zawiera piękne szablony i elastyczne opcje motywu.
• Divi – Popularny motyw firmy Elegant Themes, który wykorzystuje kreator stron Divi i oferuje mnóstwo funkcji typu „przeciągnij i upuść”, w tym menu rozwijane.

Mając to na uwadze, przyjrzyjmy się, jak utworzyć rozwijane menu w WordPressie.

Krok 2: Tworzenie menu nawigacyjnego w WordPress

Zacznijmy od stworzenia prostego menu.

Jeśli już skonfigurowałeś menu nawigacyjne na swojej stronie internetowej, możesz przejść do następnego kroku.

Aby rozpocząć, przejdź do Wygląd » Menu w panelu WordPress, a następnie kliknij link „Utwórz nowe menu”.

Uwaga: Jeśli zamiast tego widzisz Wygląd » Edytor, oznacza to, że Twój motyw obsługuje pełne edytowanie witryny (FSE). W takim przypadku możesz przejść do sekcji FSE poniżej.

Następnie musisz wpisać nazwę dla menu nawigacyjnego.

Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek, co pomoże Ci zidentyfikować menu w obszarze administracyjnym WordPress.

Po wpisaniu tytułu w polu „Nazwa menu” kliknij „Utwórz menu”. WordPress utworzy teraz puste menu.

Następnie musisz dodać górne linki do menu nawigacyjnego. Są to elementy, które pojawią się w górnym rzędzie Twojego menu rozwijanego i będą działać jako nadrzędne dla wszystkich innych postów i stron.

W lewej kolumnie po prostu zaznacz pole wyboru obok każdej strony, którą chcesz dodać. Następnie kliknij przycisk „Dodaj do menu”.

Te strony pojawią się teraz w prawym dolnym rogu pod nagłówkiem „Struktura menu”.

Możesz również wybrać posty blogowe, kategorie lub dodać niestandardowe linki. Bardziej szczegółowe instrukcje znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPress.

Krok 3: Dodawanie podpozycji do menu

Następnie musimy dodać podpozycje, które pojawią się w menu rozwijanym. Możesz dodać podpozycję pod dowolną istniejącą pozycją menu.

W tym przewodniku pokażemy, jak dodać kategorie tematyczne pod pozycją menu „Blog”, ale kroki będą podobne niezależnie od dodawanej treści.

W lewej kolumnie zaznacz wszystkie strony, które chcesz dodać jako podpozycje, a następnie kliknij przycisk „Dodaj do menu”. Twoje pozycje pojawią się teraz w prawej kolumnie.

Jednak domyślnie wszystkie te linki pojawiają się jako zwykłe pozycje menu, co oznacza, że zostaną dodane do górnego rzędu.

Musimy zamiast tego uczynić je podrzędnymi elementami elementu nadrzędnego.

Aby to zrobić, po prostu przeciągnij i upuść element menu i umieść go pod wybranym elementem nadrzędnym. Następnie przesuń go lekko w prawo, a stanie się podrzędnym elementem.

Teraz po prostu powtórz ten proces dla każdego podrzędnego elementu, który chcesz wyświetlić w menu rozwijanym.

Gdy będziesz zadowolony z konfiguracji menu, nie zapomnij kliknąć przycisku „Zapisz menu”, aby zapisać zmiany.

Krok 4: Opublikuj swoje menu rozwijane

Jeśli edytujesz menu, które jest już aktywne na Twojej stronie, odwiedzający zobaczą Twoje zmiany natychmiast.

Jednak jeśli tworzysz nowe menu, musisz wybrać dla niego lokalizację.

Każdy motyw WordPress ma swoje własne lokalizacje menu, które można znaleźć w sekcji „Ustawienia menu” po prawej stronie ekranu. Po prostu zaznacz pole obok lokalizacji, której chcesz użyć, a następnie kliknij przycisk „Zapisz menu”.

Alternatywnie, możesz dodać niestandardowe menu nawigacyjne w swoim motywie WordPress.

Po wykonaniu tej czynności możesz odwiedzić swoją stronę internetową, aby zobaczyć rozwijane menu w akcji.

Jak utworzyć menu rozwijane za pomocą edytora całych witryn

Jeśli używasz motywu opartego na blokach jak Hestia Pro, możesz dodać menu rozwijane do dowolnej części swojej witryny za pomocą edytora całej witryny.

Aby rozpocząć, przejdź do Motywy » Edytor w panelu WordPress.

Domyślnie edytor pełnej strony wyświetli szablon strony głównej Twojego motywu.

Aby dodać menu rozwijane do innej części swojej witryny, kliknij „Szablony” lub „Wzorce”.

Edytor pokaże teraz listę wszystkich szablonów lub części szablonów, które tworzą Twój motyw WordPress.

Po prostu kliknij obszar, w którym chcesz dodać menu rozwijane. Na przykład, jeśli tworzysz główne menu nawigacyjne, zazwyczaj będziesz chciał wybrać część szablonu nagłówka.

WordPress wyświetli teraz podgląd szablonu lub jego części.

Aby edytować ten szablon, kliknij małą ikonę ołówka.

Po zakończeniu kliknij niebieską ikonę „+” w lewym górnym rogu.

W pojawiającym się pasku wyszukiwania wpisz „Nawigacja”.

Gdy pojawi się odpowiedni blok, przeciągnij go i upuść na swoim projekcie.

Teraz po prostu kliknij, aby wybrać ten blok, a zobaczysz wszystkie różne ustawienia, których możesz użyć do dostosowania bloku nawigacyjnego.

Na przykład możesz zmienić układ, edytować ustawienia wyświetlania, zmienić kolor tekstu i tła oraz dostosować rozmiar czcionki.

Aby dodać strony najwyższego poziomu do swojego menu, po prostu kliknij przycisk „+”.

W pojawiającym się oknie podręcznym zacznij wpisywać tytuł lub adres URL strony, którą chcesz dodać. Gdy pojawi się właściwa strona, kliknij, aby dodać ją do menu.

Po prostu powtórz ten proces, aby dodać wszystkie elementy najwyższego poziomu do menu rozwijanego.

Po wykonaniu tej czynności możesz dodać podmenu do dowolnego elementu nadrzędnego.

W menu po prawej stronie kliknij ikonę z kropkami obok elementu nadrzędnego. Następnie wybierz „Dodaj link podmenu”.

W pojawiającym się oknie wpisz tytuł lub adres URL strony, którą chcesz wyświetlić w menu rozwijanym.

Gdy pojawi się właściwa strona, kliknij, aby dodać ją jako element podmenu.

Teraz po prostu powtórz te kroki dla wszystkich elementów, które chcesz wyświetlić w menu rozwijanym.

Gdy będziesz zadowolony z konfiguracji menu, kliknij „Zapisz”, aby zachować zmiany.

Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz menu rozwijane w akcji.

Wskazówki dotyczące tworzenia interaktywnych menu rozwijanych

Menu nawigacyjne są ważne, ponieważ są pierwszym miejscem, do którego odwiedzający udadzą się, aby znaleźć interesujące treści lub konkretne informacje.

Prawidłowe ich użycie pomoże odwiedzającym zorientować się na Twojej stronie internetowej. Pomoże Ci to również uzyskać więcej konwersji i sprzedaży, jednocześnie zwiększając liczbę wyświetleń stron i zmniejszając współczynnik odrzuceń.

Mając to na uwadze, oto kilka wskazówek dotyczących tworzenia pomocnych i przyjaznych dla użytkownika menu rozwijanych.

1. Twórz wielopoziomowe menu rozwijane

W tym przewodniku pokazaliśmy, jak utworzyć górny rząd i jeden zestaw podpozycji. Możesz jednak dodać podpozycję pod inną podpozycją, aby utworzyć wielopoziomowe menu rozwijane.

Może to być przydatne w przypadku witryn, które mają dużo treści lub wiele różnych kategorii treści.

Na przykład, jeśli prowadzisz sklep internetowy, możesz mieć kategorię „Elektronika” i podkategorię „Laptopy”. Możesz jednak mieć również dalsze podkategorie, takie jak „Laptopy Apple” lub „Torby i etui na laptopy”.

W takim przypadku może mieć sens utworzenie wielopoziomowego menu rozwijanego. Aby to zrobić, po prostu przeciągnij dowolną stronę pod podpozycję i przesuń ją lekko w prawo.

2. Tworzenie wielu menu rozwijanych

Możesz tworzyć tyle menu rozwijanych, ile chcesz, a następnie wyświetlać je w różnych obszarach swojej witryny. Na przykład możesz utworzyć menu rozwijane wyświetlające tylko kategorie produktów.

Jest to świetne dla stron Twoich produktów, ale możesz również chcieć utworzyć unikalne menu rozwijane dla swojej strony głównej, aby kupujący mogli znaleźć różne obszary Twojej witryny, takie jak formularz kontaktowy i blog.

Po prostu utwórz nowe menu rozwijane, wykonując ten sam proces opisany powyżej, a następnie użyj ustawień „Lokalizacja”, aby kontrolować, gdzie to menu rozwijane pojawi się na Twojej stronie internetowej.

3. Twórz menu z podglądem na żywo

Jeśli tworzenie menu rozwijanego w panelu administracyjnym staje się zbyt skomplikowane, możesz przełączyć się do narzędzia dostosowywania WordPress. Po prostu przejdź do Wygląd » Dostosuj, aby uruchomić na żywo narzędzie dostosowywania motywów WordPress.

Stąd kliknij zakładkę „Menu”, a następnie wybierz menu nawigacyjne. Zobaczysz teraz edytor typu przeciągnij i upuść w lewej kolumnie z podglądem Twojej witryny na żywo w prawym panelu.

Teraz możesz pracować nad swoim menu, a wszelkie wprowadzone zmiany będą widoczne w podglądzie na żywo.

4. Tworzenie dużego menu typu mega jako menu rozwijanego w WordPress

Jeśli masz dużo treści, możesz mieć trudności z ich schludnym zorganizowaniem za pomocą standardowego menu rozwijanego.

Zamiast tego możesz wyświetlić pełną strukturę swojej witryny jako mega menu, które pojawia się tylko wtedy, gdy użytkownicy najedą kursorem na główne menu.

Menu typu mega są podobne do menu rozwijanego, ale mogą wyświetlać znacznie więcej linków, podmenu i innych elementów. Szczegółowe instrukcje znajdziesz w naszym poradniku krok po kroku, jak utworzyć menu typu mega w WordPress.

4. Eksportuj swoje menu rozwijane

Prowadzisz wiele witryn WordPress? W takim przypadku możesz chcieć użyć tego samego układu menu i projektu na wszystkich swoich witrynach.

Domyślna funkcja importu/eksportu WordPress nie pozwala na samodzielne importowanie i eksportowanie menu, ale możliwe jest przenoszenie menu za pomocą wtyczki.

Szczegółowe instrukcje krok po kroku znajdziesz w naszym przewodniku jak importować i eksportować menu nawigacyjne w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo utworzyć menu rozwijane w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat jak dodać pasek wyszukiwania do swojego menu lub sprawdzić nasz wybór najlepszych tutoriali od ekspertów, aby opanować menu nawigacyjne WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.