Jak utworzyć składane menu boczne w WordPress (prosty sposób)

Składane menu na panelu bocznym to świetny sposób na zapewnienie łatwego dostępu do ważnych odnośników i treści, przy jednoczesnym zachowaniu przejrzystego i uporządkowanego wyglądu twojej witryny internetowej.

Funkcja ta pozwala użytkownikom rozwijać i zwijać menu, dając im kontrolę nad sposobem przeglądania. Jest to idealne rozwiązanie dla dużych witryn internetowych, sklepów e-handel lub witryn o bardziej złożonym układzie.

W tym artykule pokażemy, jak łatwo utworzyć składane menu panelu bocznego w WordPress.

Czym jest składane menu boczne? (I kiedy go używać)

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

Pomyśl o dużym sklepie e-handlu, który ma mnóstwo kategorii i podkategorii produktów, takim 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źć interesującą ich kategorię.

W tym miejscu pojawiają się składane menu. Menu te organizują treści w układzie „nadrzędny – podrzędny”. Oznacza to, że jeśli odwiedzający kliknie element nadrzędny w składanym menu, rozwinie się ono, aby wyświetlić wszystkie treści podrzędne tego elementu nadrzędnego.

Jednym z przykładów jest serwis informacyjny Guardian, który wykorzystuje składane menu na swojej witrynie mobilnej.

Składane menu panelu bocznego są czasami nazywane również menu rozwijanymi. Dzieje się tak, ponieważ ich różne sekcje rozwijają się, gdy użytkownik je kliknie.

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

To powiedziawszy, przyjrzyjmy się, jak można łatwo utworzyć składane menu panelu bocznego na twojej witrynie WordPress.

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Jak utworzyć składane menu paska bocznego w WordPress?

Możesz utworzyć składane menu panelu bocznego w WordPressie za pomocą wtyczki Bellows Accordion Menu.

Bellows Accordion Menu zapewnia poręczny krótki kod do umieszczania składanego menu na dowolnej stronie, wpisie lub w obszarze widżetów, w tym na panelu bocznym.

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

Po włączaniu, przejdź na stronę Wygląd ” Menu w twoim kokpicie WordPress.

Na początek wpisz nazwę twojego menu w polu „Nazwa menu”. Pamiętaj, że odwiedzający twoją witrynę nie zobaczą tej nazwy, ponieważ jest ona przeznaczona tylko dla ciebie.

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

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

Jeśli chcesz zobaczyć listę wszystkich stron twojej witryny internetowej, kliknij kartę „Zobacz wszystko”.

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

Gdy będziesz zadowolony z twojego wyboru, kliknij przycisk „Dodaj do menu” . Możesz także wybrać wpisy i kategorie blogów lub dodać własne odnośniki. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnego w WordPress.

Po dodaniu wszystkich twoich stron internetowych do menu, możesz je przesuwać, przeciągając je i upuszczając. Spowoduje to zmianę kolejności wyświetlania twoich stron w składanym menu.

Składane menu to przede wszystkim relacje nadrzędny-dziecko.

Gdy odwiedzający kliknie element nadrzędny w twoim składanym menu, rozwinie się ono, aby odsłonić wszystkie treści podrzędne.

Aby utworzyć tę relację, po prostu użyj funkcji przeciągnij i upuść, aby ułożyć wszystkie strony Twojego dziecka pod jego stroną nadrzędną.

Następnie chwyć każde dziecko i przeciągnij je nieco w prawo. Następnie możesz wydać tę stronę. Spowoduje to wcięcie elementu i przekształcenie go w stronę podrzędną.

Nie zapomnij kliknąć przycisku „Zapisz menu” po zakończeniu.

Teraz chcemy dodać to składane menu do panelu bocznego WordPress. Aby to zrobić, użyjemy krótkich kodów, które Bellows Accordion tworzy automatycznie.

Aby uzyskać krótki kod, przejdź do strony Wygląd ” Menu mieszkowe z kokpitu WordPress. Jeśli nie jest jeszcze wybrana, upewnij się, że wybrałeś kartę „Pokaż wszystko”.

Możesz teraz kliknąć pole Krótki kod, które powinno podświetlić cały kod. Teraz skopiuj ten kod za pomocą skrótu klawiaturowego Command + c lub Ctrl + c.

Następnym krokiem jest wklejenie tego krótkiego 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 obecnym, aktualnym motywie. Wyświetlane opcje mogą się różnić, ale większość nowoczesnych motywów WordPress pełni funkcję panelu bocznego.

Po znalezieniu panelu bocznego kliknij go. Sekcja ta zostanie teraz rozwinięta.

Aby dodać blok, kliknij ikonkę + i zacznij wpisywać „Krótki kod”. Po wyświetleniu wybierz blok „Krótki kod”.

Teraz wystarczy wkleić twój krótki kod zwijanego menu do tego bloku. Aby opublikować twoje menu, musisz kliknąć przycisk „Aktualizuj” u góry ekranu.

Teraz, gdy użytkownik przejdzie na twoją witrynę, powinien zobaczyć nowe zwijane menu panelu bocznego.

Wtyczka Bellows Accordion umożliwia również bardzo łatwe dostosowanie tego domyślnego menu. Możesz na przykład zmienić jego kolorystykę, aby lepiej mieć wpływ na branding twojej witryny.

Jeśli chcesz modyfikować domyślne menu, po prostu przejdź do strony Wygląd „ Menu mieszkowe w twoim kokpicie WordPress.

To menu zawiera wszystkie ustawienia potrzebne do dostosowania twojego składanego menu. Istnieje wiele ustawień do zbadania. Możesz jednak zacząć od przejścia do Konfiguracja główna ” Konfiguracja podstawowa.

Tutaj można przełączać się między kilkoma różnymi kolorami menu. Możesz także wybrać, czy odwiedzający mogą rozwinąć wiele podmenu jednocześnie, korzystając z ustawień „Accordion Folding”.

Aby zmienić wyrównanie i szerokość menu, kliknij kartę „Układ i położenie”.

Jeśli wolisz podglądać twoje zmiany w czasie rzeczywistym, możesz edytować składane menu panelu bocznego w konfiguratorze WordPress.

Aby to zrobić, przejdź do strony Wygląd ” Dostosuj w obszarze administracyjnym i wybierz kartę „Mieszki” z lewej kolumny.

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

Bonus: WordPress Sidebar Tricks, aby uzyskać maksymalne wyniki

Po utworzeniu składanego menu paska bocznego możesz skorzystać z kilku innych wskazówek, aby wygenerować więcej potencjalnych klientów za pomocą twojego panelu bocznego.

Na przykład, twój widżet na panelu bocznym może być przypięty, dzięki czemu będzie widoczny na stronie, nawet gdy użytkownik przewinie ją w dół.

Poza tym możesz dodać formularz kontaktowy lub formularz rejestracji e-mail na twoim panelu bocznym, aby zbudować listę mailingową. Aby to zrobić, możesz użyć WPForms, która jest najlepszą wtyczką do formularzy kontakt owych na rynku.

Będziesz musiał po prostu utworzyć formularz, a następnie dodać go do twojego panelu bocznego za pomocą bloku WPForms w menu bloków.

Więcej szczegółów można znaleźć w naszym poradniku na temat tworzenia formularza kontaktowego w WordPress.

Dodatkowo możesz wyświetlać swoje najpopularniejsze wpisy na panelu bocznym, dodawać obrazki, pokazywać ikonki mediów społecznościowych i wyświetlać dowody społeczne. Zachęci to użytkowników do bliższego zapoznania się z twoją witryną i zwiększy konwersje.

Aby uzyskać więcej wskazówek, możesz zapoznać się z naszą listą najlepszych sztuczek dotyczących panelu bocznego WordPress, aby uzyskać maksymalne wyniki.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak utworzyć składane menu panelu bocznego w WordPress. Aby uzyskać więcej wskazówek dotyczących edycji wyglądu witryny WordPress, możesz również przejrzeć nasze przewodniki na temat dostosowywania nagłówka WordPress i najbardziej przydatnych widżetów WordPress dla twojej witryny.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.