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

Введение в автоматизацию управления иконками в WordPress

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

Автоматический вывод SVG-иконок с помощью PHP

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

Пример функции для wpicons, которая выводит SVG-иконку по имени, расположенную в папке /wp-content/themes/ваша_тема/icons/:

function wpicons_get_svg_icon($icon_name, $class = '') {
    $icon_path = get_template_directory() . '/icons/' . $icon_name . '.svg';
    if (!file_exists($icon_path)) {
        return '';
    }
    $svg = file_get_contents($icon_path);
    if ($class) {
        // Добавим класс в тег svg
        $svg = preg_replace('/<svg /', '<svg class="' . esc_attr($class) . '" ', $svg, 1);
    }
    return $svg;
}

Использование в шаблоне:

echo wpicons_get_svg_icon('search', 'icon-search');

Это позволяет централизованно управлять иконками и добавлять их в любое место сайта без дублирования кода.

Динамический выбор иконок для категорий

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

function wpicons_get_category_icon($category_id) {
    $icons = [
        1 => 'folder',
        2 => 'star',
        3 => 'heart',
    ];
    if (isset($icons[$category_id])) {
        return wpicons_get_svg_icon($icons[$category_id], 'category-icon');
    }
    return wpicons_get_svg_icon('default', 'category-icon');
}

В шаблоне архива категорий:

$category = get_queried_object();
echo wpicons_get_category_icon($category->term_id);

Динамическая замена иконок с помощью JavaScript

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

Пример: меняем иконку кнопки при клике.

document.addEventListener('DOMContentLoaded', function() {
    var button = document.querySelector('.wpicons-toggle-icon');
    if (!button) return;

    button.addEventListener('click', function() {
        var icon = this.querySelector('svg');
        if (!icon) return;

        if (this.classList.contains('active')) {
            icon.innerHTML = '<use xlink:href="#icon-play"></use>';
            this.classList.remove('active');
        } else {
            icon.innerHTML = '<use xlink:href="#icon-pause"></use>';
            this.classList.add('active');
        }
    });
});

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

Подключение SVG-спрайтов

Создайте файл sprite.svg с набором иконок и подключите его в шаблоне:

<div style="display:none;">
    <?php echo file_get_contents( get_template_directory() . '/icons/sprite.svg' ); ?>
</div>

Теперь в HTML можно вставлять иконки так:

<svg class="icon"><use xlink:href="#icon-play"></use></svg>

Пример интеграции с плагином WPGPT для создания иконок по запросу

Если вы используете плагин WPGPT, можно автоматизировать создание иконок на основе AI-запросов и вставлять их динамически в контент.

Пример вызова API плагина для генерации SVG-иконки и вывода результата в шаблоне:

function wpicons_generate_icon_with_wpgpt($prompt) {
    if (!function_exists('wpgpt_generate_svg_icon')) {
        return '';
    }
    $svg_icon = wpgpt_generate_svg_icon($prompt);
    return $svg_icon ?: '';
}

// Использование:
echo wpicons_generate_icon_with_wpgpt('minimalistic search icon');

Оптимизация загрузки иконок и советы по безопасности

При работе с иконками важно учитывать производительность. Используйте:

• SVG-спрайты для уменьшения количества HTTP-запросов
• кеширование содержимого SVG в transient или опциях WordPress
• обработку ошибок при загрузке файлов

Также будьте внимательны при выводе SVG через PHP — всегда фильтруйте и проверяйте содержимое, чтобы избежать XSS-уязвимостей.

Пример фильтрации SVG с помощью встроенной функции WordPress:

function wpicons_sanitize_svg($svg) {
    return wp_kses($svg, [
        'svg' => [
            'xmlns' => true,
            'width' => true,
            'height' => true,
            'viewBox' => true,
            'fill' => true,
            'stroke' => true,
            'stroke-width' => true,
            'stroke-linecap' => true,
            'stroke-linejoin' => true,
            'class' => true,
        ],
        'path' => ['d' => true, 'fill' => true, 'stroke' => true],
        'circle' => ['cx' => true, 'cy' => true, 'r' => true, 'fill' => true],
        'use' => ['xlink:href' => true],
    ]);
}