Добавьте удобные для пользователя пользовательские мета-настройки в пункты меню WordPress

Последнее обновление Авг 10, 2022

Содержание

Добавление настраиваемых полей в пункты меню

Другое использование настраиваемых мета-полей пункта меню

В недавнем обновлении WordPress теперь можно и довольно просто добавлять настраиваемые мета-поля в пункты меню. В этом посте мы узнаем, как добавлять наши пользовательские настройки в пункты меню, обновлять их настройки и, наконец, как использовать используемые метаданные.

Недавно WordPress объявил о поддержке добавления настраиваемых полей в пункты меню в версии 5.4. Были добавлены два новых действия, которые позволяют разработчикам добавлять настраиваемые поля на странице администрирования меню WordPress и в редакторе меню Customizer. В этом посте мы сосредоточимся на одном из них, на странице администрирования меню WordPress.

С этим изменением больше не нужно заставлять пользователей темы или плагина запоминать и вводить имена классов для активации пункта меню «Настройки». между различными дизайнами выпадающего меню. Часто в сочетании с пользовательским меню.

Имейте в виду, что для работы этого кода требуется минимальная версия WordPress 5.4.0.

Что мы сделаем в этом уроке

С новой привязкой к элементам меню и поддержкой WordPress для добавления метаданных к элементам меню действительно нет ограничений в отношении того, какие настройки вы хотите. Процесс зависит от вашего конечного результата. В большинстве случаев достаточно добавить пользовательский класс CSS в пункт меню.

Для простоты в этом посте мы добавим флажок «Показать как кнопку». В нашей теме у нас есть CSS, который стилизует элемент меню, чтобы он выглядел как кнопка (призыв к действию), если элемент имеет определенный класс. Вместо того, чтобы заставлять пользователя темы вводить класс CSS «кнопка элемента меню» в поле класса 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="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