Jak dodać niestandardowe menu nawigacji w WordPress Themes

Czy chcesz dodać niestandardowe menu nawigacji w swoim szablonie WordPress? Menu nawigacyjne to pozioma lista linków wyświetlanych na górze większości stron internetowych.

Domyślnie motywy WordPress mają wstępnie zdefiniowane lokalizacje menu i układy, ale co, jeśli chcesz dodać własne niestandardowe menu nawigacyjne?

W tym artykule pokażemy, jak łatwo tworzyć i dodawać niestandardowe menu nawigacyjne w WordPress, dzięki czemu można je wyświetlać w dowolnym miejscu na swoim motywie.

Kiedy potrzebujesz tego samouczka menu nawigacyjnego WordPress?

Większość motywów WordPress zawiera co najmniej jedno miejsce, w którym można wyświetlić łącza nawigacyjne witryny w menu.

Możesz zarządzać elementami menu z łatwego w użyciu interfejsu w obszarze administracyjnym WordPress.

Jeśli po prostu chcesz dodać menu nawigacyjne na swojej stronie, po prostu postępuj zgodnie z naszym Przewodnikiem dla początkujących, jak dodać menu nawigacyjne w WordPress.

Celem tego samouczka jest pomoc użytkownikom majsterkowiczom / średniozaawansowanym w dodawaniu niestandardowych menu nawigacyjnych do motywów WordPress.

W tym artykule omówimy następujące tematy:

• Tworzenie niestandardowego menu nawigacyjnego w WordPress themes
• Wyświetlanie niestandardowego menu nawigacyjnego w motywie WordPress
• Dodawanie niestandardowego menu nawigacyjnego w WordPress za pomocą SeedProd
• Dodawanie niestandardowego menu nawigacyjnego w WordPress za pomocą Beaver Builder
• Tworzenie przyjaznych dla urządzeń mobilnych responsywnych menu w WordPress
• Więcej rzeczy, które możesz zrobić z menu nawigacji WordPress

Powiedziawszy to, przyjrzyjmy się, jak dodać niestandardowe menu nawigacji WordPress w swoim motywie.

Tworzenie niestandardowych menu nawigacji w WordPress Themes

Menu nawigacyjne są cechą motywów WordPress. Każdy motyw może zdefiniować własne lokalizacje menu i obsługę menu.

Aby dodać niestandardowe menu nawigacyjne, pierwszą rzeczą, którą musisz zrobić, to zarejestrować nowe menu nawigacyjne, dodając ten kod do funkcji szablonu.plik php.

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

Możesz teraz przejść do Wygląd ” Menu strona w panelu administracyjnym WordPress i spróbuj utworzyć lub edytować nowe menu. Zobaczysz „moje niestandardowe Menu” jako opcję lokalizacji motywu.

Wskazówka: jeśli chcesz dodać więcej niż jedną nową lokalizację menu nawigacyjnego, musisz użyć kodu takiego jak ten:

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');

Po dodaniu lokalizacji menu, śmiało i dodaj kilka pozycji menu w panelu administracyjnym WordPress, postępując zgodnie z naszym samouczkiem, jak dodać menu nawigacyjne dla początkujących.

Pozwoli nam to przejść do następnego kroku, który wyświetla menu w Twoim motywie.

Wyświetlanie niestandardowych menu nawigacji w motywach WordPress

Następnie musimy wyświetlić nowe menu nawigacyjne w Twoim motywie WordPress. Najczęstszym miejscem, w którym menu nawigacyjne są zwykle umieszczane, jest sekcja nagłówka witryny tuż po tytule lub logo witryny.

Możesz jednak dodać swoje menu nawigacyjne w dowolnym miejscu.

Musisz dodać ten kod do pliku szablonu motywu, w którym chcesz wyświetlić menu.

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

Lokalizacja motywu to nazwa, którą wybraliśmy w poprzednim kroku.

Klasa kontenera to klasa CSS, która zostanie dodana do twojego menu nawigacyjnego. Twoje menu pojawi się na twojej stronie jako zwykła lista punktowana.

Możesz użyć klasy CSS .custom_menu_class aby stylizować menu, dodając niestandardowy kod CSS. Oto przykładowy CSS, który pomoże Ci zacząć:

div.custom-menu-class ul {
    margin: 20px 0px 20px 0px;
    list-style-type: brak;
    styl listy: brak;
    list-style-image: brak;
    text-align: right;
	wyświetlacz: inline-block;	
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    wyświetlacz: inline-block;
} 

div.custom-menu-class A { 
    kolor:#000;
}

Aby dowiedzieć się więcej o stylizacji menu nawigacyjnego, zobacz nasz szczegółowy samouczek, jak stylizować menu nawigacyjne WordPress

Dodawanie niestandardowego menu nawigacyjnego w WordPress za pomocą SeedProd

Ta metoda jest o wiele łatwiejsza i zalecana jest dla wszystkich użytkowników. Zamiast pisać kod, możesz dodać niestandardowe menu nawigacyjne za pomocą Kreatora przeciągnij i upuść.

Aby to zrobić, będziemy używać SeedProd. Jest to najlepsza wtyczka do tworzenia stron WordPress na rynku i pozwala łatwo tworzyć niestandardowe strony dla Twojej witryny.

Zawiera piękne szablony, których możesz użyć jako punktu wyjścia. Następnie możesz po prostu przeciągać i upuszczać elementy, aby edytować projekt do własnego stylu.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz wprowadzić klucz licencyjny wtyczki. Możesz znaleźć te informacje pod swoim kontem na stronie SeedProd.

Następnie musisz udać się do SeedProd ” Strony stronę i kliknij przycisk Dodaj nową stronę docelową.

Następnie zostaniesz poproszony o wybranie szablonu, aby użyć punktu początkowego dla Twojego projektu. Wystarczy kliknąć na szablon, aby go wybrać.

Zostaniesz poproszony o podanie tytułu swojej strony i kliknięcie przycisku „Zapisz i rozpocznij edycję strony”, aby kontynuować.

Spowoduje to uruchomienie interfejsu kreatora stron z podglądem na żywo Twojej strony. Możesz po prostu wskazać i kliknąć dowolny element, aby go edytować i zmienić.

Aby dodać niestandardowe menu nawigacyjne, po prostu przeciągnij i upuść blok Menu Nav z lewej kolumny na stronę.

Następnie musisz wybrać menu, które chcesz wyświetlić tutaj. Możesz także dostosować rozmiar czcionki, wyrównanie i włączyć menu mobilne.

WSKAZÓWKA: Możesz utworzyć nowe menu, przechodząc do Wygląd ” Menu strona w razie potrzeby.

Następnie musisz przełączyć się na kartę Zaawansowane. Tutaj możesz dostosować kolory menu, typografię i inne zaawansowane opcje.

Gdy będziesz zadowolony z menu nawigacyjnego, możesz zapisać zmiany lub opublikować swoją stronę. Następnie możesz wyświetlić podgląd strony, aby zobaczyć ją w akcji.

Dodawanie niestandardowego menu nawigacyjnego w WordPress za pomocą Beaver Builder

Ta metoda jest również pomocna dla użytkowników tworzących niestandardowe strony dla swojej witryny i potrzebują rozwiązania bez kodu.

Najpierw musisz zainstalować i aktywować wtyczkę Beaver Builder. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz utworzyć nową stronę lub edytować istniejącą, na której chcesz dodać menu nawigacyjne. Na ekranie edytora postów kliknij przycisk „Uruchom Beaver Builder”.

Jeśli jest to nowa strona, Możesz użyć jednego z gotowych szablonów dołączonych do Beaver Builder. Możesz także od razu edytować kończącą się Stronę.

Następnie musisz dodać moduł menu i przeciągnąć go i upuścić na stronie w miejscu, w którym chcesz wyświetlić menu.

Spowoduje to wyświetlenie ustawień modułu Menu w wyskakującym okienku. Najpierw musisz wybrać menu nawigacyjne, którego chcesz użyć. Zawsze możesz utworzyć nowe menu lub edytować istniejące menu, odwiedzając Wygląd ” Menu strona w obszarze administracyjnym WordPress.

Możesz również przejrzeć inne ustawienia. Beaver Builder umożliwia wybór niestandardowych kolorów, tła i innych właściwości stylu dla Twojego menu.

Po zakończeniu możesz kliknąć przycisk Zapisz i wyświetlić podgląd menu.

Tworzenie przyjaznych dla urządzeń mobilnych responsywnych menu w WordPress

Wraz ze wzrostem wykorzystania urządzeń mobilnych możesz sprawić, że menu będzie przyjazne dla urządzeń mobilnych, dodając jeden z wielu popularnych efektów.

Możesz dodać efekt wysuwania (powyżej), efekt rozwijany, a nawet efekt przełączania dla menu mobilnych.

Mamy szczegółowy przewodnik krok po kroku, jak zrobić gotowe na urządzenia mobilne responsywne menu WordPress.

Zrób Więcej Z Menu Nawigacji WordPress

Menu nawigacyjne to potężne narzędzie do projektowania stron internetowych. Pozwalają one wskazać użytkownikom najważniejsze sekcje witryny.

WordPress pozwala zrobić o wiele więcej niż tylko wyświetlanie linków w menu. Wypróbuj te przydatne samouczki, aby rozszerzyć funkcjonalność menu nawigacji w witrynie WordPress.

• Jak dodać ikony obrazów z menu nawigacji w WordPress
• Jak dodać logikę warunkową do menu w WordPress
• Jak dodać opisy menu w motywie WordPress
• Jak dodać responsywne menu pełnoekranowe w WordPress
• Jak dodać mega menu do swojej witryny WordPress

To wszystko, mamy nadzieję, że ten ostateczny przewodnik pomógł Ci dowiedzieć się, jak dodać menu nawigacyjne w WordPress. Możesz również zobaczyć naszą listę 25 najbardziej przydatnych widżetów WordPress, a nasza lista musi mieć wtyczki WordPress.

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