Как автоматизировать создание иконок в WordPress с помощью PHP и JavaScript

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

Почему нужна автоматизация иконок в WordPress

В ряде случаев у вас есть набор иконок, которые нужно отображать по разным условиям: статусам, категориям, ролям пользователей и т.д. Ручное добавление каждой иконки в контент или шаблоны усложняет поддержку и развитие сайта. Автоматизация позволяет:

• Упростить управление иконками через централизованный код.
• Обновлять стили иконок в одном месте.
• Динамически менять иконки в зависимости от контекста.
• Интегрировать иконки с пользовательскими полями или метаданными.

Для этого нам понадобятся базовые знания PHP, JavaScript и умение работать с WordPress API.

Подход к автоматизации: динамическая генерация иконок через PHP

Первым шагом создадим PHP-функцию, которая по заданному имени иконки вернёт HTML-код с SVG или шрифтовой иконкой. Это позволит вызывать её в шаблонах и шорткодах.

function wpicons_get_icon_html($icon_name, $class = '') {
    $icons = [
        'check' => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 10L3 7L4.4 5.6L6 7.2L11.6 1.6L13 3L6 10Z" fill="currentColor"/></svg>',
        'close' => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
    ];

    if (!isset($icons[$icon_name])) {
        return '';
    }

    $class_attr = $class ? ' class="' . esc_attr($class) . '"' : '';
    return '<span' . $class_attr . '>' . $icons[$icon_name] . '</span>';
}

Эта функция содержит массив с SVG-кодами иконок. Вы можете расширять его, добавляя свои иконки. Функция возвращает обёртку <span> с классом для стилизации.

Пример использования функции в шаблоне

Чтобы вывести иконку, например, «check» с классом icon-success, используйте:

echo wpicons_get_icon_html('check', 'icon-success');

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

Чтобы упростить добавление иконок в записи и страницы, создадим шорткод [wpicon] с параметрами:

• name — имя иконки
• class — CSS класс

function wpicons_shortcode_icon($atts) {
    $atts = shortcode_atts([
        'name' => '',
        'class' => '',
    ], $atts, 'wpicon');

    if (empty($atts['name'])) {
        return '';
    }

    return wpicons_get_icon_html($atts['name'], $atts['class']);
}
add_shortcode('wpicon', 'wpicons_shortcode_icon');

Теперь в контенте можно писать [wpicon name="check" class="icon-green"], и появится соответствующая иконка.

Динамическое управление иконками через JavaScript

Иногда нужно менять иконки на странице без перезагрузки — например, при смене состояния кнопки. Для этого добавим небольшой скрипт, который меняет иконку внутри элемента по ID или классу.

document.addEventListener('DOMContentLoaded', function() {
    function wpicons_changeIcon(elementSelector, iconName) {
        var icons = {
            'check': '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 10L3 7L4.4 5.6L6 7.2L11.6 1.6L13 3L6 10Z" fill="currentColor"/></svg>',
            'close': '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
        };
        var el = document.querySelector(elementSelector);
        if (el && icons[iconName]) {
            el.innerHTML = icons[iconName];
        }
    }

    // Пример использования: меняем иконку по клику
    var btn = document.getElementById('my-icon-btn');
    if (btn) {
        btn.addEventListener('click', function() {
            var currentIcon = btn.dataset.icon || 'check';
            var newIcon = currentIcon === 'check' ? 'close' : 'check';
            wpicons_changeIcon('#my-icon', newIcon);
            btn.dataset.icon = newIcon;
        });
    }
});

В этом примере есть кнопка с ID my-icon-btn и элемент с ID my-icon, где отображается иконка. При клике иконка переключается между «check» и «close».

Интеграция с плагином Clearfy Pro для оптимизации иконок

Если вы используете плагин Clearfy Pro, то сможете отключить лишние шрифты и скрипты, которые замедляют загрузку иконок. Это особенно важно, если вы подключаете FontAwesome или другие библиотеки.

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

Полезные советы по работе с иконками в WordPress

• Храните иконки в одном месте. Используйте отдельный PHP-массив или JSON-файл.
• Минимизируйте SVG. Оптимизируйте SVG-код с помощью сервисов типа SVGOMG.
• Используйте CSS-переменные. Для динамической смены цвета иконок.
• Кешируйте результаты. Если иконки генерируются динамически, используйте transient API для кеширования.
• Позаботьтесь о доступности. Добавляйте атрибуты aria-hidden="true" или используйте описания для вспомогательных технологий.

Заключение

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