W ostatniej aktualizacji WordPressa jest teraz możliwe i całkiem proste dodawanie niestandardowych pól meta do elementów menu. W tym poście dowiemy się, jak dodać nasze niestandardowe ustawienia do elementów menu, zaktualizować ich ustawienia i wreszcie, jak wykorzystać metadane w użyciu.
Niedawno WordPress ogłosił wsparcie dla dodawania niestandardowych pól do elementów menu w wersji 5.4. Dodano dwie nowe akcje, które umożliwiają programistom dodawanie niestandardowych pól na stronie administratora menu WordPress oraz w edytorze menu Customizer. W tym poście skupimy się na jednym z nich, tym dla strony administratora menu WordPress.
Dzięki tej zmianie nie ma już potrzeby zmuszania użytkowników motywów lub wtyczek do zapamiętywania i wpisywania nazw klas, aby aktywować „ustawienia" pozycji menu. Do tej pory był to powszechny proces w przypadku takich rzeczy, jak sprawienie, by pozycja menu wyglądała jak przycisk lub przełącznik między różnymi projektami listy rozwijanej, często w połączeniu z niestandardowym menu walker.
Pamiętaj, że do działania tego kodu wymagana jest minimalna wersja WordPress 5.4.0.
Co zrobimy w tym samouczku
Dzięki nowemu zaczepowi do elementów menu i obsłudze WordPressa do dodawania metadanych do elementów menu naprawdę nie ma ograniczeń co do rodzaju żądanych ustawień. Proces zależy od efektu końcowego. W większości przypadków wystarczy dodać własną klasę CSS do pozycji menu.
Dla uproszczenia dodamy w tym poście pole wyboru „Pokaż jako przycisk”. W naszym motywie mamy CSS, który stylizuje element menu tak, aby wyglądał jak przycisk (wezwanie do działania), jeśli element ma określoną klasę. Zamiast zmuszać użytkownika motywu do wpisania klasy CSS „menu-item-button” w polu klasy CSS elementu menu w admin, oferujemy im przyjazne dla użytkownika pole wyboru.
Na końcu tego posta znajdziesz kilka pomysłów na inne działania i filtry, których możesz użyć, jeśli chcesz zrobić coś więcej niż tylko dodać klasę CSS.
Zaczynajmy!
Niedawno dodany nowy haczyk to [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Jest to hak, który uruchamia się tuż nad przyciskami przenoszenia elementu menu;
Haczyk ma nie mniej niż pięć parametrów. W tym poście zrobimy rzeczy, które wymagają tylko dwóch pierwszych.
item_id: Identyfikator aktualnego elementu menuitem: Obiekt danych pozycji menudepth: Głębokość pozycji menu w menu, oznaczona jako liczba całkowitaargs: Obiekt argumentów pozycji menunav_id: ID menu nawigacji
Wszystkie dane wejściowe dodane w tym zaczepie muszą mieć nameatrybut (ponieważ edytor menu jest formularzem). Atrybut name może mieć dowolną nazwę, ale musi być unikalny i musisz dodać identyfikator pozycji menu (pierwszy parametr) w nawiasach. Np name="my-custom-field[<item ID>]. „. W ten sposób robią to inne standardowe ustawienia pozycji menu.
Zacznijmy od przykładu dodania pola wyboru, aby element menu wyglądał jak przycisk, gdy menu jest umieszczone jako menu główne. Zaczepimy się wp_nav_menu_item_custom_fieldstylko dwoma pierwszymi parametrami i wykonamy następujące czynności:
add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
$show_as_button = get_post_meta($item_id, '_show-as-button', true);
?>
<p class="awp-show-as-button description description-wide">
<label for="awp-menu-item-button-<?php echo $item_id; ?>" >
<input type="checkbox"
id="awp-menu-item-button-<?php echo $item_id; ?>"
name="awp-menu-item-button[<?php echo $item_id; ?>]"
<?php checked($show_as_button, true); ?>
/><?php _e('Show as a button', 'awp'); ?>
</label>
</p>
<?php
}, 10, 2);W wierszu #2pobieramy aktualną wartość naszej meta pozycji menu. Pozycje menu używają post meta, więc używamy tego, [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()co prawdopodobnie już znasz. Przechowujemy metadane pozycji menu za pomocą klawisza „ _show-as-button„.
Następnie jest to kwestia powtórzenia dobrego kodu HTML. Powyższy kod używa niektórych klas już użytych w elementach menu, aby wyglądało ładnie bez dodawania własnego stylu (pznacznik z klasami „ description description-wide„).
Ważne części dzieją się na linii #8i #9. Kierujemy się zasadą atrybutu name, dodając $item_idw nawiasach i upewniamy się, że aktualnie zapisana wartość jest odzwierciedlona w checkboxie. Tutaj możesz dodać dowolny typ wejść, a nawet wiele wejść. Pamiętaj tylko, aby podać odpowiedni nameatrybut i poprawnie ustawić jego aktualną wartość.
Dzięki temu kodowi w kodzie motywu functions.phplub wtyczki powinieneś teraz otrzymać nowe pole wyboru dla wszystkich pozycji menu:
Obecnie nie ratuje naszego pola. To kolejny krok.
Aktualizacja pól niestandardowych
Aby zaktualizować niestandardowe pola na elementach menu, używamy hooka [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Zawiera trzy argumenty, ale potrzebujemy tylko drugiego, czyli identyfikatora pozycji menu.
To, jak poradzisz sobie z zapisywaniem wartości swoich danych wejściowych, zależy od Ciebie. Zdecydowałem się po prostu zapisać „ _show-as-button” jako prawda lub fałsz. Po prostu użyj [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()i/lub [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().
add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
$button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);W powyższym kodzie pobieram wartość pola niestandardowego według jego nazwy w $_POSTtablicy. Ponieważ jest to pole wyboru, albo nie będzie istnieć w $_POSTtablicy (niezaznaczone), albo zostanie zwrócone jako „ on„. Następnie aktualizuję klucz meta „ _show-as-button” jako prawda lub fałsz.
Z powyższym kodem powinieneś zobaczyć, że twoje pole aktualizuje się poprawnie podczas zapisywania menu.
Następnym krokiem jest zrobienie czegoś z naszymi niestandardowymi metadanymi. A sposób, w jaki to zrobisz, zależy od tego, jaki jest Twój efekt końcowy. W naszym przykładzie wszystko, co musimy zrobić, to dodać własną klasę do elementu menu.
WordPress oferuje filtr klas pozycji menu: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Wszystko, co musimy zrobić, to dodać własną klasę do tablicy przez ten filtr, jeśli nasza niestandardowa meta to true. Używamy [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()do uzyskania wartości ’ _show-as-button’ i jeśli to prawda, dodajemy klasę CSS ’ menu-item-button’:
add_filter('nav_menu_css_class', function($classes, $menu_item) {
$show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
if ($show_as_button) {
$classes[] = 'menu-item-button';
}
return $classes;
}, 10, 2);Filtr nav_menu_css_classzawiera łącznie cztery argumenty, w tym argumenty menu i głębokość elementu menu. Jeśli to konieczne, możesz sprawić, że te wartości będą miały wpływ na nazwy klas. Na przykład zwykle nie ma sensu przekształcać elementu menu w przycisk, chyba że znajduje się on na najwyższym poziomie (a nie w menu rozwijanym).
W powyższym kodzie powinieneś teraz zobaczyć, że każdy element menu, który zaznaczył „Pokaż jako przycisk”, otrzyma klasę „ menu-item-button„.
Pamiętaj: może się zdarzyć, że nav_menu_css_classfiltr nie zostanie zastosowany, jeśli menu korzysta z niestandardowego chodzika po menu, który na przykład zawiera metodę start_el(). Walker musi zastosować nav_menu_css_classfiltr do klas pozycji menu (używając apply_filters()), aby powyższy filtr działał!
Jak wspomniano, proces korzystania z pól niestandardowych zależy od wyniku końcowego. Ciężko stworzyć post obejmujący wszystkie możliwości. Ale przynajmniej to powinno dać ci kilka pomysłów. Powyższy przykład pokazał, jak po prostu dodać niestandardową klasę do elementu menu.
W innych przypadkach możesz chcieć przejąć metadane w menu walker. W większości funkcji w menu walker masz dostęp do identyfikatora pozycji menu, dzięki czemu możesz łatwo pobrać metadane.
Alternatywą dla niestandardowego walkera po menu jest użycie filtra, [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)aby uzyskać większą kontrolę nad obiektem pozycji menu.
Możesz też użyć filtru [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/), aby na przykład wykluczyć elementy menu, jeśli ustawienie ma ograniczać widoczność elementów menu.