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ć)

Najbardziej przyjazne dla użytkownika menu zapewniają łatwy dostęp do wszystkich linków, których potrzebują odwiedzający. Może to być jednak trudne w przypadku stron WordPress, które mają wiele stron lub bardziej złożony układ. 

Pomyśl o dużym sklepie e-commerce, który ma mnóstwo kategorii produktów i podkategorii, takich jak Amazon. 

Wyświetlanie każdej kategorii produktów w standardowym menu nie byłoby dobrym pomysłem. Kupujący prawdopodobnie musieliby przewijać menu, aby znaleźć kategorię, która ich interesuje. 

Właśnie tutaj pojawiają się menu harmonijkowe. Menu te organizują treści w podejściu „rodzic-dziecko”. Oznacza to, że jeśli odwiedzający kliknie element nadrzędny w menu harmonijkowym, zostanie on rozwinięty, aby wyświetlić wszystkie podrzędne treści tego elementu nadrzędnego. 

Jednym z przykładów jest portal informacyjny Guardian, który używa rozwijanego menu na swojej stronie mobilnej.

Rozwijane menu boczne są czasami nazywane również menu rozszerzalnymi. Dzieje się tak, ponieważ ich różne sekcje rozwijają się, gdy odwiedzający na nie kliknie. 

Domyślnie menu harmonijkowe ukrywa przed odwiedzającymi wiele treści i złożoności. Jest to znacznie bardziej przyjazne dla użytkownika niż przewijanie długiej listy kategorii i podkategorii na Twoim blogu WordPress.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo możesz stworzyć 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 do umieszczenia rozwijanego menu na dowolnej stronie, poście lub w obszarze widżetu, w tym w pasku bocznym.

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.

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

Na początek wpisz nazwę swojego menu w polu „Nazwa menu”. Pamiętaj, że odwiedzający Twoją witrynę nie zobaczą tej nazwy, ponieważ jest ona tylko do Twojej wiadomości.

Następnie możesz kliknąć przycisk „Utwórz menu”. 

Następnie wybierz strony, które chcesz dodać do rozwijanego menu bocznego. Domyślnie WordPress wyświetla tylko twoje najnowsze strony.

Jeśli chcesz zobaczyć listę wszystkich stron Twojej witryny, kliknij zakładkę „Zobacz wszystkie”. 

Alternatywnie możesz kliknąć „Zaznacz wszystko”. Spowoduje to dodanie wszystkich twoich stron do rozwijanego menu.

Gdy będziesz zadowolony z wyboru, kliknij przycisk „Dodaj do menu”. Możesz także wybrać posty i kategorie blogów lub dodać niestandardowe linki. Więcej szczegółów znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPress.

Po dodaniu wszystkich różnych stron internetowych do menu, możesz je przesuwać, przeciągając i upuszczając. Zmieni to kolejność, w jakiej te strony pojawiają się w Twoim rozwijanym menu. 

Menu rozwijane opierają się na relacjach rodzic-dziecko.

Kiedy odwiedzający kliknie element nadrzędny w Twoim rozwijanym menu, rozwinie się on, ukazując całą zawartość podrzędną.

Aby utworzyć tę relację, po prostu przeciągnij i upuść, aby ułożyć wszystkie strony dziecka pod ich rodzicem.

Następnie chwyć każdy element podrzędny i przeciągnij go trochę w prawo. Następnie możesz zwolnić tę stronę. Spowoduje to wcięcie elementu i przekształcenie go w stronę podrzędną. 

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

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ót, które powinno podświetlić cały kod. Teraz skopiuj ten kod, używając skrótu klawiaturowego Command + c lub Ctrl + c. 

Następnym krokiem jest wklejenie tego skróconego kodu do widżetu, więc przejdź do strony Wygląd » Widżety z obszaru administracyjnego.

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.

Gdy znajdziesz obszar paska bocznego, kliknij go. Ta sekcja zostanie teraz rozwinięta.

Aby dodać blok, kliknij ikonę + i zacznij wpisywać „Krótki kod”. Gdy się pojawi, wybierz blok „Krótki kod”. 

Teraz po prostu wklej swój krótki kod rozwijanego menu do tego bloku. Aby opublikować swoje menu, musisz kliknąć przycisk „Zaktualizuj” u góry ekranu. 

Teraz, gdy odwiedzisz swoją witrynę, powinieneś zobaczyć nowe rozwijane menu boczne. 

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

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.