Jak stworzyć rozwijane menu boczne w WordPress (łatwy sposób)

Rozwijane menu boczne to świetny sposób na zapewnienie łatwego dostępu do ważnych linków i treści, jednocześnie zachowując czysty i uporządkowany wygląd Twojej strony internetowej.

Ta funkcja pozwala użytkownikom rozwijać i zwijać menu, dając im kontrolę nad ich doświadczeniem przeglądania.

Zauważyliśmy, że wiele dużych stron internetowych, sklepów e-commerce i witryn o bardziej złożonych układach korzysta z niego, aby ułatwić nawigację.

W tym artykule pokażemy Ci, jak łatwo stworzyć rozwijane menu boczne w WordPress.

Czym jest rozwijane menu boczne? (I kiedy go używać)

Rozwijane menu boczne (lub rozszerzalne menu) to lista nawigacyjna, która ukrywa podpozycje, dopóki odwiedzający nie kliknie, aby je ujawnić. Organizuje linki w strukturze „rodzic-dziecko”, utrzymując czysty wygląd witryny.

Często zalecamy stosowanie rozwijanych menu dla dużych witryn internetowych lub sklepów eCommerce. Oto dlaczego są one skuteczne:

• Organizuj złożone układy: Pomagają sortować setki kategorii lub stron bez przytłaczania użytkownika.
• Oszczędzaj miejsce na ekranie: Ukrywając elementy podrzędne, utrzymujesz pasek boczny krótki i uporządkowany.
• Popraw wrażenia mobilne: Zapobiegają konieczności przewijania przez użytkowników mobilnych nieskończonych list linków.

Na przykład portal informacyjny Guardian używa rozwijanego menu dla swojej strony mobilnej, aby zarządzać wieloma kategoriami wiadomości.

Teraz przyjrzyjmy się, jak łatwo możesz utworzyć rozwijane menu boczne na swojej stronie WordPress.

Jak stworzyć rozwijane menu boczne w WordPress

Możesz utworzyć rozwijane menu boczne w WordPress, używając wtyczki Bellows Accordion Menu.

Zapewnia poręczny skrócony kod, który pozwala umieścić rozwijane menu na dowolnej stronie, poście lub obszarze widżetu, w tym na pasku bocznym.

Krok 1: Zainstaluj i aktywuj wtyczkę Bellows Accordion

Najpierw musisz zainstalować i aktywować wtyczkę Bellows Accordion Menu. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących jak zainstalować wtyczkę WordPress.

Krok 2: Utwórz nowe menu

Po aktywacji odwiedź stronę Wygląd » Menu w swoim panelu WordPress. 

Wpisz nazwę swojego menu w polu „Nazwa menu”. Następnie kliknij przycisk „Utwórz menu”.

Krok 3: Dodaj i uporządkuj elementy menu

Następnie wybierz strony, które chcesz dodać, z lewej kolumny i kliknij „Dodaj do menu”.

Jeśli chcesz zobaczyć listę wszystkich stron Twojej witryny, kliknij zakładkę „Pokaż wszystko”. Więcej informacji znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPressie.

Aby utworzyć efekt rozwijania, musisz ułożyć elementy w relacji rodzic-dziecko. Po prostu przeciągnij element strony lekko w prawo pod elementem nadrzędnym.

Przeciągnij go w prawo, aż zobaczysz, że przerywany zarys przesunął się do wewnątrz. Potwierdza to, że element jest teraz podrzędny i będzie ukryty, dopóki nie zostanie kliknięty element nadrzędny.

Teraz, gdy odwiedzający kliknie element nadrzędny w Twoim rozwijanym menu, rozwinie się, aby ujawnić całą zawartość podrzędną.

Nie zapomnij kliknąć przycisku „Zapisz menu”, gdy skończysz.

Krok 4: Pobierz skrócony kod menu

Teraz chcemy dodać to rozwijane menu do paska bocznego WordPress. Aby to zrobić, użyjemy kilku krótkich kodów, które Bellows Accordion tworzy automatycznie. 

Aby uzyskać krótki kod, przejdź do strony Wygląd » Menu Bellows z panelu administracyjnego WordPress. Jeśli nie jest jeszcze zaznaczone, upewnij się, że wybrałeś zakładkę „Pokaż wszystko”.

Teraz możesz kliknąć pole skróconego kodu, które powinno podświetlić cały kod. Teraz skopiuj ten kod, używając skrótu klawiaturowego Command + C lub Ctrl + C. 

Krok 5: Dodaj menu do paska bocznego

Teraz musimy dodać menu do układu Twojej witryny. Przejdź do strony Wygląd » Widżety z obszaru administracyjnego WordPress.

Spowoduje to wyświetlenie wszystkich obszarów widżetów w Twoim bieżącym motywie. Opcje, które zobaczysz, mogą się różnić, ale większość nowoczesnych motywów WordPress posiada pasek boczny.

Znajdź obszar widżetu paska bocznego i kliknij ikonę „+”, aby dodać nowy blok.

Wyszukaj „Krótki kod” i wybierz blok.

Wklej skopiowany krótki kod do bloku i kliknij „Zaktualizuj”. Po odwiedzeniu swojej witryny powinieneś zobaczyć nowe rozwijane menu.

Na urządzeniach mobilnych ten pasek boczny zazwyczaj pojawia się na dole strony, gdzie funkcja rozwijania pomaga zaoszczędzić cenne miejsce na pionowe przewijanie.

Krok 6: Dostosuj swoje rozwijane menu

Wtyczka Bellows Accordion sprawia, że dostosowanie tego domyślnego menu jest niezwykle łatwe. Na przykład, możesz zmienić jego schemat kolorów, aby lepiej odzwierciedlał branding Twojej witryny. 

Jeśli chcesz dostosować domyślne menu, po prostu przejdź do strony Wygląd » Menu Bellows w panelu administracyjnym WordPress. 

Ten formularz zawiera wszystkie ustawienia potrzebne do dostosowania rozwijanego menu. Jest wiele ustawień do odkrycia. Jednak możesz zacząć od przejścia do Główna konfiguracja » Podstawowa konfiguracja.

Tutaj możesz przełączać się między kilkoma różnymi kolorami menu. Możesz również wybrać, czy odwiedzający mogą jednocześnie rozwijać wiele podmenu, korzystając z ustawień „Składanie akordeonowe”. 

Aby zmienić wyrównanie i szerokość menu, kliknij zakładkę „Układ i pozycjonowanie”.

Jeśli wolisz podglądać swoje zmiany w czasie rzeczywistym, możesz edytować rozwijane menu paska bocznego w narzędziu Dostosuj WordPress.

Aby to zrobić, przejdź do strony Wygląd » Dostosuj z obszaru administracyjnego i wybierz zakładkę „Bellows” z lewej kolumny.

Tutaj znajdziesz wiele różnych ustawień dla swojego paska bocznego. Obejmują one zmianę jego szerokości, wyrównania i koloru rozwijanego menu paska bocznego. 

Bonus: Sztuczki z paskiem bocznym WordPressa, aby uzyskać maksymalne rezultaty

Po utworzeniu harmonijkowego menu bocznego możesz zastosować inne wskazówki, aby wygenerować więcej leadów za pomocą swojego paska bocznego.

Na przykład, możesz sprawić, że Twój widget bocznego paska będzie lepki, dzięki czemu będzie widoczny na stronie, nawet gdy użytkownik przewija w dół.

Poza tym możesz dodać formularz kontaktowy lub formularz zapisu na listę e-mailową w swoim pasku bocznym, aby zbudować swoją listę e-mailową. Aby to zrobić, możesz użyć WPForms, który jest najlepszą wtyczką formularzy kontaktowych na rynku.

W WPBeginner używamy go do tworzenia formularzy kontaktowych i corocznych ankiet, i bardzo nam się podoba. Aby dowiedzieć się więcej, zapoznaj się z naszą pełną recenzją WPForms.

Wystarczy utworzyć formularz, a następnie dodać go do paska bocznego za pomocą bloku WPForms w menu bloków.

Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem jak utworzyć formularz kontaktowy w WordPress.

Dodatkowo możesz wyświetlać swoje najpopularniejsze posty w pasku bocznym, dodawać obrazy, pokazywać ikony mediów społecznościowych i wyświetlać dowody społeczne. Zachęci to użytkowników do dalszego przeglądania Twojej witryny i zwiększy konwersje.

Więcej wskazówek znajdziesz w naszym zestawieniu najlepszych sztuczek dotyczących paska bocznego WordPress, aby uzyskać maksymalne rezultaty.

Samouczek wideo

Jeśli nie preferujesz pisemnych instrukcji, obejrzyj nasz samouczek wideo.

Subskrybuj WPBeginner

Najczęściej zadawane pytania dotyczące rozwijanych menu bocznych w WordPress

Oto kilka pytań, które nasi czytelnicy często zadawali przed dodaniem rozwijanego menu bocznego na swoich stronach internetowych:

Jak zwinąć menu w WordPress?

Możesz zwinąć menu za pomocą wtyczki takiej jak Bellows Accordion Menu. Domyślnie menu WordPress nie mają tej funkcji na ekranach komputerów. Wtyczka dodaje niezbędny kod, aby elementy rozszerzały się i ukrywały po kliknięciu.

Jak dodać rozwijany sekcję w WordPress?

Najprostszym sposobem jest użycie domyślnego bloku WordPress „Details”. Ten blok pozwala opakować treść w klikalną linię podsumowania. Aby uzyskać bardziej zaawansowane style w swoich postach, możesz użyć dedykowanej wtyczki akordeonu.

Jak utworzyć menu rozwijane w WordPress?

Możesz utworzyć menu rozwijane, przechodząc do Wygląd » Menu w swoim panelu. Po prostu przeciągnij element menu lekko w prawo pod element nadrzędny. To wcięcie informuje WordPress, aby wyświetlił ten element na liście rozwijanej.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym poradnikiem na temat tworzenia menu rozwijanego w WordPress.

Jak umieścić elementy obok siebie w WordPress?

Możesz umieścić elementy obok siebie za pomocą bloku Kolumny. W edytorze bloków wybierz „Kolumny” i wybierz preferowany układ. Następnie po prostu dodaj swój tekst lub obrazy do każdej kolumny.

Co to jest wtyczka bloku akordeonu dla WordPress?

Wtyczka bloku akordeonu pozwala dodawać rozwijane sekcje treści do swoich postów. Pomaga organizować długie treści, ukrywając tekst pod nagłówkami. Użytkownicy po prostu klikają nagłówek, aby przeczytać potrzebne informacje.

Jeśli chcesz dodać akordeony do swojej witryny, zapoznaj się z naszymi najlepszymi wyborami najlepszych wtyczek akordeonowych WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć rozwijane menu boczne w WordPress. Aby uzyskać więcej wskazówek dotyczących edycji wyglądu witryny WordPress, możesz również zapoznać się z naszymi poradnikami jak dostosować nagłówek WordPress oraz najbardziej przydatne widżety WordPress dla Twojej witryny. 

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.