Додайте зручні спеціальні мета-параметри до пунктів меню WordPress

Останнє оновлення Лис 10, 2022

Зміст

Додавання спеціальних полів до пунктів меню

Інші способи використання спеціальних мета-полів пункту меню

У нещодавньому оновленні WordPress стало можливим і досить простим додавання спеціальних мета-полів до пунктів меню. У цій публікації ми дізнаємося, як додати власні параметри до пунктів меню, оновити їхні параметри та, нарешті, як використовувати метадані, що використовуються.

Нещодавно WordPress оголосив про підтримку додавання спеціальних полів до пунктів меню у версії 5.4. Додано дві нові дії, які дозволяють розробникам додавати власні поля на сторінку адміністратора меню WordPress і в редактор меню Customizer. У цій публікації ми зосередимося на одному з них, на сторінці адміністратора меню WordPress.

Завдяки цій зміні більше не потрібно змушувати користувачів тем або плагінів запам’ятовувати та вводити назви класів, щоб активувати «налаштування» пункту меню. Дотепер це був звичайний процес для таких речей, як надання пункту меню вигляду кнопки або перемикача. між різними дизайнами розкривного меню. Часто в поєднанні з настроюваним програмістом меню.

Майте на увазі, що для роботи цього коду потрібна мінімальна версія WordPress 5.4.0.

Що ми зробимо в цьому підручнику

Завдяки новому підключенню до пунктів меню та підтримці WordPress для додавання метаданих до пунктів меню дійсно немає обмежень щодо того, які налаштування ви хочете. Процес залежить від кінцевого результату. У більшості випадків достатньо додати власний клас CSS до пункту меню.

Для простоти ми в цій публікації додамо прапорець «Показати як кнопку». У нашій темі є CSS, який стилізує пункт меню так, щоб він виглядав як кнопка (заклик до дії), якщо елемент має певний клас. Замість того, щоб змушувати користувача теми вводити клас CSS «menu-item-button» у полі класу CSS пункту меню в адміністраторі, ми пропонуємо йому зручний для користувача прапорець.

У кінці цієї публікації ви знайдете кілька ідей щодо інших дій і фільтрів, які можна використовувати, якщо ви хочете зробити більше, ніж просто додати клас CSS.

Давайте розпочнемо!

Додавання спеціальних полів до пунктів меню

Нещодавно доданий новий хук [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Це хук, який запускається прямо над кнопками переміщення пункту меню;

Гачок має не менше п’яти параметрів. У цьому дописі ми зробимо те, що вимагає лише двох перших.

item_id: ідентифікатор поточного пункту меню
item: Об’єкт даних пункту меню
depth: Глибина пункту меню в меню, позначена як ціле число
args: Об’єкт аргументів пункту меню
nav_id: Ідентифікатор меню навігації

Усі входи, додані в цей хук, повинні мати nameатрибут (оскільки редактор меню є формою). Атрибут name можна назвати як завгодно, але він має бути унікальним, і ви повинні додати ідентифікатор пункту меню (перший параметр) у квадратних дужках. Наприклад name="my-custom-field[<item ID>]«. Таким чином це роблять інші стандартні параметри пункту меню.

Почнемо з прикладу додавання прапорця, щоб зробити пункт меню схожим на кнопку, коли меню розміщено як головне. Ми підключимося wp_nav_menu_item_custom_fieldsлише до двох перших параметрів і зробимо наступне:

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

У рядку #2ми отримуємо поточне значення мета пункту меню. Пункти меню використовують метаданні публікації, тому ми використовуємо [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()їх, з якими ви, мабуть, уже знайомі. Ми зберігаємо метадані пункту меню за ключем «_show-as-button».

Тоді це питання відтворення хорошого HTML. Наведений вище код використовує деякі з класів, які вже використовувалися для пунктів меню, щоб зробити його гарним виглядом без додавання власного стилю (pтег із класами «description description-wide»).

Важливі частини відбуваються в рядку #8та #9. Ми дотримуємося правила атрибута назви, додаючи $item_idв дужки, і ми переконаємося, що поточне збережене значення відображається в прапорці. Ви можете додати будь-який тип входів і навіть кілька входів тут. Просто не забудьте надати відповідний nameатрибут і правильно встановити його поточне значення.

З цим кодом у коді вашої теми functions.phpчи плагіна ви маєте отримати новий прапорець для всіх пунктів меню:

Наразі це не рятує наше поле. Це наступний крок.

Оновлення спеціальних полів

Щоб оновити спеціальні поля в пунктах меню, ми використовуємо хук [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Він поставляється з трьома аргументами, але нам потрібен лише другий, який є ідентифікатором пункту меню.

Ви вирішуєте, як зберігати значення введених даних. Я вирішив просто зберегти " _show-as-button" як істинне або хибне. Просто використовуйте [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()та/або [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);

У наведеному вище коді я вибираю значення спеціального поля за його назвою в $_POSTмасиві. Оскільки це прапорець, він або не існуватиме в $_POSTмасиві (без прапорця), або буде повернено як " on". Потім я оновлю мета-ключ " _show-as-button" як істинний або хибний.

За допомогою наведеного вище коду ви повинні побачити, що ваше поле правильно оновлюється під час збереження меню.

Наступним кроком буде щось зробити з нашими спеціальними метаданими. І те, як ви це зробите, залежить від кінцевого результату. Що стосується нашого прикладу, все, що нам потрібно зробити, це додати спеціальний клас до пункту меню.

Оновити клас CSS пункту меню

WordPress пропонує фільтр для класів пункту меню: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Все, що нам потрібно зробити, це додати спеціальний клас до масиву за допомогою цього фільтра, якщо наш спеціальний мета є true. Ми використовуємо [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()для отримання значення " _show-as-button", і якщо воно істинне, ми додаємо клас 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);

Фільтр nav_menu_css_classмає загалом чотири аргументи, включаючи аргументи меню та глибину пункту меню. Якщо необхідно, ви можете зробити так, щоб ці значення впливали на імена класів. Наприклад, зазвичай не має сенсу перетворювати пункт меню на кнопку, якщо він не знаходиться на верхньому рівні (а не в розкривному меню).

За допомогою наведеного вище коду ви побачите, що будь-який пункт меню, який перевірив «Показати як кнопку», отримає клас «menu-item-button».

Майте на увазі: ви можете зіткнутися з тим, що nav_menu_css_classфільтр не буде застосовано, якщо в меню використовується настроюваний перехідник меню, який, наприклад, містить метод start_el(). Проходник має застосувати nav_menu_css_classфільтр до класів пункту меню (за допомогою apply_filters()), щоб вищезгаданий фільтр працював!

Інші способи використання спеціальних мета-полів пункту меню

Як уже згадувалося, процес використання спеціальних полів залежить від кінцевого результату. Важко зробити публікацію, яка охоплює всі можливості. Але принаймні це повинно дати вам деякі ідеї. Наведений вище приклад показав, як просто додати спеціальний клас до пункту меню.

В інших випадках, можливо, ви захочете розгорнути метадані в програмі меню. У більшості функцій у вікні меню ви маєте доступ до ідентифікатора пункту меню, тому ви можете легко отримати метадані.

Альтернативою використанню власного обходу меню можна скористатися фільтром [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)для більшого контролю над об’єктом пункту меню.

Або ви можете використати фільтр [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/), щоб, наприклад, виключити пункти меню, якщо ви налаштували обмеження видимості пункту меню.

Джерело запису: awhitepixel.com