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

При разработке своей темы на WordPress рано или поздно понадобится подключать сторонние css и js файлы. На первый взгляд, это может быть очень простая задача. И в самом деле, что тут сложного? Взял, указал ссылку и вуаля — все работает. Можно конечно и так делать, но правильный ли это способ спросите вы? Нет, абсолютно не правильный, отвечу я.

Как правильно подключать внешние CSS и JS файлы в тему WordPress

1. Регистрируем наши css и js файлы

Для этого в файле functions.php. Например, мне нужно подключить файл bootstrap_grid.css.

Для этого в function.php я использую функцию Php wp_register_style, которая может получать 5 параметров:

Два обязательных параметра

  • $handle(строка)

Это название подключаемого файла (например, style, bootstrap, responsive). Оно должно быть уникальным. Это важно.

  • $src(строка)
    Адрес к подключаемому файлу стилей. Например, http://site.ru/css/style.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’)

Итого получается так

2. Ставим в очередь на загрузку

Функция wp_enqueue_style необходима как раз для того, чтобы поставить наши стили в очередь на загрузку, она принимает такие же параметры как и функция wp_register_style

В нашем случае выйдет так

3. Запускаем наш файл стилей

Для этого наш нужно использовать функцию add_action.

Я не буду расписывать все ее возможные параметры. Нам достаточно передать дав параметра

Мы используем wp_enqueue_scripts как для подключения скриптов, так и для подключения стилей!

P.S. Мой совет

Я рекомендую под подключение css и js создавать отдельные функции и вызывать их по мере необходимости.

Например, я создал функцию all_css, где зарегистрировал и поставил в очередь все свои css-файлы. И, затем, ее вызвал.

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

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

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

Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности :)


2 комментария

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *