В WordPress админ-панели иконки играют важную роль, помогая визуально выделить разделы, настройки и элементы управления. Часто бывает нужно добавить собственные иконки для кастомных меню, страниц или виджетов. В этой статье мы подробно разберём, как добавить иконки в админ-панель WordPress через REST API, что позволяет работать с данными асинхронно и создавать динамический интерфейс.
Почему именно REST API для добавления иконок в админку WordPress
REST API — мощный инструмент, который позволяет создавать интерактивные и динамичные интерфейсы, загружая и отправляя данные без перезагрузки страницы. В случае с иконками в админ-панели это удобно, если нужно:
- Загружать иконки из внешних источников или кастомных наборов;
- Динамически менять иконки в зависимости от состояния или пользовательских настроек;
- Обеспечить расширяемость и масштабируемость кода.
Использование REST API освобождает от необходимости жестко прописывать иконки в коде — теперь можно передавать их URL и параметры через запросы, а фронтенд будет отображать их при необходимости.
Как добавить иконки в кастомное меню WordPress через REST API
Рассмотрим пример, как создать собственное меню в админке и добавить к нему иконку, загруженную через REST API.
Регистрация кастомного REST эндпоинта для возвращения данных об иконках
Сначала создадим REST API маршрут, который будет отдавать JSON с URL иконок:
add_action('rest_api_init', function () { register_rest_route('wpicons/v1', '/icons', array( 'methods' => 'GET', 'callback' => 'wpicons_get_admin_icons', 'permission_callback' => function () { return current_user_can('manage_options'); }, ));});function wpicons_get_admin_icons() { return array( 'custom_icon' => plugins_url('assets/custom-icon.svg', __FILE__), 'another_icon' => 'https://example.com/icons/another-icon.png', );}Данный эндпоинт возвращает JSON с ссылками на иконки, к которым мы будем обращаться из JavaScript.
Добавление меню и подключение скрипта для загрузки иконок
Теперь зарегистрируем меню в админке и подключим JS-скрипт, который получит иконки и добавит их к меню:
add_action('admin_menu', function () { add_menu_page( 'WPIcons Custom Menu', 'WPIcons Menu', 'manage_options', 'wpicons-custom-menu', 'wpicons_render_custom_menu_page', 'dashicons-admin-generic', 26 );});function wpicons_render_custom_menu_page() { echo '<div id="wpicons-custom-menu-root"></div>';}add_action('admin_enqueue_scripts', function ($hook) { if ($hook !== 'toplevel_page_wpicons-custom-menu') return; wp_enqueue_script( 'wpicons-admin-js', plugins_url('admin.js', __FILE__), array('jquery'), '1.0', true );});В файле admin.js будет код, который вызовет REST API и заменит иконку меню:
jQuery(document).ready(function($) { $.getJSON(wpApiSettings.root + 'wpicons/v1/icons', function(data) { if(data.custom_icon) { $('.toplevel_page_wpicons-custom-menu .wp-menu-image svg, .toplevel_page_wpicons-custom-menu .wp-menu-image img').remove(); $('.toplevel_page_wpicons-custom-menu .wp-menu-image').append('<img src="' + data.custom_icon + '" style="width:20px;height:20px;" />'); } });});Использование плагинов для управления иконками в админ-панели
Если хочется упростить работу с иконками, можно обратить внимание на плагины, которые расширяют функционал админки:
- Clearfy Pro — предлагает оптимизацию и гибкую настройку интерфейса, включая управление иконками и меню;
- WPRemark — позволяет добавлять кастомные иконки к меню и страницам без кода;
- Expert Review — содержит инструменты для кастомизации админки, в том числе иконок.
Подробную информацию и ссылки на эти плагины можно найти на wpshop.ru.
Динамическое обновление иконок в админке с помощью REST API и JavaScript
REST API позволяет не только загружать иконки при загрузке страницы, но и менять их динамически в зависимости от действий пользователя.
Пример динамической смены иконки
Допустим, у нас есть кнопка, при нажатии на которую иконка меню меняется на другую. Для этого расширим скрипт:
jQuery(document).ready(function($) { function wpicons_updateIcon(newIconUrl) { $('.toplevel_page_wpicons-custom-menu .wp-menu-image img').attr('src', newIconUrl); } // Изначальная загрузка иконки $.getJSON(wpApiSettings.root + 'wpicons/v1/icons', function(data) { if(data.custom_icon) { $('.toplevel_page_wpicons-custom-menu .wp-menu-image svg, .toplevel_page_wpicons-custom-menu .wp-menu-image img').remove(); $('.toplevel_page_wpicons-custom-menu .wp-menu-image').append('<img src="' + data.custom_icon + '" style="width:20px;height:20px;" />'); } }); // Обработчик кнопки для смены иконки $('#change-icon-btn').on('click', function() { wpicons_updateIcon('https://example.com/icons/updated-icon.png'); });});В HTML страницы можно добавить кнопку:
<button id="change-icon-btn">Сменить иконку меню</button>Таким образом, иконка обновится без перезагрузки страницы.
Выводы и рекомендации по работе с иконками в админ-панели WordPress
Добавление иконок через REST API — современный и гибкий подход, который позволяет создавать динамические и удобные пользовательские интерфейсы в админке WordPress. Основные рекомендации:
- Используйте кастомные REST маршруты для передачи данных об иконках;
- Обрабатывайте данные на фронтенде с помощью JavaScript и jQuery;
- Оптимизируйте загрузку иконок, используя SVG или минимизированные PNG;
- Для упрощения задачи рассмотрите готовые плагины, например, Clearfy Pro;
- Тестируйте работу иконок в разных браузерах и разрешениях.
Используя описанные подходы, вы сможете создавать удобные и визуально привлекательные админские интерфейсы, которые легко поддерживать и расширять.