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

Урок 3

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

Урок 3

Подключение файлов CSS и JavaScript в теме WordPress

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

Вставить в HTML шаблона теги <link rel=""> или <script src=""></script> – не катит. Потому что в таком случае вы их захардкодите и например у вас не будут работать плагины оптимизации, которые объединяют все стили и скрипты в один файл. Или же у вас не получится перестроить порядок скриптов.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Пример подключения файла CSS и файла JS

Написал для вас вот такой код, чтобы вам удобно было копировать его отсюда при необходимости:

add_action( 'wp_enqueue_scripts', 'true_enqueue_js_and_css' );
 
function true_enqueue_js_and_css() {
 
	// CSS
	wp_enqueue_style( 
		'misha_css', // идентификатор стиля
		get_stylesheet_directory_uri() . '/css/misha.css',  // URL стиля
		array(), // без зависимостей
		'5.0' // версия, это например ".../misha.css?ver=5.0"
	);
 
	// JavaScript
	wp_enqueue_script( 
		'misha_js', // идентификатор скрипта
		get_stylesheet_directory_uri() . '/js/misha.js', // URL скрипта
		array( 'jquery' ), // зависимости от других скриптов
		time(), // версия каждую секунду разная, чтоб не кэшировать во время разработки 
		true // true - в футере, false – в хедере
	);
 
}
  • При разработке своих тем вставляем код подключения JS / CSS в functions.php, либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require().
  • Можете также почитать документацию функций wp_enqueue_style() и wp_enqueue_script().
  • Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.

Хуки wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts

И хотя в уроке мы использовали только хук 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' ),
		// или filemtime( get_stylesheet_directory() . '/js/scripts.js' ),
		true
	);
 
}

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

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

Вообще главный аргумент здесь – что, когда мы переносим наши 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 в футер – это бред.

Купить курс
7000 ₽3500 ₽
  • 18 видеоуроков
  • Можно скачать готовый код после каждого урока
  • Уроки актуальны под последние версии WordPress
  • Можно начать проходить курс сразу же после оплаты
  • Достаточно базовых знаний HTML и CSS, чтобы пройти курс
  • Доступ навсегда
  • Единоразовый платёж
Ваш email будет использоваться только для регистрации на сайте. На него придёт письмо с логином и паролем. Войдите, если уже зарегистрированы.