Как добавить иконки в WordPress админ-меню с помощью плагинов и кода

Автор: Ксения Полякова | Опубликовано: 10.03.2026

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

Использование плагинов для добавления иконок в админ-меню WordPress

Если вы хотите быстро настроить иконки в админ-меню без программирования, можно воспользоваться специализированными плагинами. Ниже приведены три популярных решения:

Admin Menu Editor — позволяет переупорядочивать пункты меню, менять их названия и добавлять иконки. В бесплатной версии можно загрузить SVG или выбрать иконку из Dashicons.
Menu Icons by ThemeIsle — удобный плагин для добавления иконок из Dashicons, FontAwesome, Genericons и других библиотек к любому пункту меню.
WP Admin UI Customize — более продвинутый инструмент для кастомизации админки, включая добавление иконок, изменение цветов и стилей.

Для примера рассмотрим, как добавить иконку с помощью плагина Menu Icons. После установки и активации плагина:

Перейдите в Внешний вид > Меню или Плагины > Настройки Menu Icons (зависит от версии).
Выберите нужный пункт меню в админке.
Кликните на поле иконки и выберите подходящий стиль (Dashicons, FontAwesome и т.п.).
Сохраните изменения.

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

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

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

Рассмотрим простой пример добавления пункта меню с иконкой Dashicons:

function wpicons_add_admin_menu() {
    add_menu_page(
        'WPIcons Настройки', // Заголовок страницы
        'WPIcons',          // Название меню
        'manage_options',   // Права доступа
        'wpicons-settings', // Слаг меню
        'wpicons_render_settings_page', // Функция вывода страницы
        'dashicons-admin-generic',      // Иконка меню
        60                 // Позиция меню
    );
}
add_action('admin_menu', 'wpicons_add_admin_menu');

function wpicons_render_settings_page() {
    echo '<h1>Настройки WPIcons</h1>';
    echo '<p>Здесь можно настроить параметры плагина WPIcons.</p>';
}

В параметре menu_icon можно указать:

Класс Dashicons, например dashicons-admin-generic. Полный список здесь.
URL к кастомной иконке в формате SVG или PNG, например plugins_url('assets/icon.svg', __FILE__).

Использование кастомной SVG иконки

Для более уникального стиля можно загрузить свою SVG-иконку. Пример с кастомной иконкой из папки плагина:

function wpicons_add_admin_menu_custom_icon() {
    $icon_url = plugins_url('assets/wpicons-icon.svg', __FILE__);
    add_menu_page(
        'WPIcons Настройки',
        'WPIcons',
        'manage_options',
        'wpicons-settings',
        'wpicons_render_settings_page',
        $icon_url,
        60
    );
}
add_action('admin_menu', 'wpicons_add_admin_menu_custom_icon');

Важно: размер SVG должен быть примерно 20x20 пикселей, чтобы иконка корректно отображалась.

Как добавить иконки в подменю WordPress

Если у вас есть подменю, для них по умолчанию иконки не предусмотрены. Однако можно добавить иконки через CSS или JavaScript, либо использовать сторонние библиотеки.

Пример добавления иконки к подменю через CSS:

Добавьте в functions.php или файл плагина следующий код, чтобы добавить класс к нужному подменю:

function wpicons_add_submenu_class() {
    global $submenu;
    if (isset($submenu['wpicons-settings'])) {
        foreach ($submenu['wpicons-settings'] as &$item) {
            if ($item[2] === 'wpicons-subpage') {
                $item[4] = 'wpicons-submenu-icon';
            }
        }
    }
}
add_action('admin_menu', 'wpicons_add_submenu_class');

Затем подключите CSS для отображения иконки:

function wpicons_admin_styles() {
    echo '<style>
    .wpicons-submenu-icon a:before {
        content: "\f328"; /* Dashicons icon code */
        font-family: dashicons;
        padding-right: 6px;
    }
    </style>';
}
add_action('admin_head', 'wpicons_admin_styles');

Таким образом, можно визуально выделять подменю иконками.

Полезные советы и рекомендации

Оптимизация иконок для скорости загрузки

Используйте SVG-иконки или встроенные Dashicons, чтобы не увеличивать количество HTTP-запросов. Если применяете кастомные иконки, объединяйте их в спрайты или используйте base64.

Кроссбраузерность и адаптивность

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

Совместимость с другими плагинами

Если используете плагины для кастомизации админки, тестируйте совместимость, чтобы избежать конфликтов при добавлении иконок.

Заключение

Добавление иконок в админ-меню WordPress — простой, но эффективный способ улучшить UI и UX вашей админ-панели. Можно использовать готовые плагины для быстрого результата или программно подключать как стандартные Dashicons, так и кастомные SVG. Важно следить за производительностью и совместимостью, чтобы админка оставалась удобной и быстрой.

Если вы ищете качественные решения для разработки WordPress, обратите внимание на продукты WPSHOP, которые помогут автоматизировать задачи и улучшить функционал сайта.