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

Подключение 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://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 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, то используйте такой код для подключения 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, его статьи об этом.

меню

WordPress Версия jQuery с CDN

Пример ниже показывает, как подключить 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
Статьи до этого: Оптимизация
Kama3 Дек 2018 . 8 мая 2014 54 коммента
54 коммента
Полезные 10 Вопросы 3 Все
  • Алекс narcofree.ru

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

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

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

    Ответить25.Сен.2017 в 17:46 #
    • campusboy3434 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
      Ответить12.Янв.2018 в 15:35 #
  • Сережа

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

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

    Ответить20.Янв.2018 в 16:34 #
    • campusboy3434 www.youtube.com/c/wpplus

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

      2
      Ответить20.Янв.2018 в 17:13 #
      • Сережа

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

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

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

        Ответить20.Янв.2018 в 17:44 #
  • koxe

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

    Ответить15.Май.2018 в 16:03 #
  • @ adriatika

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

    Wp версия 4.9.8

    Ответить31.Окт.2018 в 14:51 #
  • Кирилл best-sail.ru

    Уважаемые, прошу помощи в разборе строк кода указанных ниже, объясните пожалуйста логику на пальцах (для "новичков"), если не затруднит.

    if( !is_admin()){ 
	$url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; 
	$test_url = @fopen($url,'r'); 
	if($test_url !== false) { 
		function load_external_jQuery() {
			wp_deregister_script('jquery'); 
			wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
			wp_enqueue_script('jquery'); 
		}
		add_action('wp_enqueue_scripts', 'load_external_jQuery'); 
	} else {
		function load_local_jQuery() {
			wp_deregister_script('jquery'); 
			wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', __FILE__, false, '1.12.4', true); 
			wp_enqueue_script('jquery'); 
		}
		add_action('wp_enqueue_scripts', 'load_local_jQuery'); 
	}
}
    Ответить16.Мар.2019 в 14:46 #
    • Kama7641

      Проверяется ссылка $url, если рабочая, то jQuery перерегистрируется и подключается в HEAD по этой ссылке. Если не рабочая, то зачем опять jQuery перерегистрируется и подключается из самого ВП.

      Очень странный код и по моему еще и тормоза вызывает. Рекомендую его не юзать.

      Ответить16.Мар.2019 в 19:02 #
  • @ Валик

    Здравствуйте, заметил странную проблему на эту тему. wp_deregister_script( 'jquery-core' ); и wp_deregister_script( 'jquery' ); удаляет вместе еще кучу скриптов:

    <script type='text/javascript' src='/wp-includes/js/api-request.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/media-views.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/media-editor.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/media-audiovideo.min.js'></script>

    есть ли способ заменить версию jQuery без удаления других скриптов из ядра? Мне нужно пользователем открывать на фронтенде медиа библиотеку WordPress и если заменить версию jQuery, то медиа библиотека перестает работать.

    Ответить08.Май.2019 в 13:54 #
12
Здравствуйте, !     Войти . Зарегистрироваться