Создание темы для WordPress: Подключение скриптов

Ромчик
0

Создание своей темы для WordPressДоброго времени суток. При создании темы для WordPress нам необходимо подключать различные js скрипты и css, например, jQuery или bootsrap.js. Вроде бы ничего сложного, но в WordPress есть для этого специальная функция, которая позволяет нам избегать конфликтов и без проблем объединять скрипты в один файл, а также указывать версию css или js (чтобы скрипты и стили у клиента были новые, а не из кеша).

И так. Первое правило: Не подключайте стили и скрипты в файле header.php. Для подключения используйте функцию:


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

Где:

  • $handle – название скрипта
  • $src – путь к скрипту, указываем в том случае, если скрипт не зарегистрирован
  • $deps – массив зависимостей, перечисляем скрипты от которых зависит наш скрипт (это нужно, для того, чтобы наш скрипт подключился уже после)
  • $ver – версия скрипта, необходима для сверки со скриптом вытянутым из кеша.
  • $in_footer – булево значение, если true, то скрипт будет подключен в футере. По умолчанию false

Подключение jQuery к теме WordPress

Так как jQuery уже идет в комплекте с WordPress, то для подключения jQuery к теме достаточно вызвать функцию с параметром «jquery»


wp_enqueue_script (‘jquery’);

Список скриптов, которые идут с WordPress

Скрипт Название в WordPress
jQuery Form jquery-form
jQuery Color jquery-color
jQuery Masonry jquery-masonry
jQuery UI Core jquery-ui-core

Это далеко не полный список. Для того, чтобы получить полный список распечатайте глобальную переменную:


$GLOBALS['wp_scripts']

Пример подключения скрипта к теме WordPress

Как мы выяснили выше, для подключения скрипта в WordPress используется функция wp_enqueue_script(). Для вызова данной функции, как правило, используются следующие хуки, что такое хуки в WordPress вы можете прочитать «Создание плагина для WordPress: Хуки в WordPpress: action и filter. Часть 3»:

  • wp_enqueue_scripts – срабатывает во время подключения скриптов и стилей
  • admin_enqueue_scripts – для подключения скриптов и стилей на страницах административной части
  • login_enqueue_scripts – для подключения скриптов и стилей на странице авторизации

Давайте подключим файл script.js нашей темы в футере. Для этого в файл functions.php добавим следующий код:


function my_scripts()

{

wp_enqueue_script( 'jquery' );

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

}

add_action('wp_enqueue_scripts', 'my_scripts', 10);

Что мы сделали? Первое создали функцию my_scripts, которая подключает скрипты:

  • jquery, которая уже зарегистрирована в WordPress
  • script, которая расположена в папке js, которая в свою очередь находится в папке с темой.

Тут мы использовали функцию get_template_directory_uri(), которая возвращает путь к папке с темой.

И дальше мы прицепили к хуку wp_enqueue_scripts нашу функцию.

Вот и все.

Заключение.

Мы с вами рассмотрели правильный способ подключения скриптов и стилей к теме WordPress. Данный способ позволяет избежать конфликтов, при необходимости объединить скрипты в один файл, указывать версию скрипта или файла со стилями.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика