Czy chcesz utworzyć rozwijane menu i dodać je do swojej witryny WordPress?

Rozwijane menu pokazuje listę linków, gdy najedziesz myszką na element w menu.

Używamy rozwijanego menu na WPBeginner, śmiało i najedź myszą na menu nawigacyjne na górze.

W tym przewodniku dla początkujących pokażemy, jak łatwo utworzyć rozwijane menu w WordPress z instrukcjami krok po kroku.

Creating a dropdown menu in WordPress

Dlaczego warto korzystać z rozwijanych menu w WordPress?

WordPress jest wyposażony we wbudowany system zarządzania menu, który umożliwia łatwe dodawanie menu nawigacji do witryny WordPress.

Menu nawigacyjne to linki do głównych stron witryny, które zwykle pojawiają się na górze jako poziomy wiersz tuż obok logo witryny.

Typical navigation menu with a horizontal row of links

Jeśli zaczynasz blog lub tworzysz stronę internetową z tylko kilkoma stronami, możesz dodać je w jednym wierszu.

Jeśli jednak prowadzisz sklep internetowy lub dużą stronę internetową, możesz dodać więcej linków do menu nawigacyjnego.

Rozwijane menu pomaga rozwiązać problem z ograniczoną przestrzenią, pokazując linki do menu tylko wtedy, gdy użytkownik przesunie kursor myszy do elementu nadrzędnego. Umożliwiają one również uporządkowanie struktury menu według tematów lub hierarchii.

Dropdown menu example

Na koniec wyglądają całkiem ładnie.

Mając to na uwadze, przyjrzyjmy się teraz, w jaki sposób możesz łatwo tworzyć menu rozwijane WordPress dodaj je do swojej witryny.

Video Tutorial

Subskrybuj WPBeginner

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.

Punkt 1. Wybór motywu z obsługą rozwijanego Menu

WordPress jest wyposażony we wbudowany system zarządzania menu, ale wyświetlanie tych menu jest całkowicie zależne od motywu WordPress.

Prawie wszystkie motywy WordPress domyślnie obsługują rozwijane menu. Jednak niektóre motywy mogą nie mieć odpowiedniej obsługi menu.

Musisz upewnić się, że używasz motywu WordPress, który obsługuje rozwijane menu.

Skąd wiesz, czy używany motyw obsługuje menu rozwijane?

Możesz po prostu odwiedzić stronę motywu, gdzie znajdziesz link do demo motywu. Stamtąd możesz sprawdzić, czy demo pokazuje rozwijane menu w menu nawigacyjnym.

Jeśli tak nie jest, musisz znaleźć motyw WordPress, który tak robi.

Zobacz nasz przewodnik, jak wybrać idealny motyw WordPress dla swojej witryny.

Oto kilka doskonałych motywów, które obsługują rozwijane menu po wyjęciu z pudełka.

  • Astra-jest to uniwersalny motyw WordPress, który zawiera kilka witryn startowych i mnóstwo funkcji.
  • Motywy StudioPress-zbudowane na bazie genesis theme framework, te profesjonalne motywy są wysoce zoptymalizowane pod kątem wydajności.
  • OceanWP-popularny motyw WordPress, który jest odpowiedni dla wszystkich rodzajów stron internetowych.
  • Ultra-Powered By themify builder Ten przeciągnij i upuść motyw WordPress zawiera piękne szablony i elastyczne opcje motywów.
  • Divi-popularny motyw Elegant Themes, który korzysta z Kreatora Stron Divi i zawiera mnóstwo funkcji przeciągania i upuszczania, w tym rozwijane menu.

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

Punkt 1. Tworzenie menu nawigacyjnego w WordPress

Jeśli masz już skonfigurowane menu nawigacyjne w swojej witrynie, możesz przejść do następnego kroku.

Stwórzmy najpierw proste menu.

Przejdź do Wygląd ” Menu stronę i kliknij link „Utwórz nowe menu” u góry.

Create a menu

Następnie musisz podać nazwę swojego menu nawigacyjnego. Ta nazwa nie będzie publicznie widoczna na twojej stronie internetowej. Celem nazwy menu jest pomoc w identyfikacji menu w obszarze administracyjnym WordPress.

Menu name

Wprowadź nazwę swojego menu, a następnie kliknij przycisk „Utwórz Menu”.

WordPress utworzy teraz nowe puste menu dla ciebie.

Dodajmy górne linki do menu nawigacyjnego. Pozycje te pojawią się w górnym wierszu menu.

Po prostu wybierz strony, które chcesz dodać z lewej kolumny i kliknij przycisk „Dodaj do menu”. Możesz także wybrać posty na blogu, kategorie lub dodać niestandardowe linki.

Add pages to menu

Teraz zobaczysz te strony w prawej kolumnie pod nowym menu.

Punkt 2. Dodawanie podkategorii do Menu

Podkategorie to pozycje, które pojawią się w rozwijanym menu. W zależności od tego, jak chcesz zorganizować swoje menu, możesz dodać je pod dowolnym z istniejących elementów.

Ze względu na ten tutorial będziemy dodawać kategorie pod linkiem bloga.

Po prostu wybierz elementy, które chcesz dodać z lewej kolumny, a następnie kliknij przycisk „Dodaj do menu”. Twoje artykuły pojawią się teraz w prawej kolumnie.

New menu items added to the menu

Linki te będą jednak wyświetlane jako zwykłe elementy. Musimy zrobić z nich podpunkt menu nadrzędnego.

Możesz po prostu przeciągnąć i upuścić element menu i umieścić go pod elementem nadrzędnym. Przesuń go lekko w prawo, a stanie się podpunktem.

Adding sub menu items to create a dropdown menu

Powtórz proces dla wszystkich linków, które chcesz wyświetlić w rozwijanym menu.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz menu”, aby zapisać zmiany.

Punkt 3. Opublikuj Swoje Rozwijane Menu

Jeśli edytujesz menu, które już działa w Twojej witrynie, od razu zacznie się pojawiać w Twojej witrynie.

Jeśli jednak jest to nowy element menu, musisz teraz wybrać lokalizację motywu, aby wyświetlić to menu.

Motywy WordPress mogą wyświetlać menu w różnych lokalizacjach. Każdy motyw definiuje własne lokalizacje menu i możesz wybrać menu, które chcesz tam wyświetlić.

Ta opcja znajduje się w prawej kolumnie w sekcji „Ustawienia Menu”. Wybierz opcję obok Ustawienia „Wyświetl lokalizację” i kliknij przycisk „Zapisz menu”.

Choose theme location

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć menu rozwijane w akcji.

Dropdown menu preview

Wskazówki dotyczące tworzenia interaktywnych menu rozwijanych

Menu nawigacyjne są ważne, ponieważ jest to pierwsze miejsce, w którym użytkownicy będą szukać konkretnych informacji.

Prawidłowe korzystanie z nich pomoże użytkownikom odnaleźć się na twojej stronie. Pomoże Ci to również uzyskać więcej przeglądów stron, konwersji i sprzedaży w Twojej witrynie.

Oto kilka wskazówek, jak uczynić menu nawigacyjne bardziej interaktywnymi dzięki rozwijanym menu.

1. Możesz tworzyć wielopoziomowe menu rozwijane

Tworzenie łącza jako elementu podrzędnego innego łącza powoduje wyświetlenie go w rozwijanym menu. Możesz również dodać podelement pod innym podelementem, aby utworzyć wielopoziomowe menu rozwijane.

Multi level menus

Twój motyw automatycznie wyświetli je jako podmenu wewnątrz rozwijanego menu.

Multi-level dropdown menu

2. Możesz także utworzyć wiele rozwijanych menu

Możesz utworzyć listę rozwijaną pod dowolnym górnym linkiem w menu. Możesz nawet dodać wiele rozwijanych menu w głównym menu nawigacyjnym.

Multiple dropdown menus in the primary menu

3. Tworzenie menu z podglądem na żywo

Jeśli menu staje się zbyt skomplikowane, możesz przejść do podglądu wizualnego. Przejdź do Wygląd ” Dostosuj aby uruchomić dostosowywanie motywu na żywo.

Następnie kliknij kartę „menu”, a następnie wybierz menu nawigacyjne. Zobaczysz teraz edytor menu przeciągnij i upuść w lewej kolumnie z podglądem na żywo witryny w prawym panelu.

Customize WordPress menus with a live preview

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

Menu rozwijane pokazuje tylko jedno rozwijane menu naraz. Co, jeśli chcesz pokazać pełną strukturę swojej witryny jako mega menu, które pojawia się tylko wtedy, gdy użytkownicy najeżdżają na menu główne?

Mega menu example

Mega menu pojawiają się jako rozwijane menu, ale mogą wyświetlać znacznie więcej linków, pod-menu i więcej. Aby uzyskać szczegółowe instrukcje, zobacz nasz samouczek krok po kroku, jak utworzyć mega menu w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo utworzyć rozwijane menu w WordPress. Możesz również zobaczyć nasz przewodnik, Jak utworzyć lepkie pływające menu nawigacyjne w WordPress i jak dodać ikony obrazów do menu nawigacyjnych w WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…