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