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

12 января 2016 в 17:31 Jquery,Блог веб-разработчика

Загрузка...

Большинство пользователей подключает Jquery путем добавления в часть документа такой строки, что является ошибкой.

Неправильно

[php]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
[/php]

Ошибка не в том, что не будет работать, а в том, что сам движок Worpress уже включает в себя JQuery. Так же такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами.

Незаменим, при оптимизации загрузки файлов для ускорения загрузки всего сайта.

Правильно без использования jQuery Migrate

Правильный вариант подключения jQuery скрипта это использование функции wp_enqueue_script().

Такое подключение соответствует стандарту и обезопасит вас от конфликтов с подключением этого же скрипта в плагинах (скрипт будет подключен один раз):

[php]
<?php
function my_scripts_method(){
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
?>
[/php]

Вставлять этот код нужно в файл темы functions.php. После того, как код будет вставлен, посмотрев исходный код в части страницы у вас появится следующая строка:

[php]<script type=’text/javascript’ src=’https://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0′></script>[/php]

Использование CDN при подключении jQuery в WordPress

Пример выше показывает как подключить jQuery из файлов самого WordPress, тогда как я бы порекомендовал подключать jQuery с CDN Google.

CDN — это Content Delivery Network или сеть доставки контента.

Такая сеть позволяет существенно ускорить загрузку файлов, размещенных в сети. Принцип работы CDN состоит в том, что имеется сеть серверов, на каждом из которых дублируется размещенная информация.

Когда пользователь запрашивает загрузку объекта (скрипта, файла стилей и т.д.), то происходит определение ближайшего к клиенту сервера и с него загружаются данные. В итоге задержки загрузки минимальны, скорость максимальна.

Такое подключение имеет ряд преимуществ:

• Файл отдается в сжатом виде и весит меньше;
• Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта.
• Файл подгружается в отдельный поток.

Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт (путь к файлу jQuery) и зарегистрировать свой. Делается этот путем добавления в functions.php такого кода:

[php]
function my_scripts_method() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, true );
wp_enqueue_script( ‘jquery’ );
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
[/php]

Если разобрать данный код, то каждая фраза значит:

wp_deregister_script — отключает стандартную библиотеку Jquery, которая есть в WordPress по умолчанию.
wp_register_script — регистрируем новую библиотеку.
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js — ссылка в примере ведет всегда на последнюю версию jQuery в CDN Google.
true — обычно скрипт подключается в часть документа, если указать true, то скрипт будет подключен перед тегом, точнее там где вызывается тег шаблона wp_footer(). Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнарировано.
wp_enqueue_script — добавляем в код шаблона.

Правильно с использованием jQuery Migrate

По умолчанию jQuery Migrate подключен в WordPress. Он нужен для перехода к версии jQuery 1.9.x, с более ранних версий.

Подключение «jquery-migrate» плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jquery функционал в котором нет ошибок будет работать, а ошибки можно будет исправить по мере выявления.

По этому если нужно сохранить jQuery Migrate, используем код:

[php]
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// вместо "jquery-core" просто "jquery", чтобы отключить jquery-migrate
wp_deregister_script( ‘jquery-core’ );
wp_register_script( ‘jquery-core’, ‘//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’);
wp_enqueue_script( ‘jquery’ );
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
[/php]

Jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не трогается дополнительный подключаемый скрипт jQuery-migrate.js.

В результате мы получим такие строки в head части документа:

[php]
<script type=’text/javascript’ src=’//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’></script>
<script type=’text/javascript’ src=’https://site.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></script>
[/php]

Правильное подключение jQuery с самого движка WordPress

Вам возможно нужно будет подключить jQuery той версии, которая используется в WordPress, но с CDN сервиса. Пример ниже показывает, как получить текущую версию jQuery, используемую в WordPress и использовать её в CDN ссылке:

[php]
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( ‘jquery’ );
$wp_jquery_ver = $GLOBALS[‘wp_scripts’]->registered[‘jquery’]->ver; // для версий WP меньше 3.6 ‘jquery’ меняем на ‘jquery-core’
$jquery_ver = $wp_jquery_ver == » ? ‘1.11.0’ : $wp_jquery_ver;

wp_deregister_script( ‘jquery-core’ );
wp_register_script( ‘jquery-core’, ‘//ajax.googleapis.com/ajax/libs/jquery/’. $jquery_ver .’/jquery.min.js’ );
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’, 99 );
[/php]