Как эффективно использовать wp_enqueue_style и wp_enqueue

Автор: Сергей Сорокин | Опубликовано: 26.03.2026

В разработке тем и плагинов для WordPress правильное подключение CSS и JavaScript играет ключевую роль в производительности и стабильности сайта. Многие сталкиваются с проблемами из-за неправильного подключения стилей и скриптов, что приводит к конфликтам, дублированию и ошибкам загрузки. В этой статье мы подробно разберём, как грамотно использовать функции wp_enqueue_style и wp_enqueue_script для эффективной работы с ресурсами.

Почему важно использовать wp_enqueue_style и wp_enqueue_script

WordPress предоставляет специальные функции для подключения CSS и JS, которые позволяют управлять зависимостями, порядком загрузки и предотвращать дублирование. В отличие от прямого вставления тегов <link> и <script> в шаблонах, эти функции дают следующие преимущества:

Централизованное управление ресурсами.
Автоматическое разрешение зависимостей.
Возможность подключения ресурсов только на нужных страницах.
Поддержка версионирования для правильного кеширования.
Совместимость с другими плагинами и темами.

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

Основы использования wp_enqueue_style

Функция wp_enqueue_style используется для подключения CSS-файлов. Синтаксис простой:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle — уникальный идентификатор стиля.
$src — URL или путь к CSS-файлу.
$deps — массив зависимостей (handle других стилей).
$ver — версия файла для кеширования.
$media — тип носителя (например, all, screen, print).

Пример правильного подключения стиля в теме:

function wptemp_enqueue_styles() {
    wp_enqueue_style('wptemp-main-style', get_stylesheet_uri(), array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'wptemp_enqueue_styles');

Здесь подключается основной стиль темы с версией 1.0 для всех типов устройств.

Подключение внешних CSS

Часто нужно подключить сторонние библиотеки, например, Google Fonts:

function wptemp_enqueue_google_fonts() {
    wp_enqueue_style('wptemp-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'wptemp_enqueue_google_fonts');

Здесь версия null, чтобы избежать добавления параметра ?ver.

Правильное использование wp_enqueue_script

Для подключения JS-файлов используется:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle — уникальное имя скрипта.
$src — URL или путь к скрипту.
$deps — массив зависимостей (например, jquery).
$ver — версия.
$in_footer — загрузить в футере (true) или в шапке (false).

Пример подключения пользовательского скрипта, который зависит от jQuery и загружается в футере:

function wptemp_enqueue_scripts() {
    wp_enqueue_script('wptemp-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wptemp_enqueue_scripts');

Локализация скриптов с данными из PHP

Чтобы передать данные из PHP в JS, используйте wp_localize_script:

function wptemp_localize_script() {
    wp_enqueue_script('wptemp-ajax-js', get_template_directory_uri() . '/js/ajax.js', array('jquery'), '1.0', true);

    wp_localize_script('wptemp-ajax-js', 'wptemp_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptemp_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wptemp_localize_script');

В JS можно обращаться к wptemp_ajax_obj.ajax_url и другим параметрам.

Оптимизация подключения: условное и отложенное подключение

Не всегда нужно подключать все стили и скрипты на всех страницах. Чтобы снизить нагрузку, используйте условные проверки внутри функции:

function wptemp_conditional_scripts() {
    if (is_page('contact')) {
        wp_enqueue_script('wptemp-contact-form', get_template_directory_uri() . '/js/contact-form.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wptemp_conditional_scripts');

Так скрипт подключится только на странице контактов.

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

Отложенная загрузка скриптов

Чтобы улучшить скорость загрузки, можно добавить атрибут defer или async к тегам скриптов. WordPress не поддерживает их напрямую в wp_enqueue_script, но можно использовать фильтр:

function wptemp_add_defer_attribute($tag, $handle) {
    $scripts_to_defer = array('wptemp-custom-js');

    if (in_array($handle, $scripts_to_defer)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wptemp_add_defer_attribute', 10, 2);

Это добавит атрибут defer для нужных скриптов.

Распространённые ошибки и как их избежать

Часто разработчики допускают следующие ошибки:

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

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

Пример комплексного подключения ресурсов с учетом зависимостей и условий

function wptemp_full_enqueue() {
    // Подключаем Google Fonts
    wp_enqueue_style('wptemp-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap', array(), null);

    // Основной стиль темы
    wp_enqueue_style('wptemp-style', get_stylesheet_uri(), array('wptemp-google-fonts'), '1.2', 'all');

    // Подключаем jQuery библиотеки (WordPress включает jQuery по умолчанию)
    wp_enqueue_script('jquery');

    // Пользовательский JS с зависимостью от jQuery, в футере
    wp_enqueue_script('wptemp-main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.2', true);

    // Локализация для AJAX
    wp_localize_script('wptemp-main-js', 'wptempData', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptemp_nonce')
    ));

    // Условное подключение слайдера только на главной
    if (is_front_page()) {
        wp_enqueue_style('wptemp-slider-css', get_template_directory_uri() . '/css/slider.css', array(), '1.0');
        wp_enqueue_script('wptemp-slider-js', get_template_directory_uri() . '/js/slider.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wptemp_full_enqueue');

Использование полезных плагинов для управления стилями и скриптами

Для упрощения работы с подключением ресурсов можно использовать плагины, например:

Clearfy — позволяет отключать ненужные скрипты и стили, оптимизировать загрузку.
WPRemark — помогает управлять скриптами и стилями, а также добавляет дополнительные возможности для оптимизации.

Заключение

Правильное подключение CSS и JS в WordPress — это фундамент стабильного и быстрого сайта. Используйте wp_enqueue_style и wp_enqueue_script, всегда учитывайте зависимости и условия загрузки. Это поможет избежать конфликтов, ускорить загрузку страниц и сделать ваш сайт более профессиональным. Внедряйте данные практики в свои проекты, и результат не заставит себя ждать.

Как эффективно использовать wp_enqueue_style и wp_enqueue_script в WordPress