Подключение jQuery с Google CDN с авто-определением версии
CDN (Content Delivery Network или Content Distribution Network - сеть доставки контента) — технология географически точной доставки контента (файлов), так чтобы компьютер пользователя загрузил файл как можно быстрее, за счет максимально близкого расположения сервера к пользователю. Такая сеть доставки файлов есть у Google, Яндекс и других поисковых, и не только, систем. В веб-разработке, такие сети чаще всего используются для подключения часто используемых библиотек, в частности jQuery. Вот ссылка на CDN от Google, где расположены все часто используемые javascript библиотеки.
Правильное подключение jQuery в WordPress
Ошибка
Я не раз видел и даже сам упоминал в статья, не понимая всей важности ошибки. В примерах я говорил и говорил о подключении jQuery в WordPress, путем добавления в <head> часть документа такой строки:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Ошибка не в том, что не будет работать,а в том, что в WordPress существует специальный программный метод добавления скриптов на страницу - это функции:
Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки js файлов для ускорения загрузки сайта. Так например, если все скрипты подключены «правильно», то их можно программно объединить в один файл и отдавать браузеру в сжатом виде. Ну и в конце концов - это правильно, когда есть порядок и общая логика (стандарт), ведь если все сделано по стандарту, то при обновлении и изменении функций именно единый стандарт поможет быстро и незаметно перейти к обновлениям.
Правильный вариант подключения jQuery скрипта
Это использование вышеупомянутой функции wp_enqueue_script(). Такое подключение обезопасит вас от конфликтов с подключением одного и того же скрипта в разных плагинах (скрипт будет подключен один раз):
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}
Вставлять этот код нужно в файл темы functions.php. После того, как скрипт сработает, в <head> части документа появится следующая строка:
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
CDN при подключении jQuery в WordPress
Пример выше показывает, как подключить jQuery из файлов самого WordPress, тогда как я бы рекомендовал подключать jQuery с CDN Google. Такое подключение имеет ряд преимуществ:
- Файл отдается в сжатом виде и весит меньше.
- Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему - порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
- Файл подгружается в отдельный поток.
jQuery с Google CDN
Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт jQuery и зарегистрировать его еще раз с новым адресом. Делается это путем добавления в functions.php такого кода:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
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' );
}
В результате мы получим такие строки в head части документа:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
Здесь jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не затрагивается дополнительный скрипт jqury-migrate.js, который нужен для перехода к версии jQuery 1.9.x, с ранних версий.
Подключение jquery-migrate плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jQuery продолжит работать, а ошибки можно будет исправить по мере выявления.
Посмотреть актуальные на сегодня ссылки на jQuery в каталоге Google можно здесь.
Отключаем jquery-migrate.js
Если jquery-migrate.js не нужен, то используйте следующий код для подключения jQuery:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script('jquery-core');
wp_deregister_script('jquery');
// регистрируем
wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
// подключаем
wp_enqueue_script( 'jquery' );
}
Тут отменив jquery мы автоматически отменяем привязку mirgate к jQuery. В результате получим только такую строку:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта.
Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, jquery все равно будет подключен в head часть документа, что логично...
За вариант с перерегистрацией 'jquery-core' и 'jquery' спасибо Paul, его статьи об этом.
jQuery с CDN той же версии что использует WordPress
Пример ниже показывает, как подключить jQuery той версии, которая используется в WordPress, но с CDN сервиса:
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( 'jquery' );
// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver;
$jquery_ver = $wp_jquery_ver ?: '1.11.0';
$cdn_url = "//ajax.googleapis.com/ajax/libs/jquery/{$jquery_ver}/jquery.min.js";
wp_deregister_script( 'jquery-core', $cdn_url );
wp_register_script( 'jquery-core', );
wp_enqueue_script( 'jquery' );
}