Как создать динамические иконки в теме WordPress с примерами кода

Автор: Владимир Карпов | Опубликовано: 22.01.2026

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

Почему именно SVG для иконок? Преимущества и особенности

SVG (Scalable Vector Graphics) — это векторный формат изображений, который отлично подходит для иконок, так как:

Масштабируется без потери качества;
Легко изменяется динамически через CSS и JavaScript;
Малый размер файла при правильной оптимизации;
Можно встроить прямо в HTML-код;
Поддерживает анимацию и интерактивность.

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

Создание функции для вывода динамических SVG-иконок в теме WordPress

Начнем с создания PHP-функции, которая будет выводить SVG-иконку с возможностью передачи параметров, таких как цвет, размер и дополнительные CSS-классы. Это позволит удобно использовать иконки в разных частях темы.

function wpthemes_get_svg_icon($name, $args = array()) {
    $defaults = array(
        'width' => 24,
        'height' => 24,
        'fill' => 'currentColor',
        'class' => '',
    );
    $args = array_merge($defaults, $args);

    $icons = array(
        'search' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="'.esc_attr($args['fill']).'" width="'.intval($args['width']).'" height="'.intval($args['height']).'" class="'.esc_attr($args['class']).'"><path d="M21 20l-5.6-5.6a7 7 0 1 0-1.4 1.4L20 21zM10 16a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"/></svg>',
        'menu' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="'.esc_attr($args['fill']).'" width="'.intval($args['width']).'" height="'.intval($args['height']).'" class="'.esc_attr($args['class']).'"><rect y="4" width="24" height="2"/><rect y="11" width="24" height="2"/><rect y="18" width="24" height="2"/></svg>',
        // Добавьте другие иконки по необходимости
    );

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

    return $icons[$name];
}

Эта функция хранит SVG-строки в массиве $icons. Вы можете расширять список иконок, добавляя свои SVG-коды. Параметры позволяют изменить размер, цвет и CSS-класс иконки.

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

Чтобы вывести иконку поиска с красным цветом и размером 30x30 пикселей, используйте:

echo wpthemes_get_svg_icon('search', array('fill' => '#ff0000', 'width' => 30, 'height' => 30));

Это выведет инлайн SVG-код с заданными параметрами, который можно стилизовать через CSS или JavaScript.

Динамическая смена иконок с помощью JavaScript на примере темы WordPress

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

Для этого можно заранее вывести обе иконки в HTML с разными классами и менять их видимость с помощью JavaScript.

<button id="menu-toggle" aria-label="Toggle menu">
    <span class="icon-menu">
        <?php echo wpthemes_get_svg_icon('menu', array('class' => 'svg-icon')); ?>
    </span>
    <span class="icon-close" style="display:none;">
        <?php echo wpthemes_get_svg_icon('close', array('class' => 'svg-icon')); ?>
    </span>
</button>

<script>
document.getElementById('menu-toggle').addEventListener('click', function() {
    var menuIcon = this.querySelector('.icon-menu');
    var closeIcon = this.querySelector('.icon-close');
    if (menuIcon.style.display === 'none') {
        menuIcon.style.display = 'inline';
        closeIcon.style.display = 'none';
    } else {
        menuIcon.style.display = 'none';
        closeIcon.style.display = 'inline';
    }
});
</script>

Для этого примера добавьте иконку close в массив $icons функции wpthemes_get_svg_icon аналогично другим.

Использование плагина Clearfy Pro для управления SVG иконками

Если вы используете Clearfy Pro, то он предлагает дополнительные возможности по оптимизации и безопасности SVG. Плагин позволяет разрешать загрузку SVG-файлов в медиабиблиотеку WordPress и автоматически очищает SVG от лишнего кода, что повышает безопасность.

После установки и активации Clearfy Pro в разделе настроек можно включить опцию поддержки SVG, а затем загружать свои иконки в формате SVG и подключать их через CSS или PHP.

Это особенно полезно, если вы хотите использовать не инлайн-свг, а отдельные файлы с иконками, сохраняя при этом контроль и безопасность.

Советы по оптимизации и безопасности работы с SVG-иконками в WordPress

SVG, как и любой код, может содержать вредоносные скрипты. Вот несколько рекомендаций:

Используйте только проверенные SVG-файлы или генерируйте их самостоятельно.
Оптимизируйте SVG через сервисы типа SVGOMG.
Используйте плагины, например Clearfy Pro, для очистки SVG.
Не позволяйте неавторизованным пользователям загружать SVG в медиабиблиотеку.
Если используете инлайн SVG, проверяйте код на наличие скриптов.

Соответствие этим рекомендациям поможет избежать проблем с безопасностью и улучшить производительность сайта.

Заключение: эффективное использование динамических иконок в вашей теме

Создание динамических SVG-иконок с помощью PHP-функций и их управление через JavaScript позволяет сделать интерфейс сайта более интерактивным и современным. Такой подход уменьшает количество HTTP-запросов, повышает скорость загрузки и упрощает кастомизацию.

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