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

В этой статье подробно рассмотрим, как сделать в WordPress динамические иконки, которые можно менять через админку без правки кода. Для примера возьмём библиотеку иконок FontAwesome и плагин Advanced Custom Fields (ACF). Это позволит создавать кастомные поля для выбора иконок, а на фронтенде выводить выбранные иконки в нужных местах.

Почему динамические иконки важны и как это работает

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

С помощью ACF мы создаём поле, где можно выбрать название иконки из FontAwesome (например, через селект с вариантами). Затем в шаблоне выводим нужный HTML с классом иконки. Таким образом, при изменении значения в админке иконка меняется автоматически.

Шаг 1. Установка и настройка плагина Advanced Custom Fields

Для начала нужно установить и активировать плагин ACF. Это можно сделать через админку WordPress в разделе «Плагины» → «Добавить новый», найти «Advanced Custom Fields» и установить.

После активации создаём новое поле:

• Перейдите в «Пользовательские поля» → «Добавить новый».
• Создайте группу полей, например «Иконка записи».
• Добавьте поле типа «Select» (выбор из списка). Назовём поле wpicons_icon_name.
• В опциях поля добавьте список популярных классов FontAwesome, например:
  fa-home : Дом
fa-user : Пользователь
fa-cog : Настройки
fa-envelope : Почта
• Настройте правило показа, например, для типа записи «Запись».
• Сохраните группу полей.

Шаг 2. Подключение FontAwesome к теме

Чтобы иконки отображались, нужно подключить CSS библиотеки FontAwesome. В файле functions.php вашей темы добавьте функцию для подключения стилей:

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

Это подключит последнюю стабильную версию FontAwesome с CDN.

Шаг 3. Вывод динамической иконки в шаблоне записи

Теперь нужно вывести выбранную иконку для записи. В файле шаблона, например single.php или где нужно, добавьте такой код:

function wpicons_get_dynamic_icon() {
    $icon_class = get_field('wpicons_icon_name');
    if ($icon_class) {
        return '<i class="fa-solid ' . esc_attr($icon_class) . '"></i>';
    }
    return '';
}

// В месте вывода
echo wpicons_get_dynamic_icon();

Объяснение:

• get_field() — функция ACF для получения значения поля.
• Если значение есть, выводим тег i с классом из FontAwesome.
• Используем fa-solid для стиля иконки.

Шаг 4. Улучшение: добавим выбор иконок с предпросмотром

Чтобы упростить выбор иконок для контент-менеджера, можно использовать плагин WPRemark или другие расширения для ACF, которые визуально показывают иконки в селекте.

Если хотите сделать это самостоятельно, можно заменить поле «Select» на «Текст» и импортировать полный список иконок FontAwesome, либо создать кастомный интерфейс выбора с помощью JavaScript в админке.

Шаг 5. Пример более сложного вывода с цветом и анимацией

Вы можете расширить функционал, добавив отдельное поле для цвета и включив CSS-анимации. Например, в группе полей добавьте цветовой селектор wpicons_icon_color. В шаблоне вывод будет таким:

function wpicons_get_dynamic_icon_with_color() {
    $icon_class = get_field('wpicons_icon_name');
    $color = get_field('wpicons_icon_color');
    if ($icon_class) {
        $style = $color ? 'style="color:' . esc_attr($color) . '"' : '';
        return '<i class="fa-solid ' . esc_attr($icon_class) . ' fa-bounce" ' . $style . '></i>';
    }
    return '';
}

echo wpicons_get_dynamic_icon_with_color();

Здесь мы добавили класс fa-bounce, который встроен в FontAwesome и позволяет задать анимацию подпрыгивания иконки. Цвет задаётся инлайновым стилем из поля ACF.

Советы по оптимизации

• Подключайте только нужные стили FontAwesome, если используете Pro-версию или собираете кастомный набор.
• Кэшируйте результаты функции вывода иконок, чтобы снизить нагрузку.
• Если нужно много иконок на странице, подумайте о спрайтах SVG для производительности.
• Используйте Clearfy Pro для оптимизации загрузки и управления скриптами и стилями.

Вывод

Динамические иконки на основе FontAwesome и ACF — это мощный и гибкий инструмент для разработки WordPress-сайтов. Такой подход позволяет контент-менеджерам легко менять визуальную составляющую без вмешательства в код, а разработчикам — быстро внедрять кастомные решения. Используйте примеры из статьи как шаблон для своих проектов, дополняя их по необходимости.