Переход на штатный jQuery в WordPress
Я давно занимаюсь написанием тем для WordPress и широко использую распространённую JavaScript-библиотеку jQuery. Работы было всегда много, поэтому изучение теории я откладывал на потом. А зря.
Прояснилось: в примерах на всяких Stackoverflow и разнообразных обучалках часто указано, каким образом подключать библиотеки к сайту, и я честно копировал эти способы, не особенно задумываясь о последствиях. Принцип «ведь работает же» — определял. И так же продолжалось бы и дальше, однако…
Поступила в работу задача, решить конфликт между плагинами jQuery на одном из разрабатываемых ресурсов. Что ж, давайте посмотрим. Загружаем в Хроме и смотрим в консоль (F12). Видим множество разнообразных красненьких ошибок, которые роняют jQuery и прочий JavaScript. Ну, то, что JavaScript не может справится с символом «$», это мы уже проходили. Штатный jQuery WordPress не понимает этот символ. Легко решается заворачиванием в обёртку
[pastacode provider=»manual» lang=»javascript»]
jQuery(document).ready(
function($) {
/* тут команды, начинаемые с '$' будут выполняться */
}
);
[/pastacode]
но обнаружились и другие ошибки, значение которых были мне неизвестны.
Я никогда не был особенно силён в именно JavaScript, поэтому стал копировать ошибки в гугл. Гугл меня честно перенаправил на stackoverflow, где по английски, сжато, неглупые люди объяснили, что такое случается, когда jQuery подключен дважды. Лезем на сервер, разбираться.
Ресурс на WordPress, тема в соответствии с WPCodex разбита на темплейты. Находим самое вкусное — header.php и footer.php. В футере ничего интересного не обнаруживаем, всё по кодексу wp_footer() на месте. В хедере чудеса. Почти сразу после тега <head> жёстким <script>-ом подключен локальный jQuery 1.9.1, далее, кроме прочего, несколько подключений рукописных .js, выполненных тем же способом, а перед самым </head> обнаруживаем wp_header(). На страницах сайта в разных местах видим подключения самописных скриптов. Очевидно, что в работе над сайтом принимали участие сразу (или последовательно) несколько программистов с разным уровнем знаний и навыков, к тому же с разными привычками.
Переделываем всё это. Самописные скрипты и включения экранируем обёрткой, как описано выше. Удаляем жёсткое включение локального jQuery. На его место переставляем wp_head(). Сохраняем/обновляем (я это делаю Ctrl+F5, чтобы скрипты в кэше браузера тоже заменились). Проверяем и исправляем найденные мелкие косяки (я регулярно подглядываю в консоль для этого).
Собственно суть в следующем. В WordPress по фэньшую кодексу все внешние скрипты подключаются посредством движка специальными командами
и если это штатные скрипты, такие как jQuery, то они и подключаются в штатных местах. Так jQuery подключается в wp_head(). Даже если множество плагинов и темплейтов требуют вызов штатного скрипта для формирования одной страницы, движок поставит вызов этой страницы только единожды. Это спасает нас от повторного вызова библиотеки.
Подведём итог
Чтобы удачно использовать jQuery в WordPress-теме нужно:
- Разобраться, какие штатные библиотеки есть в WordPress;
- Вызывать штатные библиотеки только через wp_enqueue_script();
- Добавлять обёртку
jQuery(document).ready( function($) { ... } );к любым самописным скриптам;
- Некоторые скрипты оборачивать нельзя (тут я не уверен), поэтому в них можно заменить
$(на
jQuery( - как говорится PROFIT!!