Подключение CSS и JS

Урок 2

  Получите бесплатный доступ к первым 3-м урокам курса, для этого зарегистрируйтесь или войдите.

Урок 2

Как правильно подключить файлы CSS и JavaScript в теме WordPress

Пример подключения файла таблицы стилей и скрипта

В уроке мы подключили все файлы CSS и JS правильно – при помощи хука wp_enqueue_scripts, который мы использовали в functions.php файле темы.

Если очень упростить весь наш код, то по сути принцип действия сводится к следующему шаблону:

add_action( 'wp_enqueue_scripts', 'название_функции' );
 
function название_функции() {
 
	// CSS
	wp_enqueue_style( идентификатор, URL, зависимости, версия );
 
	// JavaScript
	wp_enqueue_script( идентификатор, URL, зависимости, версия, хедер или футер );
 
}

Конечно же не будет лишним почитать документацию функций wp_enqueue_style() и wp_enqueue_script().

Хуки для подключения CSS / JS

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

  • wp_enqueue_scripts – для подключения на страницах сайта.
  • admin_enqueue_scripts – для подключения на страницах админки WordPress /wp-admin/.
  • login_enqueue_scripts – для подключения на странице авторизации / восстановления пароля / регистрации (wp-login.php).

Есть ещё enqueue_block_editor_assets, но давайте немного притормозим, ладно? 😅

Что делать с кэшированием?

Конечно же обновлять кэш браузера после каждого изменения в style.css вообще не особо вариант?

Поэтому мы и воспользуемся 4-м параметром функции, в который мы можем передать версию, осталось только придумать, как передавать её динамически, чтобы можно было бы забыть о кэше на время разработки.

В уроке мы использовали функцию time(), потому что каждый раз она возвращает нам новое значение, каждую следующую секунду.

Давайте сейчас я покажу вам более хитрый, но чуть более правильный метод – мы можем использовать другую PHP функцию filemtime(), которая возвращает также время, но только не время вообще, а время последнего изменения файла! В секундах.

add_action( 'wp_enqueue_scripts', 'misha_js_and_css' );
 
function misha_js_and_css(){
 
	wp_enqueue_script( 
		'scripts', 
		get_stylesheet_directory_uri() . '/js/scripts.js', 
		array( 'jquery' ), 
		filemtime( dirname( __FILE__ ) . '/js/scripts.js' ), 
		true
	);
 
}

Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.

Но как же работает filemtime()?

Как вы возможно догадались, мы передали в неё что-то вроде пути до файла? Да, это именно путь к файлу на сервере, а не URL. Для того, чтобы убедиться наглядно, можете прямо в index.php попробовать вывести echo dirname( __FILE__ );

Перенос уже зарегистрированного в WordPress jQuery в футер сайта

Вообще главный аргумент здесь – что, когда мы переносим наши JS файлы в футер, мы делаем наш сайт чуточку быстрее (да, это не влияет сильно (!) на скорость загрузки сайта, однако Google PageSpeed будет счастлив).

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

add_action( 'wp_enqueue_scripts', function() {
 
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true );
	wp_enqueue_script( 'jquery' );
 
} );

Так скрипт jquery уже зарегистрирован в WordPress ядре по умолчанию (полный список таких скриптов – в таблице), то нам нужно сначала снять его с регистрации функцией wp_deregister_script().

В уроке, для того, чтобы сильно вас не загружать, я не стал использовать includes_url() – она возвращает динамически путь к директории wp-includes.

Также обратите внимание, что в этом примере я не стал создавать какую-то отдельную функцию, а прописал её сразу внутри хука! Типа такая анонимная функция – подобная запись, насколько я знаю, не соответствует WordPress кодгайду, но позволит вам каждый раз не напрягать воображение для придумывания названий функций. Такая возможность записи появилась в PHP 5.3, поэтому, если вдруг каким-то чудесный образом у вас более старая версия, не рекомендую так делать.

Ну а главная суть в этом примере – это 5-й параметр функции wp_register_script(), который равен true, а значит скрипт должен подключиться в футере! Этот параметр есть только у функций скриптов, потому что, что бы там не говорил пейджспид, перенос CSS в футер – это бред.

Функции WordPress, которые встретились в уроке

Итак, в этом уроке нам пришлось поработать со следующими функциям:

  • wp_enqueue_style() – подключает файлы CSS.
  • wp_enqueue_script() – подключает файлы JavaScript.
  • wp_deregister_script() – позволяет снять с регистрации определённый JS файл.
  • wp_register_script() – позволяет зарегистрировать, но пока не подключать JavaScript файл.
  • wp_head() и wp_footer() – эти функции – основа любой темы WordPress, именно благодаря им плагины могут вклинивать свои собственные стили, скрипты, код яндекс метрики в наш сайт.
  • get_stylesheet_directory_uri() – функция позволяет вернуть динамически абсолютный URL папки с текущей темой.
  • site_url() – возвращает адрес вашего сайта.
  • time() – PHP функция, которая возвращает текущее время в секундах с 1970 года.