Jak dodać własne menu nawigacji w motywie WordPress?

W WPBeginner pomogliśmy niezliczonym klientom dostosować ich witryny WordPress, aby poprawić wrażenia użytkownika, wzmocnić branding i zwiększyć konwersje. Przekonaliśmy się, że dobrze zaprojektowane, jedyne w swoim rodzaju menu nawigacyjne może pomóc zwiększyć zaangażowanie i zatrzymać użytkowników na twojej witrynie na dłużej.

Problem polega na tym, że wszystkie motywy WordPress mają ustawione miejsca, w których można wyświetlać menu nawigacyjne, więc zmiana tego może być trudna. Jest to szczególnie prawdziwe, jeśli jesteś początkującym, ponieważ modyfikowanie plików motywu jest delikatnym procesem.

Jeśli korzystasz z motywu blokowego, możesz to zrobić za pomocą Edytora całej witryny. Z naszego doświadczenia wynika jednak, że istnieją lepsze opcje, które sprawdzą się w przypadku wszystkich rodzajów motywów.

Na przykład, jeśli chcesz zaawansowanych konfiguratorów, możesz użyć potężnego kreatora stron, takiego jak SeedProd. A jeśli szukasz prostego sposobu na użycie własnego konfiguratora, WPCode jest zdecydowanie najlepszym wyborem.

W tym artykule pokażemy, jak dodać własne menu nawigacyjne do dowolnego obszaru twojego motywu WordPress. Przeprowadzimy cię przez 3 różne opcje, abyś mógł wybrać poradnik, który jest odpowiedni dla twoich potrzeb.

Dlaczego warto dodawać własne menu nawigacyjne w motywach WordPress?

Menu nawigacyjne to lista odnośników kierujących do ważnych obszarów twojej witryny internetowej. Ułatwiają one odwiedzającym znalezienie interesujących treści, co może zwiększyć liczbę odsłon i zmniejszyć współczynnik odrzuceń w WordPress.

Dokładne położenie menu będzie się różnić w zależności od twojego motywu WordPress. Większość motywów ma kilka opcji, dzięki czemu można tworzyć różne menu i wyświetlać je w różnych lokalizacjach.

Aby zobaczyć, gdzie można wyświetlać menu w twoim obecnym, aktualnym motywie WordPress, po prostu przejdź do Wygląd ” Menu, a następnie spójrz na sekcję „Miejsce wyświetlania”.

Poniższy obrazek przedstawia lokalizacje, które są obsługiwane przez motyw Astra WordPress.

Czasami możesz chcieć wyświetlić menu w obszarze, który nie jest wymieniony jako „Wyświetlane położenie” w twoim motywie.

Mając to na uwadze, przyjrzyjmy się, jak dodać własne menu nawigacyjne do dowolnego obszaru twojego motywu WordPress. Skorzystaj z poniższych odnośników, aby przejść do preferowanej metody:

Metoda 1: Korzystanie z pełnego edytora witryny (tylko motywy blokowe)

Jeśli korzystasz z motywu blokowego, takiego jak ThemeIsle Hestia Pro, możesz dodać własne menu nawigacyjne za pomocą Full Site Editing (FSE) i edytora bloków.

Więcej szczegółów można znaleźć w naszym artykule na temat najlepszych motywów WordPress do edycji całej witryny.

Ta metoda nie działa z każdym motywem i nie pozwala na dostosowanie każdej części menu. Jeśli chcesz dodać całkowicie dostosowane menu do dowolnego motywu WordPress, zalecamy użycie wtyczki do tworzenia stron.

Jeśli korzystasz z motywu opartego na blokach, przejdź do sekcji Wygląd „ Edytor.

Domyślnie pełny edytor witryny wyświetla szablon główny twojego motywu, ale możesz dodać menu nawigacyjne do dowolnego obszaru.

Aby zobaczyć wszystkie dostępne opcje, wystarczy wybrać opcję „Szablony”, „Wzorce” lub „Strony”.

Możesz teraz kliknąć szablon, fragment szablonu lub stronę, na której chcesz dodać własne menu nawigacyjne.

WordPress wyświetli teraz podgląd szablonu. Aby edytować ten szablon, kliknij małą ikonkę ołówka.

Następnym krokiem jest dodanie bloku nawigacji do obszaru, w którym chcesz wyświetlić twoje menu.

W lewym górnym rogu kliknij niebieski przycisk „+”.

Teraz przejdź dalej i wpisz „Nawigacja” w pasku wyszukiwania.

Gdy pojawi się blok „Nawigacja”, po prostu przeciągnij go i upuść na twój układ.

Następnie kliknij, aby wybrać blok Nawigacja.

Jeśli utworzyłeś już menu, które chcesz wyświetlić, kliknij, aby wybrać blok Nawigacja. W menu po prawej stronie kliknij ikonkę z trzema kropkami obok „Menu”.

Następnie możesz wybrać menu z listy rozwijanej.

Inną opcją jest zbudowanie menu wewnątrz edytora całej witryny poprzez dodanie stron, wpisów, własnych odnośników i innych. Aby utworzyć nowe menu, wystarczy kliknąć ikonkę „+”.

Otwiera to okienko, w którym można dodać dowolny wpis lub stronę i zdecydować, czy odnośniki te mają otwierać się w nowej karcie.

Możesz także dodać pasek wyszukiwania do menu WordPress, dodać ikonki mediów społecznościowych i nie tylko. W wyskakującym okienku wystarczy wpisać rodzaj bloku, który chcesz dodać do menu i wybrać odpowiednią opcję, gdy się pojawi.

Następnie można skonfigurować ten blok za pomocą ustawień na mini pasku narzędzi i w menu po prawej stronie. Wystarczy powtórzyć te kroki, aby dodać więcej elementów do menu.

Gdy będziesz zadowolony z wyglądu menu, po prostu kliknij przycisk „Zapisz”.

Twoja witryna będzie teraz korzystać z nowego szablonu, a klienci będą mogli korzystać z własnego menu nawigacyjnego.

Metoda 2: Korzystanie z wtyczki Page Builder (działa ze wszystkimi motywami)

Pełny edytor witryn umożliwia dodawanie menu do motywów opartych na blokach. Jeśli jednak chcesz dodać zaawansowane, w pełni konfigurowalne menu do dowolnego motywu WordPress, będziesz potrzebować wtyczki do tworzenia stron.

SeedProd to najlepsza na rynku wtyczka do tworzenia stron WordPress, która pozwala dostosować każdą część twojego menu nawigacyjnego.

Mamy duże doświadczenie w korzystaniu z tego narzędzia do tworzenia własnych menu nawigacyjnych, stron docelowych i wielu innych. Aby uzyskać więcej informacji, zapoznaj się z naszą pełną recenzją SeedProd.

Jeśli chodzi o strony, SeedProd zawiera ponad 350 profesjonalnie zaprojektowanych szablonów, których możesz użyć jako punktu wyjścia. Po wybraniu szablonu możesz dodać własne menu nawigacyjne do twojej witryny za pomocą gotowego bloku Nav Menu SeedProd.

Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczki, SeedProd poprosi o twój klucz licencyjny.

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpiszeniu klucza kliknij przycisk „Zweryfikuj klucz”.

Gdy już to zrobisz, przejdź do SeedProd ” Landing Pages i kliknij przycisk „Utwórz nową stronę docelową”.

Możesz teraz wybrać szablon dla twojej własnej strony.

Aby pomóc w znalezieniu odpowiedniego projektu, wszystkie szablony SeedProd są podzielone na różne rodzaje kampanii, takie jak kampanie ” coming soon ” i „lead squeeze”. Możesz nawet użyć szablonów SeedProd, aby ulepszyć twoją stronę 404.

Aby przyjrzeć się bliżej dowolnemu szablonowi, po prostu najedź na niego kursorem myszy, a następnie kliknij ikonkę lupy.

Gdy znajdziesz projekt, którego chcesz użyć, kliknij „Wybierz ten szablon”.

We wszystkich naszych obrazkach używamy szablonu „Black Friday Sales Page”, ale możesz użyć dowolnego szablonu.

Po wybraniu szablonu wpisz nazwę tej własnej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale można go zmienić na dowolny inny.

Na przykład możesz dodać odpowiednie słowa kluczowe, aby pomóc wyszukiwarkom zrozumieć, o czym jest strona. Może to poprawić Twoje WordPress SEO i pomóc wyszukiwarce pokazać stronę osobom, które szukają treści takich jak Twoja.

Po wpiszeniu tych informacji kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Większość szablonów zawiera już pewne bloki, które są rdzeniem wszystkich układów strony SeedProd.

Aby dostosować blok, wystarczy kliknąć, aby wybrać go w edytorze strony.

Pasek narzędzi po lewej stronie pokaże teraz wszystkie ustawienia dla tego bloku. Na przykład na poniższym obrazku zmieniamy tekst wewnątrz bloku „Nagłówek”.

Możesz formatować tekst, zmieniać jego wyrównanie, dodawać odnośniki i nie tylko, korzystając z ustawień w menu po lewej stronie.

Jeśli wybierzesz kartę „Zaawansowane”, uzyskasz dostęp do jeszcze większej liczby ustawień. Możesz na przykład sprawić, by blok naprawdę się wyróżniał, dodając cienie i animacje CSS.

Aby utworzyć nowe bloki do twojego projektu, po prostu znajdź dowolny blok w menu po lewej stronie, a następnie przeciągnij go na stronę. Jeśli chcesz usunąć blok, kliknij, aby go zaznaczyć, a następnie użyj ikonki kosza.

Ponieważ chcemy utworzyć własne menu nawigacyjne, przeciągnij blok „Nav Menu” na stronę.

Spowoduje to utworzenie menu nawigacyjnego z jednym domyślnym elementem „Informacje”.

Możesz teraz utworzyć nowe menu w edytorze SeedProd lub wybrać menu, które już utworzyłeś w kokpicie WordPress.

Aby wyświetlić wcześniej utworzone menu, kliknij przycisk „Menu WordPress”. Możesz teraz otworzyć menu rozwijane „Menu” i wybrać dowolną opcję z listy.

Następnie można zmienić wielkość litery, wyrównanie tekstu i inne elementy, korzystając z ustawień w menu po lewej stronie.

Jeśli zamiast tego chcesz utworzyć nowe menu wewnątrz SeedProd, wybierz przycisk „Proste”.

Następnie kliknij, aby rozwinąć element „About”, który SeedProd tworzy domyślnie.

Otwiera to kilka kontrolek, w których można zmienić tekst i dodać adres URL, do którego będzie odnośnik.

Domyślnie odnośnik będzie „dofollow” i otworzy się w tym samym oknie przeglądarki. Ustawienia te można zmienić za pomocą pól wyboru w sekcji „Adres URL odnośnika”.

Na poniższym obrazku tworzymy odnośnik „nofollow”, który otworzy się w nowym oknie. Więcej informacji na ten temat można znaleźć w naszym przewodniku dla początkujących na temat odnośników nofollow.

Aby dodać więcej pozycji do menu, wystarczy kliknąć przycisk „Dodaj nową pozycję”.

Następnie można dostosować każdy z tych elementów, wykonując ten sam proces opisany powyżej.

Menu po lewej stronie zawiera również ustawienia zmieniające wielkość liter i wyrównanie tekstu.

Możesz nawet utworzyć separator, który pojawi się między każdą pozycją w menu.

Następnie przejdź do karty „Zaawansowane”. Tutaj możesz zmienić kolory menu, odstępy, typografię i inne zaawansowane opcje.

W miarę wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda dobrze w twoim projekcie.

Domyślnie SeedProd wyświetla to samo menu na urządzeniach mobilnych i stacjonarnych. Jednak urządzenia mobilne mają zazwyczaj znacznie mniejsze ekrany niż komputery stacjonarne.

Mając to na uwadze, warto utworzyć osobne menu do wyświetlania na urządzeniach mobilnych. Na przykład, możesz użyć pionowego układu, aby użytkownicy mobilni nie musieli przewijać strony na boki. Możesz również wyświetlić mniej odnośników na smartfonach i tabletach.

Aby utworzyć menu dostosowane do urządzeń mobilnych, wystarczy zaprojektować menu zgodnie z tym samym procesem opisanym powyżej. Następnie wybierz kartę „Zaawansowane” i kliknij, aby rozwinąć sekcję „Widoczność dla urządzeń”.

Można teraz włączyć pokaz slajdów „Ukryj na pulpicie”.

Teraz SeedProd pokaże to menu tylko użytkownikom mobilnym.

Kiedy będziesz zadowolony z wyglądu twojego własnego menu, nadszedł czas, aby je opublikować.

Wystarczy kliknąć strzałkę rozwijaną obok opcji „Zapisz”, a następnie wybrać opcję „Opublikuj”.

Teraz, jeśli przejdziesz na swojego bloga WordPress, zobaczysz własne menu nawigacyjne w działaniu.

Metoda 3: Tworzenie własnego menu nawigacji w WordPress przy użyciu kodu (zaawansowane)

Jeśli nie chcesz konfigurować wtyczki kreatora stron, możesz dodać własne menu nawigacyjne za pomocą kodu. Często można znaleźć przewodniki z instrukcjami dodawania własnych fragmentów kodu do pliku functions.php twojego motywu.

Nie zalecamy jednak tej metody, ponieważ nawet niewielki błąd w twoim kodzie może spowodować wiele typowych błędów WordPressa lub nawet całkowicie zepsuć twoją witrynę. Utracisz również własny kod, gdy zaktualizujesz swój motyw WordPress.

Dlatego zalecamy korzystanie z WPCode. Jest to najłatwiejszy i najbezpieczniejszy sposób dodawania własnego kodu w WordPressie bez konieczności edytowania jakichkolwiek rdzennych plików WordPressa.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź do Code Snippets „ Add Snippet w twoim kokpicie WordPress.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu, które możesz dodać do swojej witryny. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączyć strony załączników i wiele więcej.

Aby utworzyć własny fragment kodu, najedź kursorem myszy na „Dodaj własny kod”, a następnie kliknij „Użyj fragmentu kodu”.

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w twoim kokpicie WordPress.

Następnie otwórz listę rozwijaną „Rodzaj kodu” i wybierz „Fragment kodu PHP”.

Gdy już to zrobisz, po prostu wklej poniższy fragment kodu do edytora kodu:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Spowoduje to utworzenie nowego położenia menu w twoim motywie o nazwie „Moje własne menu”. Aby użyć innej nazwy, wystarczy zmodyfikować fragment kodu.

Jeśli chcesz dodać więcej niż jedno własne menu nawigacyjne do twojego motywu, po prostu dodaj dodatkową linię do fragmentu kodu.

Na przykład tutaj dodajemy dwa nowe położenia menu do naszego motywu, o nazwach „Moje własne menu” i „Dodatkowe menu:”.

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Następnie przewiń do opcji „Wstaw”. Jeśli nie jest jeszcze wybrana, wybierz metodę „Automatyczne wstawienie”, aby WPCode dodał fragment kodu w całej twojej witrynie.

Następnie otwórz menu rozwijane „Lokalizacja” i kliknij „Uruchom wszędzie”.

Następnie możesz przewinąć ekran do góry i kliknąć przełącznik „Nieaktywne”, aby zmienił się na „Aktywne”.

Na koniec kliknij „Zapisz”, aby uruchomić ten fragment kodu.

Następnie przejdź do Wygląd ” Menu i spójrz na obszar „Wyświetl lokalizację”.

Powinieneś teraz zobaczyć nową opcję „Moje własne menu”.

Możesz teraz przejść dalej i dodać kilka pozycji menu do nowego położenia. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat dodawania menu nawigacyjnych dla początkujących.

Kiedy jesteś zadowolony z twojego menu, następnym krokiem jest dodanie go do twojego motywu WordPress.

Dodawanie własnego menu nawigacyjnego do twojego motywu WordPress

Większość witryn internetowych wyświetla menu nawigacyjne bezpośrednio pod sekcją nagłówka. Oznacza to, że menu jest jedną z pierwszych rzeczy, które widzą odwiedzający, wraz z logo witryny lub tytułem.

Możesz dodać własne menu nawigacyjne do dowolnego położenia, dodając kod do pliku szablonu twojego motywu.

W twoim kokpicie WordPress przejdź do Wygląd ” Edytor plików motywu.

W menu po prawej stronie wybierz szablon, w którym chcesz dodać menu. Na przykład, jeśli chcesz wyświetlić własne menu nawigacyjne w nagłówku twojej witryny internetowej, zazwyczaj wybierasz plik header.php.

Aby uzyskać pomoc w znalezieniu odpowiedniego pliku szablonu, zapoznaj się z naszym przewodnikiem na temat tego, jak znaleźć pliki do edycji w twoim motywie WordPress.

Po wybraniu pliku należy dodać funkcję wp_nav_menu i określić nazwę twojego własnego menu.

Na przykład w poniższym fragmencie kodu dodajemy „Moje własne menu” do nagłówka motywu:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Po dodaniu kodu kliknij przycisk „Aktualizuj plik”, aby zapisać twoje zmiany.

Teraz, jeśli przejdziesz na swoją witrynę, zobaczysz własne menu w działaniu.

Domyślnie twoje menu będzie wyświetlane jako zwykła lista wypunktowana.

Niestandardowe menu nawigacyjne można dostosować do własnego motywu WordPress lub marki firmy, dodając niestandardowy kod CSS do witryny.

Aby to zrobić, przejdź do Wygląd ” Konfigurator.

W konfiguratorze motywu WordPress kliknij „Dodatkowe CSS”.

Spowoduje to otwarcie małego edytora kodu, w którym można wpisać rodzaj kodu CSS.

Możesz teraz nadać styl twojemu menu za pomocą klasy CSS, którą dodałeś do szablonu motywu. W naszym przykładzie jest to .custom_menu_class.

W poniższym kodzie dodajemy marginesy i dopełnienie, ustawiamy kolor tekstu na czarny i układamy elementy menu w układzie poziomym:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

Konfigurator WordPress zaktualizuje się automatycznie.

Pokaże teraz, jak menu będzie wyglądać z nowym stylem.

Jeśli jesteś zadowolony z wyglądu menu, kliknij „Opublikuj”, aby wprowadzić twoje zmiany.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat stylizacji menu nawigacyjnych WordPress.

Przewodnik eksperta: Zrób więcej dzięki menu nawigacji WordPress

Dzięki WordPress możesz tworzyć wszelkiego rodzaju pomocne i angażujące menu. Mając to na uwadze, oto kilka przewodników ekspertów, które pomogą Ci jeszcze lepiej wykorzystać Twoje menu nawigacyjne:

• Jak dodać ikonki z obrazkami do menu nawigacji w WordPress?
• Jak dodać logikę warunkową do menu w WordPress (krok po kroku)
• Jak dodać opisy menu w twoim motywie WordPress?
• Jak dodać pełnoekranowe menu responsywne w WordPress?
• Jak dodać Mega Menu na twojej witrynie WordPress (krok po kroku)

Mamy nadzieję, że ten przewodnik pomógł ci dowiedzieć się, jak dodać własne menu nawigacyjne w WordPress. Zachęcamy również do zapoznania się z naszymi przewodnikami na temat dodawania przycisków w twoim menu nagłówków WordPress lub podświetlania pozycji menu w WordPress.

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.