Как создать динамические иконки для уведомлений в админ-панели WordPress

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

Почему динамические иконки важны для уведомлений в WordPress

Статические иконки часто не передают всю необходимую информацию. Динамические иконки помогают визуально выделять разные типы уведомлений — ошибки, предупреждения, успехи или информационные сообщения. Это улучшает восприятие и ускоряет реакцию администратора.

Использование динамических иконок особенно актуально в больших проектах с множеством событий и сообщений, где важно быстро ориентироваться в состоянии сайта.

Реализовать такую функциональность можно с помощью добавления кастомных уведомлений в админ-панель WordPress и использования CSS иконок, SVG или шрифтовых иконок, например FontAwesome.

Добавляем кастомные уведомления с динамическими иконками в админ-панель (PHP + CSS)

Для начала создадим простой пример кастомного уведомления с иконкой, которая меняется в зависимости от типа сообщения.

<?php
// Функция для вывода уведомления с динамической иконкой
function wpicons_admin_notice_dynamic_icon() {
    // Типы уведомлений: success, warning, error, info
    $notice_type = 'warning'; // Можно менять динамически

    // Определяем класс и иконку для типа
    $icon_class = '';
    switch ($notice_type) {
        case 'success':
            $icon_class = 'dashicons-yes';
            break;
        case 'error':
            $icon_class = 'dashicons-no-alt';
            break;
        case 'warning':
            $icon_class = 'dashicons-warning';
            break;
        case 'info':
        default:
            $icon_class = 'dashicons-info';
            break;
    }

    echo '<div class="notice notice-' . esc_attr($notice_type) . ' is-dismissible">';
    echo '<p><span class="dashicons ' . esc_attr($icon_class) . '" style="font-size:20px; vertical-align:middle; margin-right:8px;"></span>';
    echo 'Это пример динамического уведомления с иконкой типа "' . esc_html($notice_type) . '".';
    echo '</p></div>';
}
add_action('admin_notices', 'wpicons_admin_notice_dynamic_icon');
?>

В этом коде мы используем dashicons — встроенный в WordPress набор иконок, доступный по умолчанию. Выбираем класс иконки в зависимости от типа уведомления. Таким образом, иконка меняется динамически.

Настройка типов уведомлений и иконок

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

Использование FontAwesome для динамических иконок в уведомлениях

Для более гибкого и современного интерфейса часто используют FontAwesome. Чтобы подключить FontAwesome в админ-панель, добавим следующий код:

<?php
function wpicons_enqueue_fontawesome_admin() {
    wp_enqueue_style('wpicons-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0');
}
add_action('admin_enqueue_scripts', 'wpicons_enqueue_fontawesome_admin');
?>

Теперь изменим функцию вывода уведомления, чтобы использовать иконки FontAwesome:

<?php
function wpicons_admin_notice_fa_icon() {
    $notice_type = 'error';

    $icon_class = '';
    switch ($notice_type) {
        case 'success':
            $icon_class = 'fa-solid fa-circle-check';
            break;
        case 'error':
            $icon_class = 'fa-solid fa-circle-xmark';
            break;
        case 'warning':
            $icon_class = 'fa-solid fa-triangle-exclamation';
            break;
        case 'info':
        default:
            $icon_class = 'fa-solid fa-info-circle';
            break;
    }

    echo '<div class="notice notice-' . esc_attr($notice_type) . ' is-dismissible">';
    echo '<p><i class="' . esc_attr($icon_class) . '" style="margin-right:8px; color:#555;"></i>';
    echo 'Уведомление с иконкой FontAwesome типа "' . esc_html($notice_type) . '".';
    echo '</p></div>';
}
add_action('admin_notices', 'wpicons_admin_notice_fa_icon');
?>

Такой подход расширяет возможности кастомизации иконок и позволяет использовать тысячи иконок из FontAwesome.

Динамические иконки на основе AJAX и PHP для обновления уведомлений в реальном времени

Для сложных проектов может понадобиться обновлять уведомления с иконками без перезагрузки страницы. Для этого используем AJAX и WordPress REST API.

Шаг 1. Создаем REST API endpoint для получения статуса уведомлений

<?php
add_action('rest_api_init', function () {
    register_rest_route('wpicons/v1', '/notifications', array(
        'methods' => 'GET',
        'callback' => 'wpicons_rest_get_notifications',
        'permission_callback' => function () {
            return current_user_can('manage_options');
        }
    ));
});

function wpicons_rest_get_notifications() {
    // Пример данных уведомлений
    return array(
        'type' => 'success',
        'message' => 'Новая важная информация!',
        'icon' => 'fa-solid fa-circle-check'
    );
}
?>

Шаг 2. Добавляем JavaScript для периодического обновления уведомлений

В админ-панель добавим скрипт, который будет опрашивать REST API и обновлять уведомления:

<?php
function wpicons_enqueue_admin_script() {
    wp_enqueue_script('wpicons-admin-notices', plugin_dir_url(__FILE__) . 'wpicons-admin-notices.js', array('jquery'), '1.0', true);
    wp_localize_script('wpicons-admin-notices', 'wpiconsData', array(
        'restUrl' => esc_url_raw(rest_url('wpicons/v1/notifications')),
        'nonce' => wp_create_nonce('wp_rest'),
    ));
}
add_action('admin_enqueue_scripts', 'wpicons_enqueue_admin_script');
?>

В файле wpicons-admin-notices.js добавим:

jQuery(document).ready(function($) {
    function wpiconsFetchNotification() {
        $.ajax({
            url: wpiconsData.restUrl,
            method: 'GET',
            beforeSend: function(xhr) {
                xhr.setRequestHeader('X-WP-Nonce', wpiconsData.nonce);
            },
            success: function(data) {
                var noticeHtml = '<div class="notice notice-' + data.type + ' is-dismissible">' +
                    '<p><i class="' + data.icon + '" style="margin-right:8px; color:#555;"></i>' + data.message + '</p></div>';
                $('#wpicons-admin-notice-container').html(noticeHtml);
            },
            error: function() {
                console.log('Ошибка загрузки уведомлений');
            }
        });
    }

    // Добавляем контейнер уведомлений в админку
    $('body').prepend('<div id="wpicons-admin-notice-container"></div>');

    // Запускаем первый запрос и затем обновляем каждые 60 секунд
    wpiconsFetchNotification();
    setInterval(wpiconsFetchNotification, 60000);
});

Рекомендации по оптимизации и безопасности

При работе с динамическими уведомлениями и иконками важно учитывать несколько моментов:

• Безопасность REST API: всегда проверяйте права пользователя через permission_callback и используйте nonce для AJAX-запросов.
• Кэширование: если уведомления не меняются часто, используйте кэширование для снижения нагрузки на сервер.
• Оптимизация загрузки иконок: подключайте только необходимые шрифты и иконки, чтобы не замедлять админку.
• Юзабилити: делайте уведомления информативными, используйте цветовую дифференциацию и понятные иконки.

Заключение

Создание динамических иконок для уведомлений в админ-панели WordPress — это отличный способ повысить удобство и информативность интерфейса. Мы рассмотрели несколько способов реализации — от простого использования dashicons до интеграции FontAwesome и динамического обновления через REST API и AJAX. Такой подход можно адаптировать под любые задачи и расширять функционал в зависимости от потребностей проекта.

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