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

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

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

Стандартные уведомления WordPress имеют ограниченный набор иконок и стилей, что не всегда удобно для кастомных решений. Динамические иконки позволяют:

• Визуально выделять разные типы уведомлений (ошибки, успехи, предупреждения, информация).
• Использовать кастомные SVG или шрифты иконок для лучшей адаптации под дизайн сайта.
• Добавлять анимацию и интерактивность для повышения удобства и восприятия.

Особенно это актуально, если вы разрабатываете собственные плагины или расширяете функционал админ-панели.

Создаем базовое уведомление с иконкой в админке WordPress

Начнем с простого примера: добавим уведомление с иконкой FontAwesome. Для этого подключим библиотеку и выведем уведомление с динамической иконкой.

Подключение FontAwesome в админку

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

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

Этот код подключит последнюю версию FontAwesome в админ-панель.

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

Теперь добавим уведомление с иконкой, меняющейся в зависимости от типа сообщения:

function wpicons_admin_notice_dynamic_icon() {
    $type = 'success'; // Можно менять на 'error', 'warning', 'info'
    $icon_class = '';
    switch ($type) {
        case 'success':
            $icon_class = 'fa-circle-check';
            $class = 'notice notice-success is-dismissible';
            break;
        case 'error':
            $icon_class = 'fa-circle-xmark';
            $class = 'notice notice-error is-dismissible';
            break;
        case 'warning':
            $icon_class = 'fa-triangle-exclamation';
            $class = 'notice notice-warning is-dismissible';
            break;
        default:
            $icon_class = 'fa-info-circle';
            $class = 'notice notice-info is-dismissible';
            break;
    }
    echo '<div class="' . esc_attr($class) . '">';
    echo '<p><i class="fa ' . esc_attr($icon_class) . '" style="margin-right:10px;"></i>Это уведомление с динамической иконкой!</p>';
    echo '</div>';
}
add_action('admin_notices', 'wpicons_admin_notice_dynamic_icon');

В этом примере иконка меняется в зависимости от типа уведомления. Вы можете динамически менять $type на основе логики вашего плагина или темы.

Использование SVG иконок для расширенной кастомизации

FontAwesome — универсальное решение, но для уникального дизайна лучше использовать собственные SVG иконки. Рассмотрим, как добавить SVG иконку к уведомлению.

Пример вставки SVG иконки в уведомление

Создадим функцию, которая возвращает SVG код и добавим его в уведомление:

function wpicons_get_svg_icon($type) {
    $icons = [
        'success' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="#28a745" stroke-width="2"/><path d="M7 13l3 3 7-7" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
        'error' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="#dc3545" stroke-width="2"/><path d="M15 9l-6 6M9 9l6 6" stroke="#dc3545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
        'warning' => '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="#ffc107" stroke-width="2"/><path d="M12 8v4" stroke="#ffc107" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="16" r="1" fill="#ffc107"/></svg>',
    ];
    return $icons[$type] ?? '';
}

function wpicons_admin_notice_svg_icon() {
    $type = 'warning';
    $class = 'notice notice-warning is-dismissible';
    $svg_icon = wpicons_get_svg_icon($type);
    echo '<div class="' . esc_attr($class) . '">';
    echo '<p>' . $svg_icon . ' Внимание! Это уведомление с SVG иконкой.</p>';
    echo '</div>';
}
add_action('admin_notices', 'wpicons_admin_notice_svg_icon');

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

Добавление анимации и интерактивности к иконкам уведомлений

Для улучшения UX можно добавить анимацию к иконкам с помощью CSS и JavaScript. Например, легкое мерцание или вращение иконки при появлении уведомления.

Пример CSS анимации для иконки

Добавим в функции подключение кастомного CSS:

function wpicons_admin_custom_css() {
    echo '<style>
    .wpicons-icon-spin {
        display: inline-block;
        animation: wpicons-spin 2s linear infinite;
        margin-right: 10px;
    }
    @keyframes wpicons-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    </style>';
}
add_action('admin_head', 'wpicons_admin_custom_css');

И применим класс wpicons-icon-spin к иконке в уведомлении:

function wpicons_admin_notice_animated_icon() {
    $class = 'notice notice-info is-dismissible';
    echo '<div class="' . esc_attr($class) . '">';
    echo '<p><i class="fa fa-cog wpicons-icon-spin"></i> Загрузка данных...</p>';
    echo '</div>';
}
add_action('admin_notices', 'wpicons_admin_notice_animated_icon');

Такое решение улучшит визуальное восприятие и добавит динамичности вашим уведомлениям.

Рекомендации по использованию динамических иконок в админ-панели

Чтобы реализовать динамические иконки эффективно, учитывайте следующие моменты:

• Оптимизируйте SVG иконки перед использованием — удаляйте лишние атрибуты и минифицируйте код.
• Используйте системные и популярные библиотеки (FontAwesome, Dashicons) для совместимости.
• Добавляйте возможность отключения кастомных стилей и скриптов для предотвращения конфликтов.
• Обрабатывайте разные состояния уведомлений (успех, ошибка, предупреждение) с разными иконками и цветами для лучшей информативности.
• Тестируйте на разных разрешениях и темах оформления админ-панели.

Заключение

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

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