Как добавить внешние css и js файлы в тему wordpress?

При разработке своей темы на 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

В моем случае я использую только пару обязательных параметров

  1. Имя (bootstrap_grid)
  2. Адрес (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' );

Вот и все. Есть возникли вопросы – пишите в комментариях

автор: Роман Довгаль

С 2010 года я занимаюсь интернет маркетингом. Сюда входит и SEO, и SMM, и SMO, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе :)
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности :)

3 коментаря

  1. И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.

  2. Здравствуйте! Потому, что это в большинстве случаев не нужно. Потому, что там могут лежать файлы, которые не нужно подключать сразу. Потому, что там могут лежать подпапки и как определить что нужно брать из подпапок?

Залишити коментар до Dedicated servers Скасувати коментар