Подключение jQuery библиотеки от CDN Google – рационально!..

Соль статьи вот в чём: у большинства владельцев сайтов, используются “старые шаблоны” в смысле прежние, от стародавних времён – эти темы как правило не оборудованы на современный лад, или оборудованы устаревшими примочками, к примеру, способами подключения библиотек jQuery!

Но время не стоит на месте! Google здорово развивается… появляется всё больше возможностей, и в том числе относительно скоростей загрузки сайта/блога.

Так-то оно так!

…однако большинство же админов практически не уделяют времени технической составляющей своего сайта. Отстают!.. больше и больше…

Из статьи узнаем как подключить jQuery библиотеку от CDN Google – на современный манер: занавес открывается…

 

 

что такое CDM Google и как подключить jQuery в шапке сайта

 

 

 

 

Что такое CDN?

 

CDN – более длинно так: Content Delivery Network, либо можно вольно перевести – сеть доставки контента…

 

 

…особенностью этой CDN сети Google является то, что организация доставки контента (файлов, библиотек…) настроена с привязкой к географическим обстоятельствам клиента. То есть: скажем так – браузер выбирает максимально близко расположенный к ПК пользователя сервер, на котором помещена библиотека jQuery – и подгружает оттуда. Естественно, это быстрее в плане скорости подгрузки страницы сайта…

Боле подробно по тексту ниже…

 

 

Надобно сказать, что подобной сетью библио-тематических серверов располагает и Яндекс.

 

 

 

 

чтобы правильно подключить jQuery библиотеку от CDN Google

 

 

 

 

 

 

 

 

…нужно знать и помнить, что в ядре вордпресс теперь возможны варианты подключения jquery… пара функций – наиболее распространённая эта register_script.

 

…метод просто необходим для использования! и он хорош тем, что, например, исключает конфликты с подключенными некими плагинами библиотек jQuery (конфликтных версий или одноимённых!)…

 

Это общие правила и порядок… а порядок – это здорово))

 

 

 

Однако, при всём при этом, у многих владельцев сайтов подключения библиотек выполнены кустарно: или напрямую (видал и такое – хотя это и не самый скверный вариант) или каким-то неведомым скриптом, внедряющим мета-строку в wp_head для подгрузки библиотеки.

 

…хотя, сейчас, этот процесс подключения автоматизирован… так что не буду об этом…

 

 

Короче, если открыть исходный код, то в большинстве случаев будет так (вариант WP):

 

 

 

<script type='text/javascript' src='https://mihalica.ru/wp-includes/js/jquery/jquery.js'></script>

 

 

type='text/javascript' – можно исключить из строки: валидаторы и нынешние правила позволяют…

 

 

 

Итак, чтобы подключить библиотеку, правильнее использовать функцию, о которой говорилось выше.

 

 

Преимущества: если подобная библиотека используется плагинами, то никаких повторных (а следовательно – времязатратных) подключений не будет! Библиотека подключиться только один раз! это важно!

 

 

1 – файл библиотеки принимается/отдаётся в сжатом его виде…

 

2 – а, главное, то, что если посетитель уже был на каком-то сайте где использовано подобное подключение, то его кэш-браузера будет хранить эту самую библиотеку, и отдаст при случае “нам”: т.е процесс загрузки сократится вдвое, ибо это даже не близко расположенный сервер… а тут же!

 

3 – немаловажно: файл библиотеки jQuery подгружается в отдельном потоке (загрузки полной страницы)

 

 

 

 

 

подключить jQuery библиотеку от серверов Google

 

 

 

 

Добавьте следующий код в свой файл функций functions.php (или куда там вы группируете подобный код – файл функций возможно организовать так – полезно!):

 

 

/** подключение библиотеки JS от CDN Google */
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script( 'jquery-core' );
// если заместо "jquery-core", вписать просто "jquery" - будет отменен jquery-migrate
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
/** подключение JS от CDN Google */

 

 

 

После подключения (прописки кода), в исходном коде страницы будет так:

 

 

 

 

 

 

 

 

если не использовать на сайте jquery-migrate.js

 

 

 

Это вторая строчка на картинке выше: (для чего это нужно, рассмотрим в следующей статье).

 

 

 

Если мало-мало переработать код в соответствии подсказкам в комментариях, то он получится таким:

 

 

 

/** подключение библиотеки JS от CDN Google */
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем на данный момент зарегистрированный jQuery
wp_deregister_script( 'jquery' ); // jquery-core
// будет отменен jquery-migrate
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
/** подключение JS от CDN Google */

 

 

А исходный код таким:

 

 

 

 

 

 

 

Что нам и требовалось..!

 

 

 

 

 

 

 

 

 

Если вам нужно подключить CDM от серверов гугл, но ту версию, которую использует на данный момент WordPress (это полезно, для тех, которые не обновляют WP) то вариант подключения будет выглядеть следующим образом:

 

 

 

 

 

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

 

 

 

 

Код, для динамического подключения CDN библиотек Google

 

 

/** динамическое подключение библиотеки JS от CDN Google */
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
wp_enqueue_script( 'jquery' );       // выборка версии jQuery
// коли версия вордпресс ниже 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' );
}
/** динамическое подключение библиотеки JS от CDN Google */

 

 

 

 

 

сравнивая способы подключения библиотек jQuery

 

 

 

 

 

Есть такая у меня статья на блоге: переносим в подвал подгрузку js переносим очерёдность подгрузки js в подвал – wp_footer. Так вот, если у вас уборка jquery-migrate.js осуществлялась каким-то подобным способом, не забудьте подобный же код отключить (удалить).

 

А вообще статья по ссылке полезная…

 

 

Отключить или удалить у себя аналогичный коду ниже!!

 

 

/*** отключим JS скрипт  jquery-migrate.min.js ***/
add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );
function jquery_in_footer() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true );
}
/*** ФИН отключим JS скрипт  jquery-migrate.min.js ***/

 

 

 

 

 

 

 

А по ссылкам в спойлере можно справиться о всех на данный момент версиях библиотек Gogle – вторая ссылка на выборку jQuery.

 

 

 

 

 

 

...город веб мастеров Михалика.ru © - запросто с WordPress - ATs media squad

 

 

Online консультация по настройкам и созданию сайтов на WordPress