На эту тему написано уже десятки статей, но тема продолжается обсуждаться, а в чатах и на форумах люди снова и снова задают вопросы и сталкиваются с проблемами. Давайте вместе попробуем на примерах разобраться как же правильно подключать стили и скрипты в 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', 'custom_theme_scripts' );
function custom_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', 'custom_theme_scripts' );
function custom_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', 'custom_theme_scripts' );
function custom_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' ) ) );

}
Популярный генератор тем underscores в качестве версии скриптов указывает некую магическую константу _S_VERSION, предварительно определив ее define( '_S_VERSION', '1.0.0' ). Как вы понимаете, версия не будет меняться динамически при таком подходе и ее указание довольно бессмысленно.

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

Еще, при работе со скриптами полезно знать, что в третьем параметре функции 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 );

}

Похожие посты

Как изменить robots.txt в мультисайте WordPress

WordPress динамически создает robots.txt. Чтобы перезаписать его при обычной установке без использования нескольких сайтов, вы можете просто загрузить статический файл robots.txt на сервер. При установке системы мультисайтов это приведет к перезаписи файла robots.txt для всех сайтов, что не всегда является нужным результатом. В этой заметке мы обсудим, как можно изменить robots.txt для отдельных сайтов мультисайта….

Как создать AJAX-форму на WordPress без плагинов

WordPress имеет достаточно простую методологию обработки Ajax-запросов. Ajax-запросами называют такие запросы, которые происходят без перезагрузки страницы и в результате работа с сайтом становится быстрее и удобнее для конечного пользователя. Заранее оговорюсь, что в репозитории WordPress существуют десятки нормальных плагинов для работы с формами. С помощью них можно настроить поля, их валидацию, содержимое, интегрировать поддержку Ajax,…

Как сделать доступными для просмотра посты со статусом future в WordPress

По умолчанию, при создании поста, если вы выбираете для публикации дату, которая еще не наступила, то посту устанавливается статус future и он не видим в публичной части сайта. Вы можете изменить это поведение на хуке pre_get_posts, который срабатывает до основного запроса следующим образом:

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *