jQuery и WordPress

Как правильно подключить jQuery и другие скрипты к Вордпресс

25 сентября 2017

Разгребая чужой код, иногда нарываешься на такие «интересные» решения, что буквально впадаешь в ступор. Недавно на одном сайте видел, как jQuery подключался несколько раз на странице. Думаю, нужно рассказать, как это правильно делается в Вордпресс.

У разработчика не было злого умысла, он пошел на это скорее всего по своей неопытности — используемая им карусель jQuery Roundabout 2.4.2 очень старая, и со свежей версией jQuery некорректно работала анимация. Точнее, не работала совсем. К сожалению, он не нашел ничего лучшего, как перед загрузкой карусели прямо в коде загрузить старую версию jQuery 1.7.1. Про консоль браузера, в которую посыпалась куча ошибок, этот горе-разработчик видимо не слышал. Многие ошибки были критические и положили часть функционала сайта. Именно по этой причине, сайт попал ко мне в работу.

Как подключить jQuery к Вордпресс

Итак, прежде чем подключать jQuery, откроем HTML-код страницы и убедимся, что jQuery не подключен ранее активной темой или каким-то из плагинов. Все подключаемые скрипты в Вордпресс должны регистрироваться и загружаться с помощью функции wp_enqueue_script() для того, чтобы плагины были в курсе о подключении той или иной библиотеки, знали о зависимостях и не загружали повторно одинаковые скрипты.

Если в HTML-коде сайта нет упоминаний о jQuery, значит инициируем его подключение в файле functions.php активной темы. jQuery в Вордпресс подключается проще всего, т.к. он зарегистрирован по-умолчанию, его можно загрузить сразу по имени-ярлыку ‘jquery’.

wp_enqueue_script('jquery');

Как подключить к Вордпресс другой jQuery

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

Сначала нужно дерегистрировать ранее загруженный jQuery.

wp_deregister_script('jquery');

А затем зарегистрировать новый. Например, так:

wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null);
 wp_enqueue_script('jquery');
}

Напомню, функция wp_register_script() имеет несколько параметров: wp_register_script($handle, $src, $deps, $ver, $in_footer);

  • $handle — ярлык, уникальное имя скрипта;
  • $src — путь к скрипту;
  • $deps — массив скриптов от которых зависит загружаемый скрипт;
  • $ver — версия;
  • $in_footer — загрузка скрипта в футере.

Как подключить к Вордпресс другие скрипты

С другими скриптами тоже ничего сложного нет. Допустим, у нас есть некий скрипт script.js, который лежит в директории /js/ активной темы. Он подключается аналогично в functions.php, указываем путь и придумываем уникальный ярлык ‘myscript’, например.

wp_enqueue_script('myscript', get_template_directory_uri() . '/js/script.js');

В заключение

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

И возвращаясь к jQuery Roundabout. Чтобы карусель работала со свежими версиями jQuery, в коде Roundabout нужно найти такую строку:

newBearing = methods.normalize.apply(null, [newBearing]);

и заменить её на такой код:

if (true) {
newBearing = passedData.start + ((bearing - passedData.start) * newBearing);
}

Ничего сложного.

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

ПОДПИСАТЬСЯ

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

Услуги фрилансеров по фиксированной цене — 500 р.