Jak utworzyć pionowe menu nawigacyjne w WordPress

Dobrze zaprojektowane menu nawigacyjne jest ważne, jeśli chcesz stworzyć pozytywne doświadczenie użytkownika na swojej stronie WordPress.

Chociaż menu poziome są powszechne, pionowe menu nawigacyjne oferuje unikalny i skuteczny sposób organizacji zawartości witryny, szczególnie w przypadku witryn z wieloma stronami lub złożonymi strukturami.

Te menu mogą poprawić dostępność, ponieważ lepiej pasują do paska bocznego Twojej witryny i są łatwiejsze w nawigacji na urządzeniach mobilnych.

W tym artykule pokażemy Ci, jak łatwo stworzyć pionowe menu nawigacyjne w WordPressie.

Czym jest menu nawigacyjne?

Menu nawigacyjne to lista linków wskazujących na ważne obszary strony WordPress. Menu to jest zazwyczaj prezentowane jako poziomy pasek linków na górze każdej strony.

Menu nawigacyjne nadają Twojej witrynie strukturę i pomagają odwiedzającym znaleźć to, czego szukają. Możesz dodać linki do swoich najważniejszych stron, kategorii lub tematów, postów na blogu WordPress, a nawet dodać niestandardowe linki, takie jak profil w mediach społecznościowych.

Ale chociaż często widzisz je umieszczone poziomo na górze strony internetowej, pionowe menu nawigacyjne mają wiele zastosowań i zalet.

Pionowe menu nawigacyjne zajmuje mniej miejsca na stronie, jest łatwiejsze do przeskanowania i nawigacji, a także może być umieszczone w pasku bocznym, stopce, a nawet jako wyskakujące okienko, co czyni je bardziej elastycznym.

Na przykład, jeśli masz sklep internetowy, to użycie pionowego menu nawigacyjnego pozwoli Ci wyświetlić znacznie więcej kategorii produktów i produktów, nie zajmując zbyt wiele miejsca.

Biorąc to pod uwagę, przyjrzyjmy się kilku sposobom tworzenia pionowego menu nawigacyjnego w WordPress. Oto tematy, które omówimy w tym artykule:

• Wypróbuj różne lokalizacje wyświetlania menu
• Dodawanie pionowego menu nawigacyjnego do paska bocznego
• Tworzenie pionowego menu nawigacyjnego na poście lub stronie
• Dodawanie pionowego menu nawigacyjnego za pomocą edytora całego witryny
• Tworzenie pionowego menu nawigacyjnego za pomocą wtyczki Theme Builder
• Tworzenie responsywnego pionowego menu nawigacyjnego dla urządzeń mobilnych
• Tworzenie menu rozwijanego w WordPress
• Tworzenie Mega Menu w WordPress
• Bonus: Utwórz przyklejone pływające menu nawigacyjne w WordPress

Wypróbuj różne lokalizacje wyświetlania menu

Po dodaniu menu nawigacyjnego do witryny, zostanie ono wyświetlone pionowo lub poziomo. Zależy to od Twojego motywu, a także od wybranej lokalizacji menu.

Liczba dostępnych lokalizacji menu zależy od używanego motywu. Możesz zauważyć, że niektóre z tych lokalizacji wyświetlają menu pionowo.

Aby przetestować to z Twoim motywem, przejdź do strony Wygląd » Menu z bocznego paska administracyjnego WordPress. Tutaj możesz poeksperymentować, aby zobaczyć, które lokalizacje są dostępne na Twojej stronie i jak są wyświetlane.

Na przykład motyw Twenty Twenty-One nie oferuje żadnych lokalizacji pionowych, podczas gdy motyw Twenty Twenty oferuje jedną o nazwie „Desktop Expanded Menu”.

Możesz po prostu wybrać menu, które chcesz wyświetlić pionowo, a następnie zaznaczyć pole „Rozszerzone menu na pulpicie” u dołu ekranu.

Następnie musisz upewnić się, że klikniesz przycisk „Zapisz menu”, aby zapisać swoje ustawienia. Tak to wygląda na naszej stronie demonstracyjnej.

Więcej informacji na temat edycji menu i lokalizacji menu znajdziesz w naszym poradniku dla początkujących na temat jak dodać menu nawigacyjne w WordPress.

Dodawanie pionowego menu nawigacyjnego do paska bocznego

Niezależnie od tego, jakiego motywu używasz, łatwo jest dodać pionowe menu nawigacyjne do paska bocznego za pomocą widżetu.

Najpierw musisz utworzyć menu nawigacyjne, które chcesz wyświetlić, jeśli jeszcze tego nie zrobiłeś. Następnie musisz przejść do strony Wygląd » Widżety z panelu administracyjnego WordPress.

Stąd po prostu kliknij przycisk „+” w lewym górnym rogu strony i przeciągnij blok Menu nawigacyjne na pasek boczny.

Następnie możesz nadać widżetowi nazwę i wybrać menu, które chcesz wyświetlić z menu rozwijanego. Na koniec kliknij przycisk „Zaktualizuj” u góry, aby zapisać ustawienia.

Oto jak wygląda pionowe menu boczne w naszym blogu WordPress demonstracyjnym.

Tworzenie pionowego menu nawigacyjnego na poście lub stronie

W podobny sposób możesz dodać pionowe menu nawigacyjne do wpisów i stron.

Najpierw musisz utworzyć nowy wpis lub edytować istniejący.

Następnie kliknij przycisk „+” u góry strony, a następnie przeciągnij blok Nawigacja na stronę.

Następnie wybierz, które menu ma być wyświetlane. Po prostu kliknij przycisk „Wybierz menu” na pasku narzędzi i wybierz żądane menu.

Na koniec musisz przyjrzeć się ustawieniom bloku w panelu po prawej stronie.

Tam znajdziesz dwa przyciski do orientacji menu. Będziesz musiał kliknąć przycisk ze strzałką w dół, aby zorientować menu pionowo.

Po zakończeniu kliknij przycisk „Opublikuj” lub „Zaktualizuj”, aby zapisać swoje ustawienia.

Dodawanie pionowego menu nawigacyjnego za pomocą edytora całego witryny

Jeśli używasz motywu opartego na blokach, możesz łatwo dodać pionowe menu nawigacyjne do swojej witryny za pomocą edytora całego motywu.

Aby to zrobić, przejdź do ekranu Wygląd » Edytor z panelu administracyjnego WordPress. Po wejściu do edytora kliknij menu nawigacyjne, które pojawia się na górze nagłówka strony internetowej.

Następnie kliknij przycisk „Wybierz nawigację” na pasku narzędzi.

Teraz zobaczysz różne opcje dostosowywania menu nawigacyjnego na panelu po prawej stronie.

Jedną z tych opcji jest wybór wyświetlania menu w orientacji poziomej lub pionowej. Po prostu kliknij strzałkę w dół, aby uzyskać orientację pionową, aby utworzyć menu pionowe.

Więcej informacji znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPress.

Na koniec kliknij przycisk „Zapisz”, aby zachować swoje ustawienia. Dodałeś teraz pionowe menu nawigacyjne do swojej witryny.

Tworzenie pionowego menu nawigacyjnego za pomocą wtyczki Theme Builder

SeedProd to najlepsza wtyczka do tworzenia stron WordPress i niestandardowych motywów na rynku. Pozwala łatwo tworzyć menu pionowe w dowolnym miejscu Twojej witryny WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz wprowadzić swój klucz licencyjny. Informacje te znajdziesz na swoim koncie na stronie SeedProd.

Następnie możesz użyć SeedProd do stworzenia niestandardowego motywu WordPress.

Tworzenie niestandardowego motywu WordPress

Kreator motywów SeedProd znajdziesz, przechodząc do strony SeedProd » Kreator motywów. Tutaj użyjesz jednego z gotowych motywów SeedProd jako punktu wyjścia. Zastąpi to Twój istniejący motyw WordPress nowym, niestandardowym projektem.

Możesz to zrobić, klikając przycisk 'Motywy'.

Następnie zostanie wyświetlona lista profesjonalnie zaprojektowanych motywów dla różnych typów witryn. Na przykład dostępne są szablony o nazwach „Nowoczesny Biznes”, „Agencja Marketingowa” i „Motyw Pośrednika Kredytowego”.

Przejrzyj opcje i wybierz tę, która najlepiej odpowiada Twoim potrzebom, klikając ikonę zaznaczenia.

Po wybraniu motywu, SeedProd wygeneruje wszystkie potrzebne szablony motywu. Dowiedz się, jak dostosować te szablony w naszym przewodniku na temat jak łatwo stworzyć niestandardowy motyw WordPress.

Dodawanie pionowego menu nawigacyjnego do szablonów Twojej witryny

Teraz możesz użyć SeedProd do dodania pionowego menu nawigacyjnego do dowolnego szablonu motywu. W tym samouczku dodamy menu do szablonu indeksu bloga.

Musisz najechać kursorem myszy na ten szablon, a następnie kliknąć link 'Edytuj projekt'.

Otworzy się kreator stron metodą przeciągnij i upuść SeedProd, gdzie po prawej stronie zobaczysz podgląd swojej witryny, a po lewej panel bloków.

Stąd przewiń bloki w dół, aż dojdziesz do sekcji Zaawansowane.

Gdy znajdziesz blok Menu nawigacyjnego, powinieneś przeciągnąć go na swój pasek boczny lub w dowolne miejsce, w którym chcesz wyświetlić menu nawigacyjne. Domyślnie w menu znajduje się tylko jedna pozycja: „O nas”.

Teraz musisz zmienić ustawienia menu. Aby to zrobić, kliknij na menu, a dostępne opcje zostaną wyświetlone w lewej kolumnie.

Obecnie wybrany jest typ menu „Proste”. Pozwala to na samodzielne tworzenie menu nawigacyjnego w SeedProd.

Jednak w tym samouczku klikniemy typ „Menu WordPress”, aby zamiast tego użyć menu nawigacyjnego WordPress.

Na koniec musisz kliknąć zakładkę „Zaawansowane”. Znajdziesz tam opcję ustawienia układu listy pionowo lub poziomo.

Po kliknięciu przycisku „Pionowe” zauważysz, że podgląd natychmiast zmienia się na pionowe menu nawigacyjne.

Nie zapomnij kliknąć przycisku „Zapisz” u góry ekranu, aby zapisać swoje pionowe menu.

Tworzenie responsywnego pionowego menu nawigacyjnego dla urządzeń mobilnych

Może być trudno dotknąć standardowego menu podczas korzystania z małego ekranu smartfona. Dlatego zalecamy podgląd wersji mobilnej swojej witryny WordPress, aby zobaczyć, jak Twoja witryna wygląda na urządzeniach mobilnych.

Menu pionowe są znacznie łatwiejsze w nawigacji, zwłaszcza gdy używasz responsywnego menu na pełnym ekranie, które automatycznie dostosowuje się do różnych rozmiarów ekranu.

Aby dowiedzieć się, jak ułatwić korzystanie z menu nawigacyjnego na urządzeniach mobilnych, zapoznaj się z naszym przewodnikiem jak dodać responsywne menu na pełnym ekranie w WordPress.

Tworzenie menu rozwijanego w WordPress

Menu rozwijane wygląda jak normalne poziome menu nawigacyjne u góry ekranu. Ale gdy najedziesz myszką na jedną z pozycji, wyświetli się pionowe podmenu.

Jeśli masz stronę internetową z dużą ilością treści, menu rozwijane pozwala na organizację struktury menu według tematów lub hierarchii. Pozwoli to wyświetlić więcej treści na ograniczonej przestrzeni.

Aby wyświetlić menu nawigacyjne rozwijane na swojej stronie, będziesz musiał wybrać motyw z obsługą menu rozwijanych. Następnie musisz utworzyć menu nawigacyjne, a następnie dodać podpozycje do niektórych wpisów menu.

Dowiesz się, jak to zrobić krok po kroku w naszym przewodniku dla początkujących na temat tworzenia menu rozwijanego w WordPress.

Tworzenie Mega Menu w WordPress

Menu typu mega wyświetla wiele menu pionowo na stronie. Są one podobne do menu rozwijanych, z tą różnicą, że wszystkie podmenu są wyświetlane jednocześnie, co pozwala użytkownikom szybko i łatwo znaleźć Twoje najlepsze treści.

Mega menu są bardzo angażujące i interaktywne, ponieważ łączą najlepsze cechy menu poziomego i pionowego, aby wyświetlić pomocny przegląd zawartości Twojej witryny na jednym ekranie.

Niedawno dodaliśmy mega menu do WPBeginner, aby poprawić wykrywalność treści. Wyjaśniamy, jak to zrobiliśmy w naszym spojrzeniu za kulisy naszego nowego projektu strony.

Więcej informacji znajdziesz w naszym przewodniku jak dodać mega menu do swojej strony WordPress.

Bonus: Utwórz przyklejone pływające menu nawigacyjne w WordPress

Możesz również stworzyć przyklejone, pływające menu nawigacyjne dla swojej strony internetowej, aby zwiększyć zaangażowanie użytkowników. Przyklejone menu pozostaje widoczne na ekranie nawet podczas przewijania strony w dół, co ułatwia użytkownikom dostęp do niego.

Aby Twoje menu nawigacyjne było „lepkie” (sticky), musisz zainstalować i aktywować wtyczkę Sticky Menu & Sticky Header. Szczegółowe informacje znajdziesz w naszym przewodniku krok po kroku na temat instalacji wtyczki WordPress.

Po aktywacji przejdź do strony Ustawienia » Menu przyklejone i wpisz #main-navigation obok opcji „Element przyklejony (wymagane)”. W ten sposób możesz nawet sprawić, że Twoje pionowe menu nawigacyjne będzie przyklejone.

Po zakończeniu kliknij „Zapisz zmiany”, aby zapisać swoje ustawienia. Więcej instrukcji znajdziesz w naszym poradniku na temat tworzenia przyklejonego, pływającego menu nawigacyjnego w WordPressie.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak utworzyć pionowe menu nawigacyjne w WordPress. Możesz również dowiedzieć się, jak ukryć menu mobilne w WordPress lub zapoznać się z naszym poradnikiem na temat jak dodać ikony obrazkowe do menu nawigacyjnych w WordPress.

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.