Как правильно подключать стили и cкрипты в дочерней теме WordPress?

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

Начнем по порядку. Есть хук wp_enqueue_scripts, который срабатывает в момент подключения в очередь на вывод файлов стилей и скриптов. Это событие срабатывает в момент хука wp_head с приоритетом 1. Учтите, что для его работы в файле header.php необходима функция wp_head().

На этот хук wp_enqueue_scripts принято вешать функции, которые подключают стили и скрипты темы с помощью функций wp_enqueue_style() и wp_enqueue_script() соответственно.

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

add_action( 'wp_enqueue_scripts', 'wpz_theme_scripts' );
function wpz_theme_scripts() {

	// Подключаем css файл темы.
	wp_enqueue_style( 'main-style', get_stylesheet_uri() );

	// Подключаем js файл темы.
	wp_enqueue_script( 'main-script', get_template_directory_uri() .'/assets/js/example.min.js', array( 'jquery' ), '1.0', true );

}

Заметьте, что если в функции присутствует префикс get_template_, то будет подключен файл из родительской темы, если же префикс get_stylesheet_, то файл будет подключен из дочерней темы только в том случае, если дочерняя тема активирована (если не активирована, файл подключается из родительской).

Как сделать подключение скриптов по условию

При подключении скриптов и стилей на хуке wp_enqueue_scripts глобальные переменные уже определены, поэтому все условные теги вида is_home(), is_front_page(), is_archive(), is_page() и подобные будут работать. В примере ниже мы подключаем на главную одну таблицу стилей, а на страницу категорий другую. Общий файл стилей будет подключен на все страницы сайта.

add_action( 'wp_enqueue_scripts', 'wpz_theme_scripts' );
function wpz_theme_scripts() {

	wp_enqueue_style( 'slyle-common', get_theme_file_uri( 'assets/css/slyle-common.min.css' ) );

	if ( is_home() || is_front_page() ) {
		wp_enqueue_style( 'slyle-home', get_theme_file_uri( 'assets/css/slyle-home.min.css' ) );
	}

	if ( is_category() ) {
		wp_enqueue_style( 'slyle-cats', get_theme_file_uri( 'assets/css/slyle-cats.min.css' ) );
	}

}

Как сделать обновление скриптов в кеше браузера

Один из часто задаваемых вопросов звучит примерно так: «Почему я изменяю css файл, но эти изменения не видны на сайте?».

Ответ на него достаточно простой: при первом посещении сайта браузер скачивает файлы стилей, скриптов, изображения и т.д. себе в кеш. При каждом последующем посещении браузер уже не будет скачивать их заново, а возьмет из своего локального хранилища (кеша). Это работает в целях оптимизации посещения интернет-ресурсов.

Но есть отличный способ динамически сообщать браузеру об изменениях в ваших файлах — указывать их версии. Это удобно делать с помощью функции filemtime().

Теперь браузер будет проверять, изменилась ли версия (время последнего изменения) файла и только в случае положительного ответа скачивать файл заново.

К тому же, в одной из последних версий добавили функцию get_theme_file_uri(), которая проверяет наличие файла в дочерней теме перед подключением, это довольно удобно.

Если мы применим эти советы, то получим примерно следующее:

add_action( 'wp_enqueue_scripts', 'wpz_theme_scripts' );
function wpz_theme_scripts() {

	// Подключаем css файл темы.
	wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), filemtime( get_theme_file_path( '/style.css' ) ) );

	// Подключаем js файл темы.
	wp_enqueue_script( 'main-script', get_theme_file_uri( 'assets/js/example.min.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/assets/js/example.min.js' ) ) );

}

Как добавить один скрипт после другого

Еще, при работе со скриптами полезно знать, что в третьем параметре функции wp_enqueue_script() можно указать зависимость этого скрипта от других. Например, если вы укажите array( 'jquery' ), то скрипт example.min.js будет подключен после скрипта jquery.min.js.

Кроме того, существует полезная функция wp_add_inline_script(), которая позволит вам добавить скрипт прямо в html документ, после указанного. Аналогично для стилей будет работать функция wp_add_inline_style(). Рассмотрим пример подключения slick-слайдера:

add_action( 'wp_slick_scripts', 'enqueue_slick_scripts' );
function enqueue_slick_scripts() {

	wp_enqueue_style( 'slick-style', get_stylesheet_directory_uri() . '/assets/libs/slick/slick.min.css' );
	wp_enqueue_style( 'slick-theme', get_stylesheet_directory_uri() . '/assets/libs/slick/slick-theme.min.css' );
	wp_enqueue_script( 'slick-scripts', get_stylesheet_directory_uri() . '/assets/libs/slick/slick.min.js', array( 'jquery' ) );

	$slick_init = 'jQuery(function($) {
		$(".slick-container").slick({
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 3
		});
	});';

	wp_add_inline_script( 'slick-scripts', $slick_init );

}

Как видите, сначала нужные файлы подключаются с помощью функций wp_enqueue_style() и wp_enqueue_script(), после чего скрипт инициализации слайдера вставляется с помощью wp_add_inline_script() после основного slick.min.js.

Как сделать предварительную регистрацию скриптов

Еще одной важной особенностью работы со скриптами является то, что скрипт можно только зарегистрировать c помощью функции wp_register_script(), а выполнять подключение уже в любом другом месте проекта по необходимым условиям. Рассмотрим на примере:

add_action( 'wp_enqueue_scripts', 'enqueue_masonry_scripts' );
function enqueue_masonry_scripts() {

	wp_register_style( 'masonry-styles', get_stylesheet_directory_uri() . '/assets/libs/masonry/masonry.min.css' );
	wp_register_script( 'masonry-scripts', get_stylesheet_directory_uri() . '/assets/libs/masonry/masonry.min.js', array( 'jquery' ) );

}

Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте. Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию wp_enqueue_style() или wp_enqueue_script().

Сами фото-галереи выводятся с помощью шорткодов и мы можем прямо здесь выполнить их подключение. Таким образом эти скрипты будут подключены в html-документе только в том случае, если на странице будет использован этот шорткод.

add_shortcode( 'masonry-gallery', 'masonry_gallery' );
function masonry_gallery( $atts ) {

	//<...>

	wp_enqueue_style( 'masonry-styles' );
	wp_enqueue_script( 'masonry-scripts' );

	$masonry_init = 'jQuery(function($) {
		var $container = $(".masonry");
		$container.imagesLoaded( function() {
		  $container.masonry({
			  columnWidth: ".masonry__item",
			  itemSelector: ".masonry__item"
			});
		});
	});';

	wp_add_inline_script( 'masonry-scripts', $masonry_init );

}