WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

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

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' );
}

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

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

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. А вот как добавить 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
  • Сережа

    При подключении библиотеки из:

    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 есть уязвимости!

    • campusboy3060 cайт: www.youtube.com/c/wpplus

      Здравствуйте, Сергей. Какую версию jQuery подключать решает сам разработчик, исходя из потребностей. Никто не мешает взять другие версии jQuery из репозитория Google или другого CDN (cdnjs.com, www.jsdelivr.com, code.jquery.com и т.д.).

      1
      • Сережа

        Здравствуйте! А почему интересно WP использует древние версии? Вы не знаете этому объяснение? Обратная совместимость?

        Здравствуйте, Сергей. Какую версию jQuery подключать решает сам разработчик, исходя из потребностей.

        Это понятно. Просто в первых комментариях к статье писали, что по этому пути всегда лежит последняя версия, а оказывается это не так...

  • koxe

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

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

    Wp версия 4.9.8

    Ответить13 дней назад #
Здравствуйте, !     Войти . Зарегистрироваться