22 Фев

Переход на штатный 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 по фэньшую кодексу все внешние скрипты подключаются посредством движка специальными командами

wp_enqueue_script();

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

Подведём итог

Чтобы удачно использовать jQuery в WordPress-теме нужно:

  1. Разобраться, какие штатные библиотеки есть в WordPress;
  2. Вызывать штатные библиотеки только через wp_enqueue_script();
  3. Добавлять обёртку
    jQuery(document).ready( function($) { ... } ); 

    к любым самописным скриптам;

  4. Некоторые скрипты оборачивать нельзя (тут я не уверен), поэтому в них можно заменить
    $(

    на

    jQuery(
  5. как говорится PROFIT!!

Вы можете читать эту запись через RSS 2.0. Все опции закрыты.






В мексике все программисты сеньоры