Как создать иконку в админ-панели WordPress с использованием REST API

Почему стоит добавить пользовательскую иконку в меню админ-панели WordPress

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

Ранее для добавления иконок использовали только PHP-функции внутри add_menu_page, но с распространением REST API и современного JavaScript в админке появилась возможность создавать меню и иконки более гибко и динамично.

Далее рассмотрим, как создать иконку в меню админ-панели с помощью REST API, а также рассмотрим плагины и примеры кода для упрощения задачи.

Добавление иконки в меню через классический PHP: базовый пример

Для начала напомню, как в классическом подходе добавить пункт меню с иконкой:

function wpicons_add_custom_menu() {
    add_menu_page(
        'Мой плагин', // Название страницы
        'Мой плагин', // Название меню
        'manage_options', // Права
        'wpicons_custom_plugin', // Слаг
        'wpicons_render_custom_page', // Функция вывода
        'dashicons-admin-generic', // Иконка (Dashicons или URL)
        6 // Позиция
    );
}
add_action('admin_menu', 'wpicons_add_custom_menu');

function wpicons_render_custom_page() {
    echo '<h1>Добро пожаловать в мой плагин!</h1>';
}

Здесь для иконки используется встроенный шрифт Dashicons. Можно указать URL на SVG или PNG, если нужно кастомное изображение.

Использование SVG-иконок

Для более гибкой кастомизации рекомендуют использовать SVG. В add_menu_page в параметр иконки можно передать URL:

add_menu_page('Мой плагин', 'Мой плагин', 'manage_options', 'wpicons_custom_plugin', 'wpicons_render_custom_page', plugin_dir_url(__FILE__) . 'assets/icon.svg', 6);

Однако, такой способ не всегда корректно отображается, особенно в мобильных или разных браузерах, поэтому стоит рассмотреть современный метод с REST API.

Создание иконки в меню через REST API и JavaScript (React)

Современная админ-панель WordPress построена на React и использует REST API для динамического управления меню. Чтобы добавить пункт меню с иконкой через REST API, нужно зарегистрировать свой маршрут и использовать JavaScript для отображения.

Регистрация кастомного меню и иконки через PHP REST API

В файле плагина или темы добавляем следующий код:

function wpicons_register_rest_menu() {
    register_rest_route('wpicons/v1', '/menu', [
        'methods' => 'GET',
        'callback' => 'wpicons_rest_menu_callback',
        'permission_callback' => function () {
            return current_user_can('manage_options');
        }
    ]);
}

function wpicons_rest_menu_callback() {
    return [
        'menus' => [
            [
                'title' => 'Мой плагин',
                'slug' => 'wpicons_custom_plugin',
                'icon' => '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="#0073aa" stroke-width="2"/><path d="M6 10l4 4 4-8" stroke="#0073aa" stroke-width="2"/></svg>',
                'url' => admin_url('admin.php?page=wpicons_custom_plugin')
            ]
        ]
    ];
}

add_action('rest_api_init', 'wpicons_register_rest_menu');

Здесь мы регистрируем REST-маршрут, который возвращает данные меню с SVG-иконкой в виде строки.

Отображение меню и иконки на стороне JavaScript

В файле JavaScript (например, в административном скрипте плагина) можно получить данные через fetch и отобразить меню динамически:

fetch('/wp-json/wpicons/v1/menu')
  .then(response => response.json())
  .then(data => {
    const menuContainer = document.getElementById('wpicons-menu');
    data.menus.forEach(menu => {
      const menuItem = document.createElement('a');
      menuItem.href = menu.url;
      menuItem.innerHTML = menu.icon + ' ' + menu.title;
      menuItem.style.display = 'flex';
      menuItem.style.alignItems = 'center';
      menuItem.style.gap = '8px';
      menuContainer.appendChild(menuItem);
    });
  });

Такой подход позволяет строить меню с любыми иконками, в том числе SVG, и легко менять их через API без правки PHP.

Использование плагинов для управления иконками в админ-панели

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

Плагин Clearfy Pro

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

Плагин Expert Review

Хотя Expert Review предназначен для управления отзывами, его возможности по кастомизации админки и добавлению визуальных элементов могут быть полезны при реализации иконок и пользовательских меню. Подробнее на странице плагина.

Советы по оптимизации иконок в админ-панели

При добавлении иконок стоит помнить о производительности и совместимости:

• Используйте SVG для масштабируемости и меньшего размера файла.
• Оптимизируйте SVG через сервисы вроде SVGOMG.
• Для динамических иконок применяйте REST API и JavaScript, чтобы избежать перезагрузок и кеширования.
• Используйте стандартные шрифты иконок Dashicons, если не хотите заморачиваться с кастомными изображениями.

Важно тестировать отображение иконок на разных устройствах и браузерах, а также в мобильной версии админки.

Итог: универсальное решение для кастомных иконок в WordPress

Добавление иконок в меню админ-панели — несложная задача, но подходы зависят от целей и архитектуры проекта. Классический метод через add_menu_page подходит для простых случаев, а REST API + JavaScript открывают новые возможности для динамики и интерактивности.

Если нужна простота, используйте встроенные Dashicons или плагины типа Clearfy Pro. Для кастомных решений и масштабируемости — REST API и SVG с динамическим рендерингом.