Jak utworzyć menu nawigacyjne WordPress za pomocą 2 różnych metod

Menu nawigacyjne są jak gwiazdy przewodnie witryny internetowej. Wyobraź sobie swoją witrynę internetową jako morze pełne rzeczy, po których żeglarze mogą przepłynąć. Dlatego potrzebują nawigatora, aby z łatwością dotrzeć do wybranego celu.

W tym miejscu z pomocą przychodzą menu nawigacyjne. Odgrywają one kluczową rolę w prowadzeniu odwiedzających i zapewnianiu im bezproblemowego przeglądania Twojej witryny.

Jeśli więc jesteś właścicielem witryny lub programistą, musisz włożyć dodatkowy wysiłek i skupić się w projektowaniu przyjaznego dla użytkownika menu nawigacyjnego dla swojej witryny.

Użytkownicy WordPressa mają możliwość elastycznego projektowania menu nawigacyjnego WordPress na kilka sposobów. 

W tym przewodniku przeprowadzimy Cię przez tajniki Gutenberga i Elementora w zakresie tworzenia menu nawigacyjnego. Na końcu tego bloga będziesz mógł stworzyć i dostosować menu nawigacyjne WordPress, a także poprawić komfort użytkowania swojej witryny.

Co to jest menu nawigacyjne WordPress?

Menu nawigacyjne witryny internetowej przypomina mapę witryny i prowadzi odwiedzających po jej stronach. Menu te pojawiają się jako zestaw łączy lub przycisków zwykle wyświetlanych na stronie internetowej, zwykle u góry lub z boku. 

Pomaga poprawić dostępność i komfort korzystania z witryny internetowej, zapewniając uporządkowany sposób przeglądania stron witryny i ich zawartości.

Dzięki WordPressowi tworzenie i dostosowywanie menu dla Twojej witryny jest dość łatwe. Możesz dodawać strony, posty, niestandardowe linki, a nawet kategorie do menu nawigacyjnego WordPress.

Domyślna metoda tworzenia menu WordPress jest dość prosta. Zapewnia prosty interfejs do tworzenia menu nawigacyjnych i zarządzania nimi.

Znajdziesz jednak wiele wtyczek WordPress, które dodają zaawansowane funkcje i elastyczność w dostosowywaniu menu nawigacyjnego. Niektóre z tych wtyczek są wyposażone w intuicyjny interfejs „przeciągnij i upuść”, umożliwiający bezproblemowe organizowanie elementów menu w żądanej kolejności.

Zasadniczo menu nawigacyjne WordPress jest kluczowym elementem poprawiającym komfort korzystania z Twojej witryny, pomagając odwiedzającym szybko i skutecznie znaleźć to, czego szukają.

✅ Metoda 1: Jak utworzyć menu nawigacyjne WordPress bezpośrednio na stronie (za pomocą Gutenberga)

Konwencjonalna metoda dodawania menu nawigacyjnego polega na utworzeniu menu w panelu WordPress, a następnie włączeniu go do strony lub wpisu.

Ale przy użyciu bloków GutenKit, możesz utworzyć menu nawigacyjne WordPress bezpośrednio na stronie lub w poście. A nawet utwórz niestandardową stronę podczas tworzenia menu nawigacyjnego. Dowiedzmy się jak 👇

📢 Warunek wstępny

Aby utworzyć menu nawigacyjne WordPress bezpośrednio na stronie internetowej, musisz zainstalować i aktywować wtyczkę GutenKit na swojej stronie WordPress.

⬇️ Pobierz wtyczkę GutenKit

Ucz się także💡Jak zainstalować i aktywować wtyczkę edytora bloków GutenKit.

#️⃣ Krok 1: Wybierz blok menu nawigacji

Po zainstalowaniu wtyczki, otwórz stronę w edytorze Gutenberga (domyślny edytor WordPress).

W edytorze znajdź i wybierz GutenKit Menu nawigacji blok. Następnie dodaj menu nawigacyjne do sekcji edytora.

#️⃣ Krok 2: Dodaj pozycje menu do menu nawigacyjnego w WordPress

w Menu nawigacji bloku, możesz dodawać pozycje menu, klikając przycisk z ikoną ➕ (plus), tj Dodaj menu przycisk. 

👉 Dodanie istniejącej strony do menu nawigacyjnego

Po kliknięciu przycisku Dodaj menu wyświetli się lista istniejących stron Twojej witryny. Możesz także wyszukiwać, wpisując nazwę strony lub adres URL w polu wyszukiwania.

Poza tym masz możliwość zmiany Etykieta menu I Strona URL z paska bocznego i stron niestandardowych do menu nawigacyjnego WordPress.  

✨ Tworzenie nowych stron bezpośrednio w menu nawigacyjnym

Przykładowo, tworząc menu, nagle zorientowałem się, że zapomniałem utworzyć w serwisie zakładkę „Moje konto”. 

Zwykle więc musiałem wrócić do pulpitu nawigacyjnego i utworzyć nową stronę o nazwie „Moje konto”. Następnie wróć do edytora i dodaj tę stronę do menu nawigacyjnego.

Cóż, dzięki GutenKit ten problem został wyeliminowany!

Podczas dodawania pozycji menu wpisz nazwę strony w polu wyszukiwania. Jeśli strona nie istnieje w serwisie, strona zostanie utworzona jako wersja robocza i dodany do menu nawigacyjnego WordPress.

Później możesz edytować zawartość strony i opublikować ją w swojej witrynie.

#️⃣ Krok 3: Skonfiguruj menu nawigacyjne WordPress

W kolejnym kroku możesz skonfigurować sposób wyświetlania menu nawigacyjnego na Twojej stronie. Użyj następujących ustawień GutenKit, aby dostosować wygląd menu:

1. Punkt przerwania menu: Dostosowując menu, możesz ustawić punkt przerwania Menu dla tabletu lub telefonu komórkowego albo dodać niestandardowy punkt przerwania.
2. Blokada przewijania dla Offcanvas: Można zastosować blokadę przewijania, gdy menu pojawia się jako menu poza płótnem.
3. Wyrównaj treść: Masz wiele opcji uzasadnienia zawartości menu, takich jak Początek, Środek, Koniec itp.
4. Wyrównaj elementy: Możesz także wyrównać zawartość menu do prawej, lewej lub do środka.

🟢 Ustawienia menu mobilnego 

Za pomocą edytora bloków GutenKit możesz osobno skonfigurować wygląd menu mobilnego. W bloku menu nawigacji dostępne są następujące ustawienia.

• Logo menu mobilnego
• Link do menu
• Ikona Hamburgera

#️⃣ Krok 4: Dostosuj style menu nawigacji WordPress

Aby dostosować menu nawigacyjne GutenKit w WordPress, przejdź do Style w edytorze bloków. Na karcie Styl możesz dostosować opakowanie menu, elementy menu, hamburgera i logo menu mobilnego.

✅ Metoda 2: Jak dodać menu nawigacyjne w klasycznym edytorze WordPress

Jeśli nadal korzystasz z klasycznego edytora, musisz dodać menu nawigacyjne WordPress z poziomu Wygląd > Menu z Twojego pulpitu nawigacyjnego. Aby dodać nowe menu:

• Krok 1: Iść do Wygląd > Menu.
• Krok 2: Wejdz do Nazwa menu.
• Krok 3: Wybierz Wyświetl lokalizację.
• Krok 4: Kliknij na "Utwórz menu" przycisk.

Po utworzeniu menu możesz dodawać pozycje menu z paska bocznego.

• Krok 5: Następnie dodaj strony, posty, niestandardowe linki i kategorie do menu.
• Krok 6: Na koniec kliknij Zapisz menu przycisk.

➕ Bonus: Jak edytować menu nawigacji w WordPress przy użyciu Elementora

Jeśli jesteś użytkownikiem Elementora, możesz łatwo edytować i dostosowywać menu nawigacyjne WordPress za pomocą ElementsKit.

W edytorze Elementor przeciągnij i upuść plik Menu nawigacji ElementsKit widżet. Następnie możesz dostosować ustawienia menu, ustawienia menu urządzenia mobilnego i style menu.

#️⃣ Ustawienia menu

• Wybór menu: Po wybraniu opcji „Wybierz menu” zobaczysz aktualne opcje menu swojej witryny.
• Poziome wyrównanie menu: Określ, gdzie ma się pojawiać menu — dostępne opcje to Lewy, Środek, Prawy i Wyrównany.
• Zachowanie w menu rozwijanym: Wybierz menu rozwijane otwierane po najechaniu myszką lub kliknięciu.
• Wskaźnik podmenu: Dostosuj ikonę towarzyszącą menu nadrzędnym i ułatwiającą nawigację do podmenu. Jeśli używasz wersji Pro ElementsKit, zamiast opcji „Wskaźnik podmenu” znajdziesz funkcję ikony wskaźnika rozwijanego.

#️⃣ Ustawienia menu mobilnego

• Logo menu mobilnego: Przypisz logo specjalnie do wyświetlania mobilnego.
• Link do menu: Zachowaj domyślny link do strony głównej lub podaj niestandardowy adres URL w podanym polu. Kliknięcie w logo przekieruje użytkownika do wskazanego linku.
• Ikona Hamburgera (opcjonalnie): Wybierz ikonę z biblioteki lub prześlij własny plik SVG.
• Podmenu Kliknij obszar: Jeśli menu zawiera podmenu, wyznacz ikonę ułatwiającą nawigację w tych obszarach.

#️⃣ Style menu

Dostosowywanie opakowania menu: Tutaj możesz dostosować takie aspekty, jak wysokość menu, styl tła, dopełnienie, szerokość, promień obramowania, odstępy między ikonami i inne.

Styl pozycji menu: Dostosuj wygląd elementów menu, korzystając z opcji stylu tła, koloru, odstępów między obramowaniami, marginesów pozycji i nie tylko.

Dostosowywanie pozycji podmenu: Podobnie jak w przypadku pozycji menu, personalizuj elementy podmenu za pomocą różnych opcji stylizacji dostępnych w tej sekcji.

Projekt panelu podmenu: Rozwiń tę sekcję, aby uzyskać dostęp do wielu opcji dostosowywania i stylizacji panelu podmenu według własnych upodobań.

Stylizacja ikony hamburgera: Poznaj różne opcje stylizacji ikony hamburgera, w tym kolory, rozmiary, położenie i dodatkowe funkcje.

Dostosowywanie logo menu mobilnego: Dostosuj logo menu mobilnego do swoich preferencji, korzystając z opcji dostępnych w tej sekcji.

I to wszystko! Dzięki tym krokom możesz łatwo dodać menu nawigacyjne do swojej witryny WordPress. Jeśli chcesz uzyskać więcej informacji, koniecznie sprawdź dokumentacja widżetu ElementsKit Nav Menu dla Elementora.

Poza tym też możesz utwórz mega menu w WordPress z ElementsKit. Zawiera widżet Mega Menu dla Elementora, który umożliwia tworzenie wielowymiarowych menu o orientacji pionowej i poziomej, dzięki czemu nawigacja w witrynie jest bardziej funkcjonalna i przyjazna dla użytkownika. Korzystanie ElementsKit Mega Menu widget dla Elementora, możesz łatwo zaprojektować mega menu WordPress przy użyciu menu, które stworzyłeś na pulpicie WordPress.

Aby dowiedzieć się, jak utworzyć mega menu w Elementorze, możesz przeczytać dokumentacja mega menu lub obejrzyj film, aby uzyskać więcej szczegółów.

Podsumowanie

Postępując zgodnie ze szczegółowym przewodnikiem opisanym na tym blogu, posiadasz teraz wiedzę niezbędną do łatwego tworzenia niestandardowych menu dostosowanych do potrzeb Twojej witryny. Pamiętaj, aby struktura menu była logiczna, zwięzła i intuicyjna, aby zapewnić odwiedzającym płynną nawigację. Dzięki elastyczności i wszechstronności WordPressa możliwości tworzenia dynamicznych i angażujących menu nawigacyjnych są nieograniczone. Zatem zanurz się, eksperymentuj i wznieś nawigację swojej witryny na nowy poziom!