Приветствую, читатели! Сегодня мы разберём, как правильно подключить ваши css/js файлы на страницы сайта на WP.

Конечно же, можно просто добавить нужные строки в шапку/подвал сайта, но такой подход слишком топорный. У Wordpress имеется специальный функционал для этого.

Весь приведённый ниже код можно расположить в functions.php вашей темы (или в подключаемых в нём файлах, если вы любите «модульный» подход). Итак.

  • Инструкции для подключения стилей и скриптов следует располагать внутри функции, повешанной на хук wp_enqueue_scripts
  • для подключения стилей используется функция wp_enqueue_style()
  • для подключения скриптов — wp_enqueue_script()

<?php

add_action('wp_enqueue_scripts', function(){
    // Получаем URL до директории с используемой темой
    $theme_url = get_stylesheet_directory_uri();

    // Подключаем стили
    wp_enqueue_style(
        'bootstrap',
        $theme_url.'/css/bootstrap.css',
        [],
        '3.3.7'
    );
    wp_enqueue_style(
        'theme-styles',
        $theme_url.'/css/styles.css',
        ['bootstrap'],
        '0.1'
    );

    // Подключаем скрипты
    wp_enqueue_script(
        'lightbox',
        $theme_url.'/js/lightbox.js',
        ['jquery'],
        '2.9.0',
        true
    );
    wp_enqueue_script(
        'theme-scripts',
        $theme_url.'/js/scripts.js',
        ['jquery', 'lightbox'],
        '0.1',
        true
    );
});

Теперь разберём этот код.

  • Параметры функции wp_enqueue_style():

    • системное название для css файла,
    • путь к файлу,
    • список зависимостей (очень удобная фича — WP сам позаботится о порядке вывода файлов),
    • версия (указывается для того, чтобы при изменении версии не загружался старый кешированный файл),
    • значение аттрибута media (обычно не используется, по умолчанию равен ’all’).
  • Параметры функции wp_enqueue_script() точно такие же, за исключением последнего параметра:

    • выводить скрипт в подвале (перед закрывающим тегом body, по умолчанию равен false)

Добавление ресурсов на отдельных страницах

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


<?php

add_action('wp_enqueue_scripts', function(){
    $theme_url = get_stylesheet_directory_uri();

    // Подключаем скрипт только на главной странице
    if (is_front_page()) {
        wp_enqueue_script(
            'some-cool-slider',
            $theme_url.'/js/some-cool-slider.js',
            ['jquery'],
            '9.9.9',
            true
        );
    }

    // Подключаем стиль только для постов типа 'product'
    if (is_singular('product')) {
        wp_enqueue_style(
            'product-card',
            $theme_url.'/css/product-card.css',
            [],
            '0.1'
        );
    }
});

На этом всё! Надеюсь, данная статья помогла вам разобраться, как подключать внешние ресурсы в Wordpress.