› Wordpress › Полезности ›

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

Начну с начала. CDN (Content Delivery Network или Content Distribution Network - сеть доставки контента) - технология географически точной доставки контента (файлов), так чтобы компьютер пользователя загрузил файл как можно быстрее, за счет максимально близкого расположения сервера к пользователю. Такая сеть доставки файлов есть у Google, Yandex и других поисковых и не только систем. В веб-разработке, такие сети чаще всего используются для подключения часто используемых библиотек, в частности 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 существует специальный программный метод добавления скриптов на страницу - это функции: wp_register_script(), wp_enqueue_script(), wp_deregister_script() и т.д. Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки файлов для ускорения загрузки всей страницы. Так, если все скрипты подключены «правильно», то их можно программно объединить в один файл и отдавать браузеру в сжатом виде. Ну и в конце концов - это правильно, когда есть порядок и правила, которые WordPress свято чтёт, ведь если все было сделано по правилам, то при обновлении и изменении функций именно единый стандарт поможет быстро и незаметно перейти к обновлениям.

Правильно

Правильный вариант подключения 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. Такое подключение имеет ряд преимуществ:

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

Подключение jQuery из Google

Чтобы подключить 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://site.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Ссылка в примере ведет всегда на последнюю версию jQuery в CDN Google.

Здесь jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не трогается дополнительный подключаемый скрипт jqury-migrate.js, который нужен для перехода к версии jQuery 1.9.x, с ранних версий.

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

Посмотреть актуальные на сегодня ссылки на jQuery в каталоге Google можно здесь.

Не используем jquery-migrate плагин

Если не нужен плагин 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 и регистрируем "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 из 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' : $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' );
}

Статьи до этого: Код (коддинг)

Статьи до этого: Теория Wordpress (базовые знания)

Статьи до этого: jQuery

Статьи до этого: Оптимизация

❮ Openstat — удобный сервис статистики для сайта

Интернет-шлюз – современный помощник админа ❯

Kama3 месяца назад . 4.5 года назад 50 комментов

Продажа гидроцилиндры

продажа гидроцилиндры

www.krpms.ru

50 комментов

Полезные 10 Вопросы 2 Все

Алекс cайт: narcofree.ru

Если не сложно подскажите как составить блок php для добавления параметров асинхронной загрузки jquery.Так чтобы в конечном итоге на странице подключался код вида:

script src="/jquery.js" async onload="init()"

Никак не выходит добавить параметр onload="init()"

Ответитьгод назад #
- campusboy3060 cайт: www.youtube.com/c/wpplus
  - Плагин Async JavaScript
  - Статья Async with WordPress Enqueue.
  Правда тут решения, как добавить async. А вот как добавить onload="init()", надо подумать...
  
  P.S.: скорее всего так (на основе статьи по ссылке)
```
function ikreativ_async_scripts( $url ) {
	if ( strpos( $url, '#asyncload' ) === false ) {
		return $url;
	} elseif ( is_admin() ) {
		return str_replace( '#asyncload', '', $url );
	} else {
		return str_replace( '#asyncload', '', $url ) . ' async onload="init()"';
	}
}

add_filter( 'clean_url', 'ikreativ_async_scripts', 11, 1 );
```
  1
  
  Ответить10 месяцев назад #
Сережа
При подключении библиотеки из:
```
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
```
загружается версия 1.11.1. А в самом ВордПрессе версия 1.12.4! Получается, что в первой ссылке уже не самая последняя версия хранится?

Как можно сделать, чтобы загружалась родная версия jQuery из WP в подвале, но без указания конкретной версии как в предыдущем комментарии?

И вообще я не понял, почему подключаются какие-то древние версии, если сейчас есть уже jQuery 3.2.1?

В консоли разработчика Chrome есть вкладка Аудит для проверки сайта, так аудит про версию 1.11.1 вот что говорит:

Includes Front-End JavaScript Libraries With Known Security Vulnerabilities

В этой версии jQuery есть уязвимости!
Ответить9 месяцев назад #
- campusboy3060 cайт: www.youtube.com/c/wpplus
  
  Здравствуйте, Сергей. Какую версию jQuery подключать решает сам разработчик, исходя из потребностей. Никто не мешает взять другие версии jQuery из репозитория Google или другого CDN (cdnjs.com, www.jsdelivr.com, code.jquery.com и т.д.).
  
  1
  
  Ответить9 месяцев назад #
  - Сережа
    
    Здравствуйте! А почему интересно WP использует древние версии? Вы не знаете этому объяснение? Обратная совместимость?
    
    Здравствуйте, Сергей. Какую версию jQuery подключать решает сам разработчик, исходя из потребностей.
    
    Это понятно. Просто в первых комментариях к статье писали, что по этому пути всегда лежит последняя версия, а оказывается это не так...
    
    Ответить9 месяцев назад #
koxe

А как можно удалить другие версии, которые записаны в код?
Как я понимаю, библиотеку нужно подключать только один раз на странице, но некоторые разработчики плагинов и тем умудряются пихать еще и свои, в итоге у меня на странице подключается 3 разных версии. Можно ли как то их оттуда убрать?

Ответить5 месяцев назад #
@ adriatika

Привет, на локальном сервере тему на движок тяну.
Вот такая запара: wp_deregister_script('jquery') - не исключает подключение скрипта, то есть WP из wp-includes тянет jquery версии 1.12.4
Не могу понять, синтаксических ошибок вроде нет, но строка с подключением стандартного файла в коде страницы есть.

Wp версия 4.9.8

Ответить13 дней назад #