Jak stworzyć składane menu paska bocznego w WordPress (Łatwy sposób)

Opublikowany: 2022-04-12

Czy chcesz utworzyć składane menu paska bocznego w WordPressie?

Składane menu może zapewnić odwiedzającym Twoją witrynę łatwy dostęp do wielu linków bez zaśmiecania paska bocznego. Jest idealny dla dużych witryn internetowych, sklepów eCommerce lub dowolnej witryny o bardziej złożonym układzie.

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

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

Co to jest składane menu paska bocznego (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 jednak być trudne w przypadku witryn, które mają wiele stron lub bardziej złożony układ.

Pomyśl o dużym sklepie eCommerce, który ma wiele kategorii i podkategorii produktów, takich jak Amazon.

Wyświetlanie każdej kategorii produktów w standardowym menu nie byłoby dobrym pomysłem. Kupujący prawdopodobnie będą musieli przewinąć menu, aby znaleźć interesującą ich kategorię.

W tym miejscu pojawiają się zwijalne menu. Te menu organizują swoją zawartość w relacji rodzic-dziecko. Jeśli odwiedzający kliknie element nadrzędny w rozwijanym menu, rozwinie się ono, wyświetlając całą zawartość podrzędną tego rodzica.

Serwis informacyjny Guardiana korzysta ze zwijanego menu na swojej stronie mobilnej.

An example of a collapsible menu.

Menu zwijane są czasami nazywane rozwijanymi menu. Dzieje się tak, ponieważ ich różne sekcje rozszerzają się, gdy odwiedzający je kliknie.

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

To powiedziawszy, przyjrzyjmy się, jak łatwo utworzyć składane menu paska bocznego w witrynie WordPress.

Jak stworzyć składane menu paska bocznego w WordPress

Możesz utworzyć zwijane menu paska bocznego w WordPress za pomocą wtyczki Bellows Accordion Menu.

Bellows Accordion Menu zapewnia przydatny skrót, dzięki któremu możesz umieścić swoje zwijane menu na dowolnej stronie, poście lub obszarze widżetów, w tym na pasku bocznym.

A collapsible sidebar menu in WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Wygląd » Menu na pulpicie WordPress.

Creating a menu in the WordPress dashboard.

Aby rozpocząć, wpisz nazwę swojego menu w polu „Nazwa menu”. Odwiedzający Twoją witrynę nie zobaczą nazwy, ponieważ służy ona wyłącznie do celów informacyjnych. Następnie możesz kliknąć przycisk Utwórz menu.

Następnie możesz wybrać strony, które chcesz dodać do rozwijanego menu. Domyślnie WordPress wyświetla tylko najnowsze strony. Jeśli chcesz zobaczyć listę wszystkich stron swojej witryny, kliknij kartę Wyświetl wszystko.

Adding pages to your WordPress menu.

Alternatywnie możesz kliknąć Wybierz wszystko. Spowoduje to dodanie wszystkich Twoich stron do rozwijanego menu.

Gdy dokonasz wyboru, kliknij przycisk „Dodaj do menu”. Możesz także wybrać posty, kategorie blogów lub dodać niestandardowe linki. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym dodawania menu nawigacyjnego w WordPress.

Po dodaniu wszystkich różnych stron internetowych do menu możesz je przenosić, przeciągając je i upuszczając. Spowoduje to zmianę kolejności wyświetlania tych stron w rozwijanym menu.

Składane menu dotyczą relacji rodzic-dziecko.

Gdy odwiedzający kliknie element nadrzędny w rozwijanym menu, rozwinie się, ujawniając całą zawartość podrzędną.

Aby utworzyć tę relację, po prostu użyj przeciągania i upuszczania, aby ułożyć wszystkie strony podrzędne pod ich stroną nadrzędną.

Następnie chwyć każde dziecko i przeciągnij je trochę w prawo. Następnie możesz zwolnić 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, gdy skończysz.

Teraz chcemy dodać to zwijane menu do paska bocznego WordPress. Aby to zrobić, użyjemy krótkiego kodu, który Bellows Accordion tworzy automatycznie.

Aby pobrać krótki kod, przejdź do Wygląd » Menu mieszkowe . Jeśli nie jest jeszcze zaznaczone, upewnij się, że wybrałeś kartę Pokaż wszystko.

The collapsible menu shortcode in the WordPress dashboard.

Możesz teraz kliknąć pole Shortcode, 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 Wygląd » Widgety . Spowoduje to wyświetlenie wszystkich widżetowych obszarów w bieżącym motywie. Widoczne opcje mogą się różnić, ale większość nowoczesnych motywów WordPress ma pasek boczny.

Configuring the collapsible sidebar menu.

Po znalezieniu obszaru paska bocznego kliknij go. Ta sekcja zostanie teraz rozszerzona.

Aby dodać blok, kliknij ikonę + i zacznij pisać Shortcode. Gdy się pojawi, wybierz blok Shortcode.

How to add a widget to the WordPress sidebar.

Teraz po prostu wklej swój składany krótki kod menu do tego bloku. Aby opublikować swoje menu, musisz kliknąć przycisk Aktualizuj u góry ekranu.

Teraz, gdy odwiedzasz swoją witrynę, powinieneś zobaczyć nowe, zwijane menu paska bocznego.

Example of a working collapsible menu

Wtyczka Bellows Accordion bardzo ułatwia dostosowanie tego domyślnego menu. Możesz na przykład zmienić schemat kolorów, aby lepiej odzwierciedlać markę witryny.

Jeśli chcesz dostosować domyślne menu, po prostu przejdź do Wygląd » Menu mieszkowe na pulpicie WordPress.

To menu zawiera wszystkie ustawienia potrzebne do dostosowania rozwijanego menu. Do zbadania jest wiele ustawień. 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żesz przełączać się między kilkoma różnymi kolorami menu. Możesz także wybrać, czy odwiedzający mogą rozwijać wiele podmenu jednocześnie, korzystając z ustawień Zwijanie harmonijkowe.

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 wyświetlać podgląd zmian w czasie rzeczywistym, możesz edytować rozwijane menu paska bocznego w dostosowywaniu WordPressa. Aby to zrobić, przejdź do Wygląd » Dostosuj .

Na pasku po lewej stronie wybierz Mieszek.

Configuring your collapsible menu in the WordPress Customizer.

Tutaj znajdziesz wiele różnych ustawień zwijanego paska bocznego. Obejmuje to zmianę jego szerokości, wyrównania i koloru menu paska bocznego.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się tworzyć składane menu paska bocznego w WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak śledzić odwiedzających Twoją witrynę, i najlepszym oprogramowaniem do powiadomień push, aby zwiększyć ruch.

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