Загрузка...Правильное подключение jQuery к WordPress
Большинство пользователей подключает Jquery путем добавления в
часть документа такой строки, что является ошибкой.Содержание
Неправильно
[php]
<script data-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’ data-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 — обычно скрипт подключается в
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’ data-src=’//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’></script>
<script type=’text/javascript’ data-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]
