Подключение CSS и JavaScript в WordPress

Если коротко и по сути, то ваш код будет выглядеть примерно так:

А теперь перейдем к самой статье и разберемся что здесь к чему…

Когда вы создаете свою тему, вы можете создать дополнительные таблицы стилей или файлы JavaScript. Однако помните, что WordPress сайт не только имеет активную тему, он будет также использовать различные плагины. Поэтому чтобы бы все работало слаженно, важно, что бы тема и плагины загружали скрипты и таблицы стилей, используя стандартный метод WordPress. Это будет гарантировать, что сайт остается эффективным и что не существует никаких проблем с совместимостью.

Добавление скриптов и стилей к WordPress является довольно простым процессом. По сути, вы будете создавать функцию, которая будет ставить в очередь все ваши скрипты и стили. Когда отправляются в очередь скрипты или стили, WordPress создает обработчик и путь, чтобы найти ваш файл и любые зависимости, которые он может иметь (как JQuery), а затем вы будете использовать хук, который будет вставлять скрипты и таблицы стилей.

Подключение скриптов и стилей

Правильный способ добавить скрипты и стили к вашей теме это подключить их в functions.php файле. Файл style.css необходим во всех темах, но может быть необходимо, добавить другие файлы, чтобы расширить функциональность вашей темы.

Совет: WordPress включает в себя ряд файлов JavaScript как часть пакета программного обеспечения, в том числе часто используемых библиотек, таких как jQuery. Перед добавлением своих собственных, проверьте, можете ли вы использовать уже включенные библиотеки.

Основным является:

Добавление в очередь скрипта или стиля с помощью wp_enqueue_script() или wp_enqueue_style()

Таблицы стилей

Ваши CSS таблицы стилей используются для настройки представления вашей темы. Таблица стилей это также файл, в котором хранится информация о вашей теме. По этой причине, style.css файл обязателен в каждой теме.

Вместо загрузки стилей в вашем header.php файле, вы должны загрузить их при помощи wp_enqueue_style. Для того, чтобы загрузить свою основную таблицу стилей, вы можете поставить в очередь ее в functions.php

Для постановки в очередь style.css:

wp_enqueue_style( 'style', get_stylesheet_uri() );

WordPress будет искать таблицу стилей с именем «style» и загружать ее.

Основной функцией для подключения стиля является:

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

Вы можете включить эти параметры:

  • $handle — просто имя файла таблицы стилей.
  • $src, где он расположен. Остальные параметры не являются обязательными.
  • $deps — зависит ли файл стилей от другого файла стилей. Если этот параметр установлен, этот стиль не будет загружаться, пока его зависимый стиль не загрузиться первым.
  • $ver устанавливает номер версии.
  • $media можно указать для какого типа media загружать эти таблицы стилей, таких как ‘all’, ‘screen’, ‘print’ или ‘handheld.’

Так что, если вы захотите загрузить таблицу стилей с именем «slider.css» в папке «CSS» в корневом каталоге вашей темы, вы должны использовать:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false, '1.1', 'all');

Для подключения стиля в дочерней теме, используйте другую функцию для указания пути к файлу:

wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/css/slider.css', false, '1.1', 'all');

Все подключения делаются внутри функции, которая будет повешена на хук wp_enqueue_scripts (пример ниже)

Скрипты

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

wp_enqueue_script использует похожий синтаксис как и wp_enqueue_style.

Добавление вашего скрипта:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

  • $handle — имя скрипта.
  • $src — определяет, где находится скрипт.
  • $deps — массив, который может регулировать любой скрипт, от которого ваш новый скрипт зависит, например, jQuery.
  • $ver позволяет вносить номер версии.
  • $in_footer это логический параметр (TRUE / FALSE), что позволяет размещать скрипты в футере вашего HTML документа, вместо хедера, так что это не задержит загрузку DOM дерева.

Ваша функция подключения может выглядеть следующим образом:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Не нужно отдельно подключать jQuery, так он уже зарегистрирован в ядре WP и будет подключаться на всех страницах, где будет указана зависимость от него для ваших скриптов. Смотрите также статью о подключении jQuery-скриптов.

Для примера, подключим в header наш скрипт, который находится в дочерней теме, сам скрипт зависимый от Backbone.js

wp_enqueue_script( 'bb', get_stylesheet_directory_uri() . '/js/my-bb.js', array('backbone'), '1.2' );

WordPress автоматически подгрузит на этой странице в шапке backbone.min.js и следом ваш указанный файл my-bb.js

Скрипт ответов на комментарии

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

Правильный способ включить ответ на комментарий состоит в использовании условных тегов, чтобы проверить, существуют ли определенные условия, так что скрипт не загружается без необходимости. Например, вы можете загрузить скрипты только на отдельных страницах записи, используя is_singular и проверить, чтобы убедиться, что опция «Разрешить древовидные комментарии» выбрана пользователем. Таким образом, вы можете настроить функцию:

Если комментарии включены пользователем и мы находимся на странице записи, то скрипт ответа на комментарий будет загружен. В противном случае, он не будет загружаться.

Объединение подключающих функций

Лучше всего объединить все подключаемые скрипты и стили в одной функции, а затем вызывать их с помощью wp_enqueue_scripts действия. Эта функция и действие должны быть расположены где-то ниже первоначальной установки (выполняемой выше).

По-умолчанию WordPress включает множество популярных скриптов, обычно использующиеся веб-разработчиками, а также скрипты, использующиеся самим WordPress.

Навигация по разделам:

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

  1. Дмитрий

    Здравствуйте!

    Меня интересует вопрос.

    При просмотре кода элемента в браузере, в разделе HEAD отображается абсолютный путь к стилям нашего сайта.

    Пример:
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/wp-content/themes/web-site/style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/wp-content/themes/web-site/css/style_reset.css’

    Однако некоторые WP сайты пути частично скрывают, приведу два варианта.

    Вариант (1):
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’/css/style_reset.css’

    Вариант (2):
    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/style.css’

    link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://site.ru/css/style_reset.css’

    Если вам это известно, то, хотелось бы узнать как это реализовать?

    Думаю, остальным читателям тоже будет интересно узнать.

    Ответить
    • Eugene Kopich

      Привет, ну у меня встречный вопрос — зачем вам такое реализовывать?
      Возможно путь к стилям прописан на таких сайтах жестко в шаблоне темы header.php
      Также, судя по пути к css-файлам они находятся не в папке с темой.
      Такое можно встретить, когда натягивают тему на WP, люди, которые мало с ним знакомы.
      Преимущества метода описанного в этой статье — гибкость. Через код можно например отключить стили на страницах, где он не используется, оптимизируя работу сайта.

      Ответить
  2. Александр

    Или у меня какой-то не такой WP или я не знаю… уже 3 сайта посмотрел, в function.php повносил — не появляется в head и все тут

    Ответить
    • Eugene Kopich

      Привет, рекомендую проверить, что функция подключения повешена на хук wp_enqueue_scripts (как в самом последнем примере).
      Также убедиться, что файл header.php / footer.php вашей темы содержит строку wp_head(); и wp_footer(); соответственно.

      Ответить

Оставить комментарий

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