Как автоматизировать обновление иконок FontAwesome в WordPress без плагинов

Диагностика проблемы: почему важно обновлять FontAwesome в WordPress

FontAwesome регулярно выпускает новые версии с дополнительными иконками, исправлениями багов и улучшениями производительности. Если вы подключаете библиотеку иконок вручную или через CDN, существует риск, что сайт будет использовать устаревшую версию. Это приводит к отсутствию новых иконок или появлению конфликтов с другими компонентами темы или плагинов. В WooCommerce и кастомных решениях это особенно критично, когда иконки используются для обозначения статусов, действий или категорий.

Первый шаг — проверить, какую версию FontAwesome вы используете на сайте. Откройте консоль браузера (F12) и выполните в консоли JavaScript:

console.log(FontAwesome ? FontAwesome.version : 'FontAwesome не загружен');

Если получите ошибку или версию ниже актуальной (например, 6.4.0), пора обновлять.

Пошаговое решение: автоматизация подключения последней версии FontAwesome через functions.php

1. Удаление старых подключений

В первую очередь, нужно убедиться, что в вашей теме или плагинах не подключается FontAwesome вручную. Обычно это wp_enqueue_style с URL на старую версию. Найдите и удалите или отключите эти вызовы.

2. Подключение FontAwesome через официальный CDN с версией в переменной

Добавьте в functions.php следующий код для подключения последней стабильной версии (замените $version по необходимости):

function wpicons_enqueue_fontawesome() {
    $version = '6.4.0'; // актуальная версия FontAwesome на момент написания
    wp_enqueue_style('fontawesome', "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{$version}/css/all.min.css", array(), $version);
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');

3. Автоматическое обновление версии через transient и запрос к CDN

Чтобы не менять вручную версию в коде, можно реализовать проверку последней доступной версии с CDN и кэшировать результат на 24 часа:

function wpicons_get_latest_fa_version() {
    $transient_key = 'wpicons_fa_latest_version';
    $cached_version = get_transient($transient_key);
    if ($cached_version !== false) {
        return $cached_version;
    }

    $response = wp_remote_get('https://api.cdnjs.com/libraries/font-awesome');
    if (is_wp_error($response)) {
        return '6.4.0'; // fallback
    }

    $data = json_decode(wp_remote_retrieve_body($response));
    if (!empty($data->version)) {
        set_transient($transient_key, $data->version, DAY_IN_SECONDS);
        return $data->version;
    }

    return '6.4.0';
}

function wpicons_enqueue_fontawesome_dynamic() {
    $version = wpicons_get_latest_fa_version();
    wp_enqueue_style('fontawesome', "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{$version}/css/all.min.css", array(), $version);
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome_dynamic');

Проверка результата после внедрения

• Очистите кеш браузера и кеш сайта (если используется) и перезагрузите страницу.
• В консоли разработчика выполните console.log(FontAwesome.version) — версия должна совпадать с актуальной, которую вы получили из кода.
• Проверьте отображение иконок на странице, особенно тех, которые были недоступны в старой версии.
• Используйте инструменты типа Google PageSpeed Insights, чтобы убедиться, что подключение CDN не замедляет загрузку.

Частые ошибки и как их исправить

• Двойное подключение FontAwesome: часто из-за темы и плагина подключают библиотеку дважды. Решение — отключить в одном источнике, оставить только в functions.php.
• Ошибка CORS при загрузке CSS с CDN: убедитесь, что URL правильный и CDN доступен с вашего сервера.
• Кэширование старой версии: если WordPress или сервер кэшируют старый CSS, обновления не видны. Очистите кеш и используйте параметр версии в wp_enqueue_style.
• Проблемы с HTTPS: используйте https в URL CDN, чтобы избежать смешанного контента.

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

• Используйте проверенные CDN, например, cdnjs или jsDelivr, чтобы снизить задержку и повысить надежность.
• Кэшируйте версию FontAwesome через transient, чтобы не перегружать сервер лишними запросами.
• Если опасаетесь сторонних CDN, можно скачать и хранить FontAwesome локально, но тогда обновления придется делать вручную или через автоматизацию CI/CD.

Сравнение способов подключения FontAwesome