Стили и скрипты

В WordPress стили и скрипты не пишут тегами в шаблоне. Их регистрируют функциями, а WordPress сам выводит теги в нужном месте, следит за порядком и не подключает один и тот же файл дважды — даже если его просят тема и три плагина.

Стили

// functions.php
 
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version'),
    );
 
    wp_enqueue_style(
        'mytheme-print',
        get_template_directory_uri() . '/assets/print.css',
        ['mytheme-style'],
        '1.0.0',
        'print',
    );
});

Аргументы: уникальное имя, адрес файла, зависимости, версия и тип устройства.

Скрипты

// functions.php
 
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'mytheme-app',
        get_template_directory_uri() . '/assets/app.js',
        [],
        '1.0.0',
        ['in_footer' => true, 'strategy' => 'defer'],
    );
});

in_footer выводит скрипт перед </body>, strategy добавляет атрибут defer или async.

Зависимости

Третий аргумент — имена файлов, которые должны загрузиться раньше:

wp_enqueue_script('mytheme-slider', get_template_directory_uri() . '/assets/slider.js', ['jquery'], '1.0.0', true);

WordPress подключит jQuery из своей поставки и поставит слайдер после него.

Версия и кеш

Версия добавляется к адресу: app.js?ver=1.0.0. Когда файл меняется, версию нужно изменить, иначе браузеры посетителей продолжат брать старый файл из кеша. При разработке удобно подставлять время изменения файла:

$file = get_template_directory() . '/assets/app.js';
 
wp_enqueue_script('mytheme-app', get_template_directory_uri() . '/assets/app.js', [], filemtime($file), true);

Данные для скрипта

Адреса и настройки передают из PHP в JavaScript отдельной строкой перед скриптом:

wp_add_inline_script(
    'mytheme-app',
    'const mythemeData = ' . wp_json_encode([
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('mytheme'),
    ]) . ';',
    'before',
);

В скрипте значения доступны как mythemeData.ajaxUrl.

Только там, где нужно

add_action('wp_enqueue_scripts', function () {
    if (is_page('contacts')) {
        wp_enqueue_script('mytheme-map', get_template_directory_uri() . '/assets/map.js', [], '1.0.0', true);
    }
 
    if (is_singular() && comments_open()) {
        wp_enqueue_script('comment-reply');
    }
});

Панель управления

Для страниц панели используют другой хук:

add_action('admin_enqueue_scripts', function (string $hook) {
    if ($hook === 'settings_page_mytheme') {
        wp_enqueue_style('mytheme-admin', get_template_directory_uri() . '/assets/admin.css', [], '1.0.0');
    }
});

Откуда брать адрес

Функция	Что возвращает
`get_template_directory_uri()`	Адрес папки темы (родительской)
`get_stylesheet_directory_uri()`	Адрес папки активной темы (дочерней, если она есть)
`get_stylesheet_uri()`	Адрес файла `style.css` активной темы
`plugins_url('file.js', __FILE__)`	Адрес файла плагина

Частая ошибка

Скрипт, подключённый тегом <script> прямо в header.php, WordPress не видит: его нельзя отключить, поставить после зависимостей или объединить, а свой jQuery, загруженный так, сломает плагины, которые рассчитывают на встроенный. Все файлы подключайте только через wp_enqueue_script() и wp_enqueue_style() внутри хука wp_enqueue_scripts.

Спасибо, что читаете!