При разработке своей темы на WordPress рано или поздно понадобится подключать сторонние css и js файлы. На первый взгляд, это может быть очень простая задача. И в самом деле, что тут сложного? Взял, указал ссылку и вуаля – все работает. Можно конечно и так делать, но правильный ли это способ спросите вы? Нет, абсолютно не правильный, отвечу я.
Как правильно подключать внешние CSS и JS файлы в тему WordPress
1. Регистрируем наши css и js файлы
Для этого в файле functions.php. Например, мне нужно подключить файл bootstrap_grid.css.
Для этого в function.php я использую функцию Php wp_register_style, которая может получать 5 параметров:
wp_register_style( $handle, $src, $deps, $ver, $media )
Два обязательных параметра
- $handle(строка)
Это название подключаемого файла (например, style, bootstrap, responsive). Оно должно быть уникальным. Это важно.
- $src(строка)
Адрес к подключаемому файлу стилей. Например, http://site.ru/css/style.css.
Советую указывать относительный адрес. То есть, в случае с темой –
get_template_directory_uri() . '/css/bootstrap_grid.css'
Необязательные параметры
- $deps(массив)
Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array()
- $ver(строка/логический)
Указания версии файла. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1.
По умолчанию: false
- $media(строка)
Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:
all
screen
handheld
print
В моем случае я использую только пару обязательных параметров
- Имя (bootstrap_grid)
- Адрес (get_template_directory_uri() . ‘/css/bootstrap_grid.css’)
Итого получается так
wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' );
2. Ставим в очередь на загрузку
Функция wp_enqueue_style необходима как раз для того, чтобы поставить наши стили в очередь на загрузку, она принимает такие же параметры как и функция wp_register_style
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ) ?>
В нашем случае выйдет так
wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' ); wp_enqueue_style( 'bootstrap_grid' );
3. Запускаем наш файл стилей
Для этого наш нужно использовать функцию add_action.
Я не буду расписывать все ее возможные параметры. Нам достаточно передать дав параметра
add_action( 'wp_enqueue_scripts', 'bootstrap_grid' );
Мы используем wp_enqueue_scripts как для подключения скриптов, так и для подключения стилей!
P.S. Мой совет
Я рекомендую под подключение css и js создавать отдельные функции и вызывать их по мере необходимости.
Например, я создал функцию all_css, где зарегистрировал и поставил в очередь все свои css-файлы. И, затем, ее вызвал.
function all_css() { wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' ); wp_enqueue_style( 'bootstrap_grid' ); wp_register_style( 'blog', get_template_directory_uri() . '/css/blog.css' ); wp_enqueue_style( 'blog' ); wp_register_style( 'style', get_template_directory_uri() . '/css/style.css' ); wp_enqueue_style( 'style' ); } add_action( 'wp_enqueue_scripts', 'all_css' );
Вот и все. Есть возникли вопросы – пишите в комментариях
это гениально!
И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.
Здравствуйте! Потому, что это в большинстве случаев не нужно. Потому, что там могут лежать файлы, которые не нужно подключать сразу. Потому, что там могут лежать подпапки и как определить что нужно брать из подпапок?