Добавление иконок в меню WordPress

Введение

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

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

Результат отображения иконок в меню

Ознакомиться со всеми доступными именами иконок можно в официальном справочнике Dashicons.

1. Регистрация меню и подключение ассетов

1.1. Регистрация области меню

В файле functions.php регистрируем новую локацию для навигационного меню:

function custom_setup_navigation_menus() {
    register_nav_menus( [
        'sidebar-menu' => __( 'Sidebar Menu', 'theme-textdomain' ),
    ] );
}
add_action( 'after_setup_theme', 'custom_setup_navigation_menus' );

1.2. Подключение стилей Dashicons на фронтенде

По умолчанию стили Dashicons подключаются только в панели управления. Для их отображения на страницах сайта добавляем вызов:

function custom_enqueue_dashicons_frontend() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_dashicons_frontend' );

2. Добавление и сохранение поля в панели управления

2.1. Рендер поля в настройках пункта меню

Хук wp_nav_menu_item_custom_fields позволяет внедрить произвольное поле прямо в аккордеон каждого пункта меню:

function custom_menu_item_dashicons_field( $item_id ) {
    $value = get_post_meta( $item_id, '_menu_item_dashicon', true );
    ?>
    <p class="description description-thin">
        <label for="menu-item-dashicon-<?php echo esc_attr( $item_id ); ?>">
            <?php esc_html_e( 'Dashicons Class', 'theme-textdomain' ); ?><br />
        </label>
        <input
            type="text"
            id="menu-item-dashicon-<?php echo esc_attr( $item_id ); ?>"
            class="widefat"
            name="menu_item_dashicon[<?php echo esc_attr( $item_id ); ?>]"
            value="<?php echo esc_attr( $value ); ?>"
            placeholder="dashicons-admin-home"
        />
    </p>
    <?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'custom_menu_item_dashicons_field' );

Поле выглядит следующим образом: Поле ввода в карточке пункта меню.

2.2. Сохранение значения в метаданных

При сохранении структуры меню записываем переданный класс в postmeta:

function custom_save_menu_item_dashicons( $menu_id, $menu_item_db_id ) {
    $dashicon = $_POST['menu_item_dashicon'][ $menu_item_db_id ] ?? '';
    $dashicon = sanitize_text_field( $dashicon );

    if ( empty( $dashicon ) ) {
        delete_post_meta( $menu_item_db_id, '_menu_item_dashicon' );
        return;
    }

    update_post_meta( $menu_item_db_id, '_menu_item_dashicon', $dashicon );
}
add_action( 'wp_update_nav_menu_item', 'custom_save_menu_item_dashicons', 10, 2 );

3. Вывод разметки меню с иконками

3.1. Модификация HTML через фильтр ходока

Перехватываем генерацию открывающего тега ссылки с помощью фильтра walker_nav_menu_start_el и вставляем элемент <i class="dashicons ..."> перед текстом:

function custom_nav_menu_icon_filter( $item_output, $item, $depth, $args ) {
    if ( empty( $args->theme_location ) || $args->theme_location !== 'sidebar-menu' ) {
        return $item_output;
    }

    $dashicon = get_post_meta( $item->ID, '_menu_item_dashicon', true );
    if ( empty( $dashicon ) ) {
        return $item_output;
    }

    $icon_html = '<i class="dashicons ' . esc_attr( $dashicon ) . '" aria-hidden="true"></i> ';

    return preg_replace( '~(<a\b[^>]*>)~i', '$1' . $icon_html, $item_output, 1 );
}
add_action( 'walker_nav_menu_start_el', 'custom_nav_menu_icon_filter', 10, 4 );

3.2. Вывод меню в шаблоне темы

В месте рендера (например, в файле sidebar.php или header.php) вызываем стандартную функцию:

<?php
wp_nav_menu( [
    'theme_location' => 'sidebar-menu',
    'container'      => false,
    'menu_class'     => 'sidebar-nav',
    'depth'          => 1,
    'fallback_cb'    => false,
] );
?>

Вывод

Интеграция иконок через стандартный API меню WordPress обеспечивает надежную и быструю архитектуру:

Минимум накладных расходов: стили Dashicons уже встроены в ядро WordPress и не требуют загрузки сторонних шрифтов вроде FontAwesome.
Доступность (a11y): теги <i> генерируются с атрибутом aria-hidden="true", что предотвращает некорректное озвучивание иконок скринридерами.
Удобство для контент-менеджеров: администратор сайта может назначать и менять иконки в стандартном интерфейсе «Внешний вид → Меню» без правок исходного кода.