Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz utworzyć składane menu panelu bocznego w WordPress?

Składane menu może zapewnić odwiedzającym twoją witrynę łatwy dostęp do wielu odnośników bez zaśmiecania panelu bocznego. Jest to idealne rozwiązanie dla dużych witryn internetowych, sklepów e-handel lub innych witryn o bardziej złożonym układzie.

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

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

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 wiele 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ą swoje treści w relacji nadrzędny-podrzędny. 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.

Serwis informacyjny Guardian używa składanego menu na swojej witrynie mobilnej.

An example of a collapsible menu.

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.

A collapsible sidebar menu in WordPress.

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.

Creating a menu in the WordPress dashboard.

Na początek wpisz nazwę twojego menu w polu „Nazwa menu”. 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”.

Adding pages to your WordPress menu.

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

Gdy będziesz zadowolony ze swojego wyboru, kliknij przycisk „Dodaj do menu”. Możesz także wybrać wpisy i kategorie bloga 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ą.

Adding posts to the WordPress menu.

Nie zapomnij kliknąć przycisku „Zapisz zmiany” 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 pobrać 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”.

The collapsible menu shortcode in the WordPress dashboard.

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.

Configuring the collapsible sidebar menu.

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.

How to add a widget to the WordPress sidebar.

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.

Example of a working collapsible menu

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.

Configuring the look and feel of your WordPress collapsible sidebar menu.

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ń składania akordeonu.

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

Placing the collapsible menu on the WordPress website.

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.

Configuring your collapsible menu in the WordPress Customizer.

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.

Add WPForms widget block

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. Możesz również zapoznać się z naszym przewodnikiem na temat śledzenia odwiedzających twoją witrynę internetową i najlepszym oprogramowaniem do powiadomień push, aby zwiększyć ruch.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

6 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Thanks for this guide, if I understand you correctly, that means the plugin will generate a shortcode that can be placed at anywhere in the site even inside a post ?

    • WPBeginner Comments says

      While you could try using the shortcode in other locations, even if it works it may or may not display in a useful way.

  3. Jiří Vaněk says

    For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.

  4. Tamie says

    Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.