WordPress как на ладони
регистрация . вход
wordpress jino
Главная › Wordpress › Полезности ›

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

jquery Google cdn

Начну с начала. 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.11.0'></script>

 Использование CDN при подключении jQuery в WordPress

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

  1. Файл отдается в сжатом виде и весит меньше.

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

  3. Файл подгружается в отдельный поток.

Подключение 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:

function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true );
	wp_enqueue_script( 'jquery' );
}    

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Тут отменив "jquery" мы автоматически отменяем привязку mirgate плагина к jQuery и регистрируем "jquery" снова. В результате получим только такую строку:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта. Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, jquery все равно будет подключен в head часть документа, что логично...

Динамическая версия 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' );
}
Статьи до этого: Код (коддинг)
Статьи до этого: jQuery
Статьи до этого: Оптимизация
5 месяцев назад . 3.3 года назад 47 комментов Kama
Подключение jQuery c CDN Google с динамическим определением версии 47 комментариев
Полезные 8 Вопросы 1 Все
  • Alex34 cайт: otcam.ru

    А как быть с тем, что подключенные в head скрипты негативно сказываются на скорости отображения контента? Об этом говорит инструмент гугл. Можно ли как то включать скрипты по окончании прорисовки страницы, без конфликтно?

    Ответить1.3 года назад #
    • Kama4485

      Тут надо все скрипты совать в подвал, но это может вызвать кучу проблем... Там разбираться надо, для каждого сайта индивидуально я бы сказал. Попробуйте поместить в подвал, если все работает - то это отлично! Если нет, то надо смотреть что да как. Единого рецепта нет, пожалуй...

      Ответить1.3 года назад #
      • lincaseidhe21 cайт: ardeya.ru

        да в основном ругается на jquery:

        "Удалите код JavaScript, препятствующий отображению:
        /wp-includes/js/jquery/jquery.js"

        пробовал плагин Autooptimize (он jquery прямо в html сует), с ним ругаться перестает, но значительно увеличивается время ответа сервера (на 0.4 секунды, видимо плагин сильно перенавороченый)...

        вот хотелось бы его вручную засунуть html, чтобы не создавать дополнительный http запрос... Кама, если знаешь способ - помоги help.

        я так понимаю можно его получить в переменную, потом вывести через echo, и повесить все это на wp_head...

        Если кто-то уже сталкивался, напишите решение плиз... help ... ну как правильно сделать)

        Ответитьгод назад #
        • Kama4485

          Не надо jQuery в HTML совать, что за дичь? Чтобы избавиться от заметки: "Удалите код JavaScript, препятствующий отображению:" jquery нужно переместить в подвал и все зависимые от него скрипты тоже... Но сделать это не всегда просто. В общем-то autoptimize обычно позволяет это сделать наиболее просто, только не надо там настройку ставить, чтобы он все скрипты прямо в код HTML размещал, нужно чтобы в подвал все...

          Ответитьгод назад #
          • lincaseidhe21 cайт: ardeya.ru

            да это уже пробовал, ладно, если с темой - то все гуд, а бывает еще и плагины недобросовестные скрипты в head ставят... а autoptimize - не панацея, я ж говорю, со включенным время ответа сервера оч сильно увеличивается. если на одиночной странице менее 0.2 сек, то с включенным 0.6 - че-то не оч гуд... хотя я пробовал с минификацией включать, щас попробую только jquery и остальное в подвал запихнуть...

            Ответитьгод назад #
          • lincaseidhe21 cайт: ardeya.ru

            автооптимизе все таки че-то не так сделал, при переносе скриптов вниз, слетело что-то и перестал отображаться текстовый редактор...

            вот нарыл:

            function remove_head_scripts() { 
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);

	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

            это работает как нужно, и проблем нету даже с js разных плагинов...

            А автоптимизе оставил только для минификации css. И то потом лучше сам сожму, и вообще удалю его...

            1
            Ответитьгод назад #
            • Kama4485

              Если так все работает, то это просто замечательно!

              Ответитьгод назад #
  • Наталья cайт: nataliablogs.ru @

    Спасибо автору и комментаторам.
    Я-"чайник" в сайтостроении. Моему сайту второй год. Пока вникнешь в ошибки, которые в шаблонах есть... Недавно сделала сайт мужу по тому же шаблону, что у меня (когда свой уже изучен - Delivery Lite, то проще с ним работать).Вот теперь у гугла на сервисе скорость проверяю. Из этой статьи взяла блок

    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.12.4/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}
и из коментов
function remove_head_scripts() { 
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);

	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

    от части ошибок избавилась (ТТТ).

    осталось исправить "блокирующих ресурсов CSS на странице: 7. Они замедляют отображение контента."...
    Если специалисты дадут советы, то большое "спасибо"
    https://nataliablogs.ru/

    Ответить4 месяца назад #
12

Здравствуйте, !

Ваш комментарий