Jak dodać niestandardowe menu nawigacyjne w motywach WordPress

W WPBeginner pomogliśmy niezliczonym czytelnikom dostosować ich strony WordPress, aby poprawić doświadczenie użytkownika, wzmocnić markę i zwiększyć konwersje. I widzieliśmy, że gdy jest wykonane prawidłowo, jedyne w swoim rodzaju menu nawigacyjne może pomóc zwiększyć zaangażowanie i utrzymać ludzi na Twojej stronie dłużej.

Problem polega na tym, że wszystkie motywy WordPress mają ustalone lokalizacje, 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.

Kiedy używasz motywu blokowego, możesz to zrobić za pomocą Edytora Pełnej Witryny. Jednak według naszego doświadczenia istnieją lepsze opcje, które będą działać dla wszystkich typów motywów.

Na przykład, jeśli chcesz zaawansowanych dostosowań, możesz użyć potężnego kreatora stron, takiego jak SeedProd. Lub, jeśli szukasz prostego sposobu na użycie niestandardowego kodu, WPCode jest zdecydowanie najlepszym wyborem.

W tym artykule pokażemy Ci, jak dodać niestandardowe menu nawigacyjne do dowolnego obszaru Twojego motywu WordPress. Przeprowadzimy Cię przez 3 różne opcje, dzięki czemu możesz wybrać samouczek odpowiedni dla Twoich potrzeb.

Dlaczego dodawać niestandardowe menu nawigacyjne w motywach WordPress?

Menu nawigacyjne to lista linków wskazujących ważne obszary Twojej witryny. Ułatwiają one odwiedzającym znalezienie interesujących treści, co może zwiększyć liczbę wyświetleń stron i zmniejszyć współczynnik odrzuceń w WordPress.

Dokładna lokalizacja Twojego 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żesz tworzyć różne menu i wyświetlać je w różnych lokalizacjach.

Aby zobaczyć, gdzie możesz wyświetlać menu w swoim obecnym motywie WordPress, przejdź do Wygląd » Menu, a następnie spójrz na sekcję „Lokalizacja wyświetlania”.

Poniższy obraz pokazuje lokalizacje obsługiwane przez motyw Astra WordPress.

Czasami możesz chcieć wyświetlić menu w obszarze, który nie jest wymieniony jako „Lokalizacja wyświetlania” w Twoim motywie.

Mając to na uwadze, przyjrzyjmy się, jak dodać niestandardowe menu nawigacyjne do dowolnego obszaru Twojego motywu WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść do preferowanej metody:

• Metoda 1: Korzystanie z edytora pełnej witryny (tylko motywy oparte na blokach)
• Metoda 2: Użycie wtyczki Page Builder (działa ze wszystkimi motywami)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Metoda 1: Korzystanie z edytora pełnej witryny (tylko motywy oparte na blokach)

Jeśli używasz motywu blokowego, takiego jak ThemeIsle Hestia Pro, możesz dodać niestandardowe menu nawigacyjne za pomocą Edytora Pełnej Witryny (FSE) i edytora blokowego.

Aby uzyskać więcej szczegółów, możesz zapoznać się z naszym artykułem na temat najlepszych motywów WordPress do pełnej edycji 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 niestandardowe menu do dowolnego motywu WordPress, zalecamy zamiast tego użycie plugina do tworzenia stron.

Jeśli używasz motywu opartego na blokach, przejdź do Wygląd » Edytor.

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

Aby zobaczyć wszystkie dostępne opcje, po prostu wybierz „Szablony”, „Wzorce” lub „Strony”.

Teraz możesz kliknąć szablon, część szablonu lub stronę, do której chcesz dodać niestandardowe menu nawigacyjne.

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

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

W lewym górnym rogu kliknij niebieski przycisk ‘+’.

Teraz wpisz „Nawigacja” w pasku wyszukiwania.

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

Następnie kliknij, aby wybrać blok Nawigacja.

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

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

Inną opcją jest zbudowanie menu w edytorze całego serwisu poprzez dodanie stron, wpisów, niestandardowych linków i innych. Aby dodać elementy do nowego menu, wystarczy kliknąć ikonę „+”.

Otwiera to okno podręczne, w którym dodajesz dowolny wpis lub stronę i decydujesz, czy te linki powinny otwierać się w nowej karcie.

Możesz również dodać pasek wyszukiwania do menu WordPress, dodać ikony mediów społecznościowych i więcej. W wyskakującym okienku po prostu wpisz blok, który chcesz dodać do menu i wybierz odpowiednią opcję, gdy się pojawi.

Następnie możesz skonfigurować ten blok, korzystając z ustawień na minipasku narzędzi i w menu po prawej stronie. Po prostu powtórz 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 odwiedzający będą mogli wchodzić w interakcję z Twoim niestandardowym menu nawigacyjnym.

Metoda 2: Użycie wtyczki Page Builder (działa ze wszystkimi motywami)

Edytor całego obszaru roboczego pozwala dodawać menu do motywów opartych na blokach. Jednak jeśli chcesz dodać zaawansowane, w pełni konfigurowalne menu do dowolnego motywu WordPress, będziesz potrzebować wtyczki do tworzenia stron.

SeedProd to najlepszy plugin do tworzenia stron WordPress na rynku, który pozwala dostosować każdą część menu nawigacyjnego.

Mamy bogate doświadczenie w używaniu tego narzędzia do tworzenia niestandardowych menu nawigacyjnych, stron docelowych i wielu innych. Aby uzyskać więcej szczegółów, zapoznaj się z naszą pełną recenzją SeedProd.

Jeśli chodzi o strony, SeedProd oferuje ponad 350 profesjonalnie zaprojektowanych szablonów, których możesz użyć jako punktu wyjścia. Po wybraniu szablonu możesz dodać niestandardowe menu nawigacyjne do swojej witryny, korzystając z gotowego bloku Nav Menu w SeedProd.

Najpierw musisz zainstalować i aktywować plugin SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować plugin WordPress.

Po aktywacji wtyczki SeedProd poprosi o klucz licencyjny.

Te informacje znajdziesz w swoim koncie na stronie SeedProd. Po wprowadzeniu klucza kliknij przycisk „Zweryfikuj klucz”.

Po wykonaniu tej czynności przejdź do SeedProd » Strony docelowe i kliknij przycisk „Dodaj nową stronę docelową”.

Teraz możesz wybrać szablon dla swojej niestandardowej strony.

Aby pomóc Ci znaleźć odpowiedni projekt, wszystkie szablony SeedProd są zorganizowane według różnych typów kampanii, takich jak w budowie i kampanie typu lead squeeze. Możesz nawet użyć szablonów SeedProd do ulepszenia strony 404.

Aby przyjrzeć się bliżej każdemu projektowi, po prostu najedź kursorem myszy na ten szablon, a następnie kliknij ikonę lupy.

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

Używamy szablonu „Black Friday Sales Page” na wszystkich naszych obrazach, ale możesz użyć dowolnego szablonu, który chcesz.

Po wybraniu szablonu wpisz nazwę dla tej niestandardowej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz zmienić ten adres URL 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 SEO w WordPressie i pomóc wyszukiwarce pokazać stronę osobom szukającym treści podobnych do Twoich.

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

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

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

Pasek narzędzi po lewej stronie będzie teraz wyświetlał wszystkie ustawienia dla tego bloku. Na przykład, na poniższym obrazku zmieniamy tekst w bloku „Nagłówek”.

Możesz formatować tekst, zmieniać jego wyrównanie, dodawać linki i więcej, korzystając z ustawień w menu po lewej stronie.

Jeśli wybierzesz zakładkę „Zaawansowane”, uzyskasz dostęp do jeszcze większej liczby ustawień. Na przykład, możesz sprawić, że blok naprawdę się wyróżni, dodając cienie pudełka i animacje CSS.

Aby dodać nowe bloki do swojego 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 ikony kosza.

Ponieważ chcemy utworzyć niestandardowe menu nawigacyjne, przeciągnij blok „Menu nawigacyjne” na stronę.

Tworzy to menu nawigacyjne z jednym domyślnym elementem „O nas”.

Możesz teraz albo utworzyć nowe menu w edytorze SeedProd, albo wybrać menu, które już utworzyłeś w panelu administracyjnym 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żesz zmienić rozmiar czcionki, wyrównanie tekstu i inne opcje, korzystając z ustawień w menu po lewej stronie.

Jeśli chcesz utworzyć nowe menu w SeedProd, wybierz przycisk „Proste”.

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

Otwiera to pewne kontrolki, gdzie można zmienić tekst i dodać adres URL, do którego będzie prowadził element menu.

Domyślnie link będzie miał atrybut „dofollow” i otworzy się w tym samym oknie przeglądarki. Możesz zmienić te ustawienia, korzystając z pól wyboru w sekcji „Link URL”.

Na poniższym obrazku tworzymy link „nofollow”, który otworzy się w nowym oknie. Więcej na ten temat znajdziesz w naszym przewodniku dla początkujących dotyczącym linków nofollow.

Aby dodać więcej elementów do menu, po prostu kliknij przycisk „Dodaj nowy element”.

Następnie możesz dostosować każdy z tych elementów, postępując zgodnie z tym samym procesem opisanym powyżej.

Menu po lewej stronie zawiera również ustawienia, które zmieniają rozmiar czcionki i wyrównanie tekstu.

Możesz nawet utworzyć separator, który pojawi się między każdym elementem menu.

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

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

Domyślnie SeedProd wyświetla to samo menu na urządzeniach mobilnych i komputerach stacjonarnych. Jednak urządzenia mobilne zazwyczaj mają znacznie mniejsze ekrany w porównaniu do komputerów stacjonarnych.

Mając to na uwadze, możesz chcieć utworzyć oddzielne menu do wyświetlania na urządzeniach mobilnych. Na przykład, możesz użyć układu pionowego, aby użytkownicy mobilni nie musieli przewijać w poziomie. Możesz również chcieć wyświetlać mniej linków na smartfonach i tabletach.

Aby stworzyć menu gotowe na urządzenia mobilne, po prostu zaprojektuj menu, postępując zgodnie z powyższym procesem. Następnie wybierz zakładkę „Zaawansowane” i kliknij, aby rozwinąć sekcję „Widoczność urządzenia”.

Możesz teraz włączyć suwak „Ukryj na pulpicie”.

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

Kiedy będziesz zadowolony z wyglądu swojego niestandardowego menu, czas je opublikować.

Po prostu kliknij strzałkę rozwijaną obok „Zapisz”, a następnie wybierz „Opublikuj”.

Teraz, jeśli odwiedzisz swojego bloga WordPress, zobaczysz niestandardowe menu nawigacyjne w akcji.

Metoda 3: Utwórz niestandardowe menu nawigacyjne w WordPress przy użyciu kodu (zaawansowane)

Jeśli nie chcesz konfigurować wtyczki do tworzenia stron, możesz dodać niestandardowe menu nawigacyjne za pomocą kodu. Często znajdziesz przewodniki z instrukcjami, jak dodawać niestandardowe fragmenty kodu do pliku functions.php swojego motywu.

Jednak nie zalecamy tej metody, ponieważ nawet niewielki błąd w kodzie może spowodować szereg typowe błędy WordPress lub nawet całkowicie zepsuć Twoją witrynę. Utracisz również niestandardowy kod podczas aktualizacji motywu WordPress.

Dlatego polecamy używanie WPCode. Jest to najprostszy i najbezpieczniejszy sposób dodawania niestandardowego kodu w WordPress bez konieczności edycji plików rdzeniowych WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment w swoim panelu WordPress.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu, które możesz dodać do swojej witryny.  Obejmują one fragment, który pozwala na całkowite wyłączenie komentarzy, przesyłanie typów plików, których WordPress zazwyczaj nie obsługuje, wyłączenie stron załączników i wiele więcej.

Aby utworzyć własny fragment kodu, najedź kursorem myszy na „Dodaj własny kod (nowy fragment kodu)”, a następnie kliknij przycisk „+ Dodaj własny fragment kodu”.

Następnie musisz wybrać typ kodu z listy dostępnych opcji. W tym samouczku wybierz „Fragment PHP” jako typ kodu.

Zostaniesz teraz przekierowany na stronę Utwórz niestandardowy fragment.

Aby rozpocząć, wprowadź tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu administracyjnym WordPress.

Gdy to zrobisz, po prostu wklej poniższy fragment 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 dodanie nowej lokalizacji menu do Twojego motywu o nazwie „Moje niestandardowe menu”. Aby użyć innej nazwy, po prostu dostosuj fragment kodu.

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

Na przykład, tutaj dodajemy dwie nowe lokalizacje menu do naszego motywu, nazywane „Moje niestandardowe 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 „Wstawianie”. Jeśli nie jest jeszcze zaznaczona, wybierz metodę „Automatyczne wstawianie”, aby WPCode dodał fragment kodu na całej Twojej stronie.

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

Teraz jesteś gotowy, aby przewinąć ekran do góry i kliknąć przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz”, aby ten fragment kodu stał się aktywny.

Następnie przejdź do Wygląd » Menu i spójrz na obszar „Lokalizacja wyświetlania”.

Powinieneś teraz zobaczyć nową opcję „Moje niestandardowe menu”.

Możesz teraz dodać pozycje menu do nowej lokalizacji. Więcej informacji znajdziesz w naszym przewodniku krok po kroku na temat dodawania menu nawigacyjnych dla początkujących.

Gdy będziesz zadowolony z menu, następnym krokiem jest dodanie go do swojego motywu WordPress.

Dodawanie niestandardowego menu nawigacyjnego do Twojego motywu WordPress

Większość stron 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ć niestandardowe menu nawigacyjne w dowolnym miejscu, dodając kod do pliku szablonu motywu.

W swoim panelu WordPress przejdź do Wygląd » Edytor plików motywu.

W menu po prawej stronie wybierz szablon, do którego chcesz dodać menu. Na przykład, jeśli chcesz wyświetlić niestandardowe menu nawigacyjne w nagłówku swojej witryny, zazwyczaj wybierzesz plik header.php.

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

Po wybraniu pliku musisz dodać funkcję wp_nav_menu i określić nazwę swojego niestandardowego menu.

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

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

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

Teraz, jeśli odwiedzisz swoją witrynę, zobaczysz niestandardowe menu w akcji.

Domyślnie Twoje menu będzie wyświetlane jako zwykła lista punktowana.

Możesz dostosować menu nawigacyjne, aby lepiej pasowało do Twojego motywu WordPress lub brandingu firmy, dodając niestandardowy kod CSS do swojej witryny.

Aby to zrobić, przejdź do Wygląd » Dostosuj.

W narzędziu do dostosowywania motywów WordPress kliknij „Dodatkowy CSS”.

Otwiera to mały edytor kodu, w którym można wpisać kod CSS.

Teraz możesz stylizować swoje 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;
}

Dostosowywanie WordPressa zaktualizuje się automatycznie.

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

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

Więcej informacji można znaleźć w naszym przewodniku na temat stylizowania menu nawigacyjnych WordPress.

Eksperckie poradniki: Zrób więcej z menu nawigacyjnych WordPress

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

• Jak dodać ikony obrazkowe do menu nawigacyjnych w WordPressie
• Jak dodać logikę warunkową do menu w WordPress (krok po kroku)
• Jak dodać opisy menu w motywach WordPress
• Jak dodać pełnoekranowe responsywne menu w WordPress
• Jak dodać mega menu na swojej stronie WordPress (krok po kroku)

Mamy nadzieję, że ten obszerny przewodnik pomógł Ci nauczyć się, jak dodać niestandardowe menu nawigacyjne w WordPress. Możesz również zapoznać się z naszymi przewodnikami na temat dodawania przycisku w menu nagłówka WordPress lub wyróżniania elementu menu 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.