Дополнительные поля для WP_NAV_MENU

В WordPress 5.4 появились новые хуки, которые позволяют более гибко настраивать меню WordPress (WP Nav Menu). В частности, теперь можно легко добавлять свои собственные (дополнительные) поля в навигационное меню.

Мы будем говорить о хуках wp_nav_menu_item_custom_fields и wp_nav_menu_item_custom_fields_customize_template. С их помощью вы можете добавлять произвольные поля к элементам меню как на странице редактирования меню в административной панели, так и в панели настройки.

В этой статье мы рассмотрим, как использовать хук wp_nav_menu_item_custom_fields, чтобы добавить собственные поля к элементам меню. Также мы затронем плагины, которые позволяют сделать то же самое без написания кода.

Добавление полей в WP меню с помощью PHP кода

Ниже приведен код, который использует два хука для создания нового поля _menu_item_svg_icon в WP навигационном меню:

• wp_nav_menu_item_custom_fields — позволяет отображать HTML код на странице админки меню.
• wp_update_nav_menu_item — позволяет сохранить добавленные поля в пользовательских полях элемента меню.

Эти два хука также используются для обработки вывода созданного поля. В данном случае поле содержит имя файла SVG-иконки. При отображении меню мы добавляем плейсхолдер {SVG} в базовую HTML-разметку элемента меню и затем заменяем его на настоящее изображение SVG.

final class WP_Nav_Menu_Custom_Fields {
    public static array $field_keys = [
        '_menu_item_svg_icon' => [
            'title' => 'Имя иконки SVG',
            'desc' => 'Укажите имя иконки SVG (не URL)',
        ],
        'test_number_field' => [
            'title' => 'Число один',
            'type' => 'number',
            'size' => 'thin', // thin | wide
        ],
        'test_number_field_two' => [
            'title' => 'Число два',
            'type' => 'number',
            'size' => 'thin', // thin | wide
        ],
    ];

    public static function init(): void {
        if( is_admin() ){
            add_action( 'wp_nav_menu_item_custom_fields', [ __CLASS__, 'add_fields' ], 10, 2 );
            add_action( 'wp_update_nav_menu_item', [ __CLASS__, 'save_fields' ], 10, 2 );
        }
        else {
            add_filter( 'walker_nav_menu_start_el', [ __CLASS__, 'nav_menu_start_el' ], 10, 2 );
            add_filter( 'wp_nav_menu_args', [ __CLASS__, 'nav_menu_args' ] );
        }
    }

    public static function add_fields( $item_id, $item ) {
        foreach( self::$field_keys as $meta_key => $data ){
            $value = get_post_meta( $item_id, $meta_key, true );
            $title = $data['title'];
            $type = $data['type'] ?? 'text';
            $size = $data['size'] ?? 'wide';

            $desc = empty( $data['desc'] ) ? '' : ''. $data['desc'] .'';
            ?>
            

                
                

                
                
            
             $data ){
            self::save_field( $menu_id, $item_id, $meta_key );
        }
    }

    private static function save_field( $menu_id, $item_id, $meta_key ) {
        if( ! isset( $_POST[ $meta_key ][ $item_id ] ) ){
            return;
        }

        $val = $_POST[ $meta_key ][ $item_id ];

        if( $val ){
            update_post_meta( $item_id, $meta_key, sanitize_text_field( $val ) );
        }
        else{
            delete_post_meta( $item_id, $meta_key );
        }
    }

    public static function nav_menu_start_el( $item_output, $post ) {
        $svg = $post->_menu_item_svg_icon ?: '';
        if( $svg ){
            $svg = get_svg( $svg );
        }
        return str_replace( '{SVG}', $svg, $item_output );
    }

    public static function nav_menu_args( $args ) {
        if( empty( $args['link_before'] ) ){
            $args['link_before'] = '{SVG}';
        }
        return $args;
    }
}

После установки этого кода (создайте файл с этим кодом и подключите его в functions.php), вам нужно вызвать его с помощью этой строки в файле functions.php:

WP_Nav_Menu_Custom_Fields::init();

Теперь, когда мы перейдем на страницу "Внешний вид > Меню" в административной панели, мы увидим новые поля.

Получение полей

Чтобы получить значение полей, используйте функцию get_post_meta():

$field_value = get_post_meta( $item_id, $field_key, true );

Такой код можно использовать, например, в методе start_el() при создании вашего класса для обработки вывода меню. Или в хуках, которые изменяют вывод навигационного меню.

Добавление полей в меню с помощью плагина Advanced Custom Fields (ACF)

Плагин Advanced Custom Fields (ACF) является очень популярным и универсальным инструментом, который позволяет добавлять пользовательские поля к вашим меню WordPress.

После установки и активации плагина откройте его и нажмите «Добавить новый», чтобы со��дать поля. Выберите «Элемент меню» в правилах расположения. Следуйте инструкциям и обновите поля по мере необходимости.

После публикации поля вы можете перейти в меню WordPress из административной области, чтобы увидеть созданное вами новое поле. Очень просто!

Добавление полей в меню с помощью плагина WP Menu Custom Fields

Плагин WP Menu Custom Fields — это относительно новый плагин, который, как следует из его названия, поможет вам добавить пользовательские поля к вашим элементам меню. Вы можете добавить текст, изображение, шорткод или кастомный HTML.

Вместо того чтобы создавать свои поля через специальный интерфейс плагина (как это делается с ACF), WP Menu Custom Fields добавляет редактируемые опции прямо к любому элементу меню в области редактирования админки.

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