Dodawanie niestandardowych pól do pozycji menu WordPress

Menu strony internetowej jest często pomijane podczas projektowania strony. Może to wynikać z tego, że dostosowanie było tradycyjnie trudne pod względem technicznym. Zmieniło się to teraz wraz z WordPress 5.4, który wprowadził kilka nowych zaczepów, które pozwolą stosunkowo łatwo dodać niestandardowe pola menu WordPress.

Omawiane haki to haki akcji wp_nav_menu_item_custom_fields i wp_nav_menu_item_custom_fields_customize_template . Korzystając z nich, możesz teraz łatwo dodawać własne pola niestandardowe do elementów menu zarówno na stronie edycji menu administratora, jak i w panelu opcji dostosowywania.

W tym artykule przyjrzymy się kilku prostym sposobom wykorzystania haka wp_nav_menu_item_custom_fields do dodawania własnych niestandardowych pól do elementów menu, a także przyjrzymy się dwóm wtyczkom, które mogą być również użyte do dodawania niestandardowych pól bez konieczności kodowania .

Kontynuujmy.

Niestandardowy hak pola menu WordPress

Hak wp_nav_menu_item_custom_fields jest specyficzny dla ekranu Menu i jest opisany w następujący sposób:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• Liczba całkowita $id jest identyfikatorem pozycji menu
• Obiekt $menu_item jest obiektem danych pozycji menu
• Liczba całkowita $depth to głębokość elementu menu
• $args jest obiektem argumentów pozycji menu

Podpięcie jest uruchamiane tuż przed przyciskami przenoszenia elementu menu nawigacyjnego w edytorze menu i jest wprowadzane w pliku wp-admin/includes/class-walker-nav-menu-edit.php wokół linii 242.

Możesz to zademonstrować w praktyce na bardzo prostym przykładzie. Otwórz plik functions.php aktywnego motywu i dodaj ten fragment kodu:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Teraz, jeśli przejdziesz do strony administratora edycji menu, zobaczysz ciąg powtórzony pod każdym elementem menu, jak pokazano na zrzucie ekranu poniżej.

Oczywiście nie ma to żadnej funkcjonalności, ale pokazuje, jak można edytować menu. Wypróbujmy teraz coś bardziej przydatnego, dodając kilka prostych funkcji w postaci pola niestandardowego.

Dodaj niestandardowe pole elementu menu WordPress za pomocą kodu

W tym przykładzie stworzymy niestandardowe pole menu WordPress, które pozwoli nam wstawić opis do dowolnego elementu menu.

Krok pierwszy: dodanie wyniku

Na początek, najpierw stworzymy funkcję zwrotną, która wyświetli pole wejściowe, w którym administrator może wypełnić opis. Oto kod, który to zrobi:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Dodaj ten kod do pliku functions.php i zapisz go. Teraz, jeśli ponownie zalogujesz się do obszaru administracyjnego swojej witryny WordPress i otworzysz ekran menu, powinieneś zobaczyć swoje pole. W naszym przypadku nazwaliśmy to „Opisem przedmiotu”. Możesz oczywiście edytować powyższy kod, aby nazwać swoje pole według własnego uznania. Pamiętaj tylko, że musi to być unikalna nazwa.

Krok drugi: zapisywanie danych wejściowych

Następnie wstawimy poniższy fragment kodu, który zaktualizuje wartość pola w metatablicy postu bazy danych, co oznacza, że ​​nasze dane wejściowe zostaną zapisane.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Po zapisaniu tego kodu w pliku functions.php możesz wrócić do swojego administratora WordPress, otworzyć element menu i dodać opis do pola. Następnie przejdź do bazy danych phpMyAdmin i powinieneś zobaczyć wpis w tabeli meta bazy danych post.

Zmiana wartości w menu admin powinna znaleźć odzwierciedlenie w bazie danych. Podobnie, jeśli usuniesz wartość, powinna ona całkowicie zniknąć.

Krok trzeci: pokaż wartość pola menu

Następnie pokażemy, jak możemy odzyskać zapisane dane pól menu i pokazać je w menu interfejsu użytkownika za pomocą funkcji get_post_meta i zaczepu nav_menu_item_title . Dodaj poniższy kod do pliku functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

Hak nav_menu_item_title filtruje tytuł pozycji menu i można go znaleźć w pliku wp-includes/class-walker-nav-menu.php wokół linii 225.

Akceptuje 4 parametry, ciąg tytułu pozycji menu, bieżącą pozycję menu, obiekt argumentów wp_nav_menu() oraz liczbę całkowitą, która jest głębokością pozycji menu.

Powinieneś teraz zobaczyć opis pod tytułem pozycji menu i, używając odpowiedniego CSS, możesz oczywiście dostosować go do swojej witryny.

Dodaj niestandardowe pole elementu menu WordPress za pomocą wtyczki

Jeśli nie chcesz zajmować się pisaniem kodu, aby dodać niestandardowe pole do swojego menu WordPress, to dobra wiadomość… są wtyczki, które mogą to zrobić za Ciebie.

Zaawansowane pola niestandardowe

Niezwykle popularna i zawsze wszechstronna wtyczka Advanced Custom Fields po raz kolejny demonstruje swoją moc dzięki możliwości dodawania niestandardowych pól do menu WordPress.

Po zainstalowaniu i aktywacji otwórz wtyczkę, a następnie kliknij przycisk „Dodaj nowy”, aby dodać pola. Wybierz opcję „Pozycja menu” zgodnie z zasadami lokalizacji. Postępuj zgodnie z instrukcjami i zaktualizuj pola zgodnie z wymaganiami.

Po opublikowaniu pola możesz przejść do menu WordPress z obszaru administracyjnego, aby zobaczyć nowo utworzone pole. Całkiem proste!

Niestandardowe pola menu WP

Wtyczka WP Menu Custom Fields to stosunkowo nowa wtyczka, która, jak sama nazwa wskazuje, pomoże Ci dodać niestandardowe pola do elementów menu. Możesz dodać niestandardowy tekst, obraz, krótki kod lub niestandardowy kod HTML.

Zamiast tworzyć niestandardowe elementy menu za pomocą dedykowanego interfejsu wtyczki (tak jak w przypadku zaawansowanych pól niestandardowych), pola niestandardowe menu WP zamiast tego dodają opcje edytowalne bezpośrednio do dowolnego elementu menu w obszarze edycji menu administratora.

Jest to dość oczywiste w użyciu i przyjemny, łatwy sposób na dodawanie niestandardowych pól i innej zawartości do elementów menu. Dokumentacja wtyczki zawiera również punkty zaczepienia wtyczki, których można użyć do dalszego dostosowania kodu HTML generowanego dla każdej funkcji.

Wniosek

Dodanie niestandardowych pól do menu WordPressa może być naprawdę przydatne i może pomóc Ci ulepszyć ten często zaniedbywany obszar Twojej witryny. Jeśli jesteś pewnym programistą, to korzystanie z nowych hooków dostarczonych w WordPressie 5.4 powinno być stosunkowo łatwe, podczas gdy osoby nie będące programistami mogą w pełni wykorzystać dostępne wtyczki, aby wykonać to zadanie.

Zobacz też

• Dodawanie pól do pozycji menu WordPress – wtyczka niestandardowa