Utwórz niestandardowe menu nawigacyjne w WordPressie bez używania wtyczek
Opublikowany: 2020-11-28Bez względu na to, jakiego motywu WordPress używasz, prawie na pewno zapewni co najmniej jedną lokalizację menu, w której możesz wyświetlić swoje menu (zwykle w nagłówku witryny). Menu można łatwo tworzyć z poziomu panelu administracyjnego i szybko dodawać do tych wstępnie ustawionych lokalizacji. Ale co zrobić, jeśli potrzebujesz innego menu do wyświetlenia w innym miejscu na swojej stronie? W tym samouczku przyjrzymy się, jak stworzyć własne menu nawigacyjne, które będzie wyświetlane w wybranej lokalizacji bez konieczności używania wtyczki.
Kontynuujmy!
Zarejestruj swoją nową lokalizację menu niestandardowego
Pierwszą rzeczą, którą musimy zrobić, to zarejestrować lokalizację nowego niestandardowego menu. Aby to zrobić, otwórz plik functions.php aktywnego motywu za pomocą wybranego edytora tekstu (np. Sublime) i dodaj następujący kod:
function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' ); W tym fragmencie kodu użyliśmy hooka add_action() w celu dodania funkcji zwrotnej my_custom_menu() . Oznacza to, że funkcja my_custom_menu() będzie wykonywana wraz z domyślnymi podstawowymi funkcjami, które są wykonywane przy każdym wywołaniu akcji init . Ciąg „Moje menu niestandardowe” to czytelna wersja, którą zobaczysz na stronie administratora.
Wewnątrz funkcji, podstawowa funkcja register_nav_menu jest używana w celu zarejestrowania lokalizacji menu nawigacyjnego dla naszego motywu. Jeśli chcesz zarejestrować wiele menu, możesz użyć register_nav_menus() i zdefiniować lokalizacje menu w tablicy w następujący sposób:
function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );Aby potwierdzić wyniki, przejdź do swojego panelu administracyjnego w sekcji Wygląd > Menu. Zauważysz, że niestandardowa lokalizacja menu jest zawarta w Ustawieniach menu.
Uwaga: Jeśli wybierzemy tę lokalizację w tym momencie, menu nie wyświetli niczego w interfejsie użytkownika.
Jak wyświetlić nasze niestandardowe menu?
Załóżmy, że chcemy, aby nowa lokalizacja menu była używana dla drugorzędnego menu poziomego, które będzie znajdować się poniżej „Menu poziomego pulpitu”, które jest już obecne w naszym motywie.
Aby to osiągnąć, wstawimy kod w szablonie motywu, w którym chcemy, aby było wyświetlane menu. W tym przykładzie używamy motywu Twenty Twenty i edytujemy jego plik header.php, aby wyświetlić nasze menu. Znajdziesz ten plik w folderze motywu.
Otwórz plik header.php za pomocą swojego edytora i znajdź ten element w kodzie wokół linii 33.
<header class="header-footer-group" role="banner">Tuż pod tą sekcją umieścimy nasz kod, aby wyświetlić naszą nową lokalizację menu niestandardowego: „moje-niestandardowe-menu”.
<header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>Wartość theme_location musi być identyczna z nazwą, którą podałeś dla swojego menu w kodzie functions.php, który wkleiliśmy wcześniej. W naszym przypadku: 'moje-niestandardowe-menu'.
Teraz stwórzmy menu testowe, aby sprawdzić, czy to działa. Aby to zrobić, przejdź do Wygląd > Menu i zacznij tworzyć nowe menu.
Nadaj menu tytuł „Menu dodatkowe”, wybierz „Moje menu niestandardowe” dla lokalizacji, a następnie naciśnij przycisk „Utwórz menu”.
Na koniec dodaj kilka pozycji do menu (na przykład pozycja menu 1, pozycja menu 2, pozycja menu 3), a następnie zapisz menu.
Zobaczmy, co mamy teraz w interfejsie.
Udało nam się pokazać nasze nowe menu, ale jest dość bałaganiarskie, prawda?
Jeśli przejrzymy nasz kod źródłowy, zauważymy, że funkcja wp_nav_menu() utworzyła ten fragment kodu HTML
<div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>Możemy więc użyć klas opisanych w kodzie, aby upiększyć nasze menu. W tym celu użyjemy CSS. Znajdź style.css (zwykle znajduje się on w tej samej lokalizacji co plik header.php), a następnie otwórz go w swoim edytorze, aby dodać ten kod:
ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }Rezultat będzie teraz znacznie ładniejszy i bardziej zgodny ze stylem naszej strony demonstracyjnej.
Dodatkowe dostosowywanie menu
Funkcja wp_nav_menu(), którą WordPress zapewnia do wyświetlania menu, zawiera szereg opcji, które pozwalają na dalsze dostosowywanie.
„ lokalizacja_motywu ”
Jak opisaliśmy powyżej, ten parametr odpowiada kluczom przekazanym do funkcji register_nav_menus() w functions.php
wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );„klasa_menu”
Dostępna jest opcja ' menu_class ', która pozwala określić własną klasę menu.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) ); 
Jak mogłeś już zauważyć, klasa nie zastępuje żadnej innej klasy, ale jest dodawana w elemencie ul.
„identyfikator_menu”
W przeciwieństwie do opcji class, opcja menu_id zastępuje bieżący identyfikator menu. Wygenerowany kod HTML dla elementu <ul> będzie wyglądał mniej więcej tak.
<ul class="menu">Gdy ta opcja nie jest używana, identyfikatorem będzie informacja o menu, która zostanie zwiększona w przypadku korzystania z wielu instancji.
'pojemnik'
Ten parametr określa typ elementu otaczającego menu. Wartość domyślna to „div”. Jeśli na przykład użyjesz tego kodu:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );otrzymasz ten wynik:
„klasa_kontenera”
To jest klasa, która jest stosowana do elementu nadrzędnego menu:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) ); 
Możesz także wstawić treść przed lub po każdym łączu do pozycji menu, używając parametrów „przed” i „po”. Jest to bardzo przydatne, jeśli chcesz dodać myślnik lub ikonę lub zawinąć elementy menu w tag span. Możesz sam wypróbować poniższy przykład, aby zobaczyć to w akcji:
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) ); wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );Możesz także dodać ikony do pozycji menu. Spróbuj na przykład zainstalować wtyczkę Font Awesome, aby dołączyć bibliotekę ikon i użyj opcji menu „przed”, aby zastosować niesamowitą ikonę do elementów menu.
wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );Możesz znaleźć kod dla każdej ikony na liście ikon wtyczki.
Parametr Walkera
Na koniec przedstawimy przykład, w jaki sposób parametr chodzika pomaga dostosować menu. Jeśli nie wiesz, co to jest klasa WordPress walker, poniższe prawdopodobnie nie będą miały większego sensu. Sugerujemy najpierw przeczytać „Zapoznanie się z klasą WordPress Walker”.
wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );Aby zademonstrować klasę Walker, dodamy „Pozycję podrzędną” do naszego menu.
Zastąpimy domyślną klasę Walker, którą zapewnia WordPress. Znajduje się on w pliku wp-includes/class-walker-nav-menu.php. Aby to osiągnąć, przejdź do pliku function.php i wstaw poniższy kod:
if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }Teraz w pliku headers.php zamień kod menu na ten (celowo wypiszemy obie wersje menu tylko po to, aby porównać wyniki):
wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) ); 
Porównując ten kod z oryginalną klasą Walker_Nav_Menu, zauważysz, że $tree_type i $db_fields pozostały nietknięte, ale reszta została zmieniona. Nie spiesz się i porównaj zarówno kod, jak i kod HTML w tych dwóch wersjach tego samego menu i spróbuj poeksperymentować, bawiąc się klasą My_Nav_Menu_Walker.
Wniosek
Menu na stronach internetowych są oczywiście bardzo ważne! Możliwość pełnej kontroli nad rozmieszczeniem i wyświetlaniem menu rozszerza Twoje możliwości jako twórcy motywów i otwiera szereg ekscytujących nowych możliwości podczas projektowania stron internetowych bez konieczności polegania na wtyczkach, co zawsze jest świetne.