Подключение плагинов jQuery к WordPress (ответ или правильное руководство)

Это ответ на предыдущую статьи и развернутое руководство к действию, чтобы избежать частых ошибок при подключение jQuery.

Подключение плагинов jQuery к WordPress

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

На просторах сети подобную тему не писал, пожалуй, только ленивый, к коим отношусь и я. Гугл выдаст over 100500 результатов в поиске, но в 100000 случаях — в стиле поповщины, без разбора полетов. Мастера своего дела написанное ниже и так знают или гуглят за 5 секунд. Остальным же посвящается…

Введение


В большинстве случаев написанное в предыдущей статье ни кому не нужно. По крайней мере, именно в таком, описанном в статье, виде. Выше я уже упоминал, что мастера знают принцип, а остальные люди просто ставят плагин WP или тему (например, слайдер или со слайдером соответственно), которые (плагины и темы) сами подключают скрипт jQuery, если он нужен.

Подключение jQuery стандартными WP средствами


Как упоминалось в предыдущей статье, чтобы подключить jQ, достаточно в "wp-content/themes/(название темы)/header.php" («он же заголовок» :lol: Спасибо, улыбнуло) перед строчкой
wp_head();
прописать
wp_enqueue_script('jquery');
Это позволит в нашей теме подключить jquery.js, расположенный в "wp-includes/js/jquery/".

Если же вам досталась тема, в которой нет wp_head();, то имеет смысл добавить его перед закрывающим тегом </head>. И стоит посмотреть, может у вас сразу после этого появится уже подключенный jQ. Если нет, то стоит проделать описанное выше действие.

Плюсы:
— Подключается по Фэн-шую, одной строчкой кода;
— Нет дублирующих подключений;
— Возможен контроль версии (см. ниже).

Минусы:
— Нет контроля за версиями, все зависит от версии предустановленной разработчиками и соответственно версии WP. Исключение см. ниже;
— Ошибки в пользовательских скриптах (см. ниже).

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


После подключения может возникнуть проблема с неработающими пользовательскими скриптами (вашими скриптами, вы ведь именно для своих скриптов подключили jQ?!). Я как-то столкнулся с такой проблемой. Сам на тот момент, после написания кучи кода уже тупил и не без помощи гуру tigra60 нашелся ответ, о котором и пойдет речь ниже.

Давайте разберемся, почему это происходит.
Дело в том, что разработчики WP предусмотрели случай, когда разработчик темы или модуля захочет подключить фреймворк отличный от jQ, например Mototools. Ввиду чего может возникнуть конфликт плагинов или плагина с темой. Для этого они в файл jquery.js добавили волшебную строчку, предусмотренную разработчиками jQ, для устранения конфликтов:
jQuery.noConflict();
Именно эта строка позволяет убрать конфликт между разными фреймворками. И скрипты перестают работать, ввиду того, что их со стандартным Вордпрессовским jQ надо писать «по-особенному», вместо $('') необходимо писать jQuery(''). Либо просто закомментировать/удалить соответствующую строчку в jquery.js. Однако при обновлении WP придется заново ее комментировать, ибо файл обновиться. И тот, и другой вариант в большинстве случаев не устраивает. Что же делать?

Подключение своей версии jQuery стандартными WP средствами


Самое интересное. Указываем свою версию при стандартном подключении.
Этот способ полезен, если надо обновить или понизить стандартную версию jQ? На этот момент разработчики предусмотрели и создали для нас специальные функции.
Чтобы подключить свой файл в functions.php нашей темы необходимо прописать такие строки:
wp_deregister_script('jquery');
wp_register_script('jquery', includes_url('/js/jquery/jquery-1.8.2.min.js', __FILE__), false, '1.8.2');
Конечно, не забыв положить по соответствующему адресу файл необходимой версии скрипта.
Таким образом, мы подключим свою версию jQ в хедер.

Таким же образом можно улучшить наш фэн-шуй и поместить подключение jQ в футер, для этого надо в конце второй строки добавить TRUE:
wp_deregister_script('jquery');
wp_register_script('jquery', includes_url('/js/jquery/jquery-1.8.2.min.js', __FILE__), false, '1.8.2', true);

Если вы пишете свою тему, то можно модифицировать данные строки и положить скрипт в папку с темой.
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri().'/jquery-1.8.2.min.js', false, '1.8.2', true);
Таким образом, подключится в футер нашего шаблона скрипт из директории с нашей темой.

Точно также можно подключить скрипт с любого CDN
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '1.8.2', true);

Плюсы
— Всё тот же фэншуй;
— Контроль версий;
— Нет дублей;
— В третьем и четвертом случае — вы можете быть уверены, что ваша тема будет работать у других и будет именно с вашим файлом скрипта.
— В четвертом случае еще и CDN подключаются.

Минусов как таковых нет. Можно, конечно, притянуть за уши:
— Незначительное повышение нагрузки на сервер (первый и второй случай);
— Лишний запрос к вашему серверу (первый и второй случай), в отличие от подключения с CDN;
Как и во всех других вариантах ниже, при обновление WP из-за отсутствия noConflict или различия в версиях может случиться непредвиденное, и штатные скрипты WP перестанут работать, что мало вероятно.

wp_deregister_script

Данная функция разрушает ранее зарезервированное имя для скрипта (см. ниже).

Немного подробностей о wp_register_script (вольный перевод)

Ссылка на документацию wp_register_script
Данное описание можно использовать и напрямую в wp_enqueue_script().

Структура функции
wp_register_script ( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script ( $handle, $src, $deps, $ver, $in_footer );

$handle — Уникальное имя скрипта, которое используется в функции wp_enqueue_script(). У Вордпресс есть список зарезервированных имен. Однако с помощью данной функции можно создать и свои скрипты, которые будут вызываться в шаблоне через wp_enqueue_script() и будет защита от дублей.
Значение по умолчанию: None;

$src — путь до подключаемого файла. Можно использовать как абсолютные пути, так и пути, получаемые через GET функции (get_....).
Значение по умолчанию: None;

$deps — зависимость скрипта от других. Тут можно перечислить перечень скриптов, которые должны загрузиться до нашего скрипта. Например, если мы создали свой скрипт, который зависит от jQ, то тут можно его объявить, и тогда нам не придется специально вызывать отдельно jQ, он сам подгрузится автоматически. Например
wp_deregister_script('jquery');
wp_register_script('my_scripts', get_template_directory_uri().'/my_scripts.js', array('jquery'), '1.0', true);
Значение по умолчанию: array();

$ver — версия скрипта. Может оказаться полезен, если вы ведете интенсивные работы над блогом и постоянно добавляете функционал, а код храните в файле, имя которого не меняется. Сменив версию скрипта можно принудить браузер загрузить скрипт не из кэша браузера, а заново. Т.е. «вчера» у вас в файле my_scripts.js заложен определенный функционал, а «завтра» вы измените его содержимое и вообще шаблона так, что вчерашняя версия всё поломает. Таким образом увеличив версию скрипта, при обновление оного, пользователю будет отдана новая версия, а старая не будет использоваться. Выглядит это так:
— вчера ему отдавался файл версии 1.0 по адресу /путь_до файла/my_scripts.js?ver=1.0
— завтра, если вы смените на 1.1, при смене версии будет выдаваться /путь_до файла/my_scripts.js?ver=1.1
Значение по умолчанию: false;

$in_footer — объявляет где подключать скрипты — в хедере или футере.
Значение по умолчанию: false;

Подключение jQuery «дедовским» способом


Данный способ позволяет без каких либо знаний WP, в том числе спец. функций, подключить jQ.
Достаточно загрузить файл необходимого скрипта на сайт. Например, в папку с темой, что позволит таскать его вместе с темой.
И в header.php прописать
<script src="http://вашсайт.ру/wp-content/themes/название_темы/jquery.min.js"></script>
Думаю, тут всё понятно без объяснений. Именно таким образом обычно подключаются все скрипты.

Можно сделать небольшое улучшение подключения, на случай, если вы будете в дальнейшем менять домен или распространять шаблон (хотя с дедовским способом подключения я бы не советовал распространять шаблон  )
<script src="<?php bloginfo('template_url');?>/jquery.min.js"></script>

Плюсы:
— Контроль версий
— Во втором случае «мобильность» — не зависит от домена и структуры сайта (бывает же перемещают/переименовывают папки для защиты)
— Нет лишних запросов и нагрузки на PHP.

Минусы:
— В первом варианте — привязанность к домену
— Возможны дубли подключения

Подключение jQuery с GoogleApis (Google CDN), Яндекc API (Яндекc CDN) или jQuery Сode.


Можно подключить с GoogleApis актуальную версию
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Однако с выходом новой версии jQ ваш код может «поломаться». Для такого случая можно подключить «особенную» версию
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Этот код необходимо вставить в шапку шаблона в header.php между тегами <head> и </head>. Или, что будет правильнее, в footer.php перед закрывающим тегом </body>.

Аналогично можно подключить jQuery и другие библиотеки с Яндекса
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
К сожалению, как сделать строку с постоянной актуальной версией, я не знаю. Однако, на сайте Яндекса есть большой список всевозможных библиотек, которые вы точно так же можете подключить.

Ну и самый непопулярный способ, но позволяющий всегда быть «в теме».
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Есть вероятность, что разработчики у себя на сайте обновляют актуальную версию jQ раньше, чем на других CDN'ах. Ну а также есть вероятность первым поймать баги.

Данные методы имеют плюсы:
— Скрипты подгружаются с CDN. Благодаря этому скрипты будут грузиться быстрее, т.к. будет лишний запрос идти не на ваш сервер/хостинг, а на Google сервера. Как известно, браузеры ставят ограничения на количество одновременных потоков с одного домена. А заодно и разгрузят ваш сервер.
— Если пользователь посещал сайт, на котором jQuery был подключен таким же образом — есть большая вероятность что скрипт закэшировался браузером, и он не будет грузиться, тем самым не будут тратиться время и трафик пользователя.

Минусы
— Возможны дубли
— Возможны проблемы на магистрали провайдера у пользователя, тогда может грузиться дольше с CDN. А у некоторых провайдеров есть еще разграничение на локальный и внешний трафик… в общем смысл думаю ясен. Именно из-за это я когда-то отказался от данного способа.

Вывод

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

По сути, любой из способов имеет право на жизнь и применение, однако стоит учитывать, что в большинстве из них есть минусы. Чтобы избежать проблем, были созданы штатные средства в WP для подключения jQ, которыми и рекомендуется пользоваться для максимальной «мобильности» и уменьшения возможных ошибок.

И если вы хотите писать плагины и темы для Вордпресс, то пора переходить к написанию скриптов с объявлений переменных функций «этих самых объявлений» бесконфликтным способом — jQuery('') вместо $('').

1 комментарий

avatar
проверила, дедовский способ подключения плагина работает)