Підключення 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://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');
}