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

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

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

Статичные растровые иконки (PNG, JPG) плохо масштабируются — при увеличении они теряют чёткость, а при уменьшении могут выглядеть размытыми. SVG и шрифты иконок (FontAwesome, Dashicons) — векторные, их легко масштабировать без потери качества и они отлично подходят для динамического вывода.

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

Использование SVG с динамическим размером

SVG — оптимальный формат для иконок. Рассмотрим, как выводить SVG иконки с разными размерами через PHP функцию.

Пример PHP функции для вывода SVG с динамическим размером

function wpicons_get_svg_icon($icon_name, $size = 24) {
    $svg_path = get_template_directory() . '/assets/icons/' . $icon_name . '.svg';

    if (!file_exists($svg_path)) {
        return '';
    }

    $svg_content = file_get_contents($svg_path);

    // Добавляем атрибуты width и height
    $svg_content = preg_replace('/<svg /', '<svg width="' . intval($size) . '" height="' . intval($size) . '" ', $svg_content, 1);

    return $svg_content;
}

Вызов функции в шаблоне:

echo wpicons_get_svg_icon('search', 32); // Выведет иконку поиска размером 32x32

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

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

FontAwesome — популярный набор иконок, который легко масштабируется через CSS классы или стили.

Пример динамического вывода иконок FontAwesome с разными размерами

Подключаем FontAwesome (если ещё не подключён):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

PHP функция для вывода иконки с произвольным размером в пикселях:

function wpicons_fa_icon($icon_name, $size = 24, $color = '') {
    $style = 'font-size:' . intval($size) . 'px;';
    if ($color) {
        $style .= 'color:' . esc_attr($color) . ';';
    }
    return '<i class="fa fa-' . esc_attr($icon_name) . '" style="' . $style . '"></i>';
}

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

echo wpicons_fa_icon('user', 40, '#0073aa'); // Иконка пользователя 40px синего цвета

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

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

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

Пример скрипта для изменения размера иконок FontAwesome

document.querySelectorAll('.dynamic-icon').forEach(function(el) {
    el.style.fontSize = '24px';
});

// Функция для изменения размера иконок с классом .dynamic-icon
function wpiconsChangeIconSize(newSize) {
    document.querySelectorAll('.dynamic-icon').forEach(function(el) {
        el.style.fontSize = newSize + 'px';
    });
}

// Пример вызова с размером 48px
wpiconsChangeIconSize(48);

Добавляйте иконкам класс dynamic-icon, чтобы скрипт мог их найти и изменить размер.

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

Если ваш сайт использует много иконок, плагин Clearfy Pro (https://wpshop.ru/clearfy-pro/?utm_source=wpicons.ru&utm_medium=article&utm_campaign=kak-sozdat-dinamicheskie-ikonki-s-raznymi-razmerami-v-wordpress) поможет оптимизировать загрузку CSS и JS библиотек иконок, отключить лишние стили и повысить скорость сайта.

Выводы и рекомендации

• Используйте SVG иконки для максимальной гибкости и качества.
• Для быстрого решения отлично подходит FontAwesome с управлением через CSS и PHP.
• Динамическое изменение размеров через JavaScript расширяет возможности UX.
• Плагины оптимизации, такие как Clearfy Pro, помогут уменьшить нагрузку от иконок.

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