Enqueue css functions php

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

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

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

Чтобы скачать тему 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__ );

Перенос уже зарегистрированного в 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 в футер – это бред.

• 21 видеоурок
• Можно скачать готовый код после каждого урока
• Можно начать проходить курс сразу же после оплаты
• Достаточно базовых знаний HTML и CSS, чтобы пройти курс
• Единоразовый платёж
• Доступ навсегда
• Уроки актуальны в 2023-м году

Источник

Подключаем правильно файлы стилей css в шаблоне WordPress

Подключать стили в шаблон в файле header.php — неправильно.
Правильная практика — подключать их в файле functions.php используя функцию wp_enqueue_style .
Это позволяет правильно добавить файл CSS стилей. Зарегистрировать файл стилей, если он еще не был зарегистрирован.

wp_enqueue_style() как и wp_enqueue_script() принято вызывать во время событий: wp_enqueue_scripts и admin_enqueue_scripts .

Подключаем файлы стилей .css через functions.php

Использование

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle (строка) (обязательный)
Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): scriptaculous?v=1.2 , то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.

$src (строка/логический)
УРЛ к файлу стилей. Например, http://site.ru/css/style.css . Не нужно указывать путь жестко, используйте функции: plugins_url() (для плагинов) и get_template_directory_uri() (для тем). Внешние домены можно указывать с неявным протоколом //notmysite.ru/css/style.css .
По умолчанию: false

$deps (массив)
Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array()

$ver (строка/логический)
Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1. Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false

$media (строка/логический)
Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть: ‘all’, ‘screen’, ‘handheld’, ‘print’ или ‘all (max-width:480px)’. Полный список смотрите здесь.
По умолчанию: ‘all’

Подключение через событие

В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие ‘wp_enqueue_scripts’ .

// правильный способ подключить стили и скрипты add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ ); // add_action(‘wp_print_styles’, ‘theme_name_scripts’); // можно использовать этот хук он более поздний function theme_name_scripts()

Рабочий пример

/* Load Styles */ function crea_load_styles() < wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/libs/bootstrap-grid/css/bootstrap.min.css'); wp_enqueue_style('fa-css', get_template_directory_uri() . '/libs/font-awesome-4.7.0/css/font-awesome.min.css'); wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Ubuntu:300,400,500,700&subset=cyrillic'); wp_enqueue_style('main-style', get_template_directory_uri() . '/css/style.css'); wp_enqueue_style('style', get_stylesheet_uri()); >add_action('wp_enqueue_scripts', 'crea_load_styles', 10);

Число «10» в этой строке add_action(‘wp_enqueue_scripts’, ‘crea_load_styles’, 10); позволяет подключать наши стили в самую последнюю очередь после всех файлов стилей других плагинов.

15 ноября 2017 года был выпущен WordPress версии 4.9, названный в честь джазового музыканта Билли…

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

Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus)….

Используя PHP можно загружать содержимое SVG-файлов без лишних запросов к серверу, без использования img или…

Источник

How to link style.css in functions.php

I’m a newbie to WordPress; I just started learning WordPress. I’m trying to link style.css in functions.php but I am unable to achieve what might be the issue here. Can anyone point me the right direction? index.php

 function mortal_theme() < wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); >add_action( 'wp_enqueue_scripts', 'mortal_theme' ); 

Your index.php appears to be missing get_header() . Your theme needs to have a header.php with the element in it, and the function inside it.

Jacob — they had the get_header() call in there, it just didn’t show up because the code wasn’t formatted properly. I edited for code formatting (that doesn’t answer whether there’s a header.php or not, though).

4 Answers 4

(1) Your index.php file should begin with:

(2) Your header.php file should have the following right before the closing tag:

Note: header.php also has other things, but I am assuming you have them set up already.

(3) Your footer.php file should have the following right before the closing tag:

(4) In your functions.php , modify your the second line of your wp_enqueue_style so that it looks like this:

wp_enqueue_style( 'style', get_stylesheet_uri() ); 

The whole function in the end should look like this:

function mortal_theme() < wp_enqueue_style( 'style', get_template_directory_uri() ); >add_action( 'wp_enqueue_scripts', 'mortal_theme' ); 

This is because the style.css in your theme folder is the main stylesheet for the theme — so you don’t need to tell WordPress to look for style.css , it will know what to look for.

I have recreated your theme using your code on a local WordPress installation to test it, and here is a screenshot of what I see when I visit the page:

The theme folder has the following files:

And I copied and pasted the exact code for each file from your original question, with one exception: for functions.php I added the starting

 add_action( 'wp_enqueue_scripts', 'mortal_theme' ); 

Based on the screenshot above, everything seems to be working correctly.

What do you see when you view your page? If you’re getting results like that in the second screenshot, then it is because you do not have the starting

Источник