Подключение CSS и JS
Урок 3
В этом уроке расскажу вам, как правильно подключать файлы стилей и скриптов при создании темы WordPress.
Вставить в HTML шаблона теги <link rel=""> или <script src=""></script> – не катит. Потому что в таком случае вы их захардкодите и например у вас не будут работать плагины оптимизации, которые объединяют все стили и скрипты в один файл. Или же у вас не получится перестроить порядок скриптов.
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
Написал для вас вот такой код, чтобы вам удобно было копировать его отсюда при необходимости:
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 – в хедере ); }
functions.php, либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require().И хотя в уроке мы использовали только хук 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 в футер – это бред.
Список уроков