Как добавить изображения (иконки) к пунктам меню WordPress?

Как добавить изображения (иконки) к пунктам меню WordPress?

В пункте меню - выбираем картинку из медиатеки - и она автоматом выводится в меню на сайте.

// Добавляем поле для иконки в настройках пункта меню
add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_icon_field', 10, 5 );
function menu_item_icon_field( $item_id, $item, $depth, $args, $id ) {
    $icon_url = get_post_meta( $item_id, '_menu_item_icon', true );
    ?>
    <p class="field-icon description-wide">
        <label for="edit-menu-item-icon-<?php echo $item_id; ?>">
            Иконка пункта<br>
            <input type="text" id="edit-menu-item-icon-<?php echo $item_id; ?>" 
                   class="widefat menu-item-icon-input" 
                   name="menu-item-icon[<?php echo $item_id; ?>]" 
                   value="<?php echo esc_attr( $icon_url ); ?>" placeholder="URL изображения">
            <button type="button" class="button menu-item-icon-upload" style="margin-top:5px;">Выбрать из медиатеки</button>
            <img src="<?php echo esc_url( $icon_url ); ?>" class="menu-item-icon-preview" 
                 style="<?php echo $icon_url ? '' : 'display:none'; ?> max-width:100px; margin-top:5px; border:1px solid #ccc;">
        </label>
    </p>
    <?php
}

// Сохранение иконки пункта меню
add_action( 'wp_update_nav_menu_item', 'save_menu_item_icon', 10, 2 );
function save_menu_item_icon( $menu_id, $item_id ) {
    if ( isset( $_POST['menu-item-icon'][$item_id] ) ) {
        $icon_url = sanitize_text_field( $_POST['menu-item-icon'][$item_id] );
        update_post_meta( $item_id, '_menu_item_icon', $icon_url );
    }
}

// Подключение медиатеки на странице меню
add_action( 'admin_enqueue_scripts', 'menu_item_icon_enqueue_media' );
function menu_item_icon_enqueue_media( $hook ) {
    if ( $hook === 'nav-menus.php' ) {
        wp_enqueue_media();
    }
}

// JavaScript для загрузки иконки
add_action( 'admin_footer', 'menu_item_icon_js' );
function menu_item_icon_js() {
    $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
    if ( ! $screen || $screen->id !== 'nav-menus' ) {
        return;
    }
    ?>
    <script type="text/javascript">
    jQuery(function($){
        $(document).on('click', '.menu-item-icon-upload', function(e){
            e.preventDefault();
            var $btn = $(this);
            var $input = $btn.siblings('.menu-item-icon-input');
            var $preview = $btn.siblings('.menu-item-icon-preview');
            
            var frame = wp.media({
                title: 'Выберите иконку',
                button: { text: 'Использовать' },
                multiple: false,
                library: { type: 'image' }
            });
            
            frame.on('select', function(){
                var attachment = frame.state().get('selection').first().toJSON();
                $input.val(attachment.url);
                $preview.attr('src', attachment.url).show();
            });
            
            frame.open();
        });
    });
    </script>
    <?php
}

// Вывод иконки в меню
add_filter( 'wp_nav_menu_objects', 'add_icon_to_menu_items', 10, 2 );
function add_icon_to_menu_items( $items, $args ) {
    foreach ( $items as $item ) {
        $icon_url = get_post_meta( $item->ID, '_menu_item_icon', true );
        if ( $icon_url ) {
            $icon_html = '<img src="' . esc_url( $icon_url ) . '" alt="" class="menu-item-icon">';
            $item->title = $icon_html . $item->title;
        }
    }
    return $items;
}