WordPress как на ладони
Вход . Регистрация
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Авторские Темы для WordPress

Подключение jQuery с Google CDN с авто-определением версии

CDN (Content Delivery Network или Content Distribution Network - сеть доставки контента) — технология географически точной доставки контента (файлов), так чтобы компьютер пользователя загрузил файл как можно быстрее, за счет максимально близкого расположения сервера к пользователю. Такая сеть доставки файлов есть у Google, Яндекс и других поисковых, и не только, систем. В веб-разработке, такие сети чаще всего используются для подключения часто используемых библиотек, в частности jQuery. Вот ссылка на CDN от Google, где расположены все часто используемые javascript библиотеки.

jquery Google cdn
Оглавление:

Правильное подключение 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://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
меню

CDN при подключении jQuery в WordPress

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

  1. Файл отдается в сжатом виде и весит меньше.
  2. Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему - порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
  3. Файл подгружается в отдельный поток.
меню

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, то используйте такой код для подключения 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, его статьи об этом.

меню

WordPress Версия jQuery с CDN

Пример ниже показывает, как подключить 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' : $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' );
}
Статьи до этого: jQuery
Статьи до этого: Оптимизация
Kama1 месяц назад . 7 лет назад 62 коммента
62 коммента
Полезные 10 Вопросы 4 Все
    Войти