Подключение jQuery с Google CDN с авто-определением версии
CDN (Content Delivery Network или Content Distribution Network - сеть доставки контента) — технология географически точной доставки контента (файлов), так чтобы компьютер пользователя загрузил файл как можно быстрее, за счет максимально близкого расположения сервера к пользователю. Такая сеть доставки файлов есть у Google, Яндекс и других поисковых, и не только, систем. В веб-разработке, такие сети чаще всего используются для подключения часто используемых библиотек, в частности 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 существует специальный программный метод добавления скриптов на страницу - это функции:
Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки 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. Такое подключение имеет ряд преимуществ:
- Файл отдается в сжатом виде и весит меньше.
- Если посетитель уже заходил на сайт где 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, то используйте такой код для подключения 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' ); }
- Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре
- Динамический архив блога с использованием jQuery (Ajax)
- Кнопка «Наверх» с плавным прокручиванием
- Отключаем создание копий картинок в WordPress
- SHORTINIT константа: WordPress среда с минимальной нагрузкой
Если не сложно подскажите как составить блок php для добавления параметров асинхронной загрузки jquery.Так чтобы в конечном итоге на странице подключался код вида:
script src="/jquery.js" async onload="init()"
Никак не выходит добавить параметр onload="init()"
Правда тут решения, как добавить async. А вот как добавить
onload="init()"
, надо подумать...P.S.: скорее всего так (на основе статьи по ссылке)
При подключении библиотеки из:
загружается версия 1.11.1. А в самом ВордПрессе версия 1.12.4! Получается, что в первой ссылке уже не самая последняя версия хранится?
Как можно сделать, чтобы загружалась родная версия jQuery из WP в подвале, но без указания конкретной версии как в предыдущем комментарии?
И вообще я не понял, почему подключаются какие-то древние версии, если сейчас есть уже jQuery 3.2.1?
В консоли разработчика Chrome есть вкладка Аудит для проверки сайта, так аудит про версию 1.11.1 вот что говорит:
В этой версии jQuery есть уязвимости!
Здравствуйте, Сергей. Какую версию jQuery подключать решает сам разработчик, исходя из потребностей. Никто не мешает взять другие версии jQuery из репозитория Google или другого CDN (cdnjs.com, www.jsdelivr.com, code.jquery.com и т.д.).
Здравствуйте! А почему интересно WP использует древние версии? Вы не знаете этому объяснение? Обратная совместимость?
Это понятно. Просто в первых комментариях к статье писали, что по этому пути всегда лежит последняя версия, а оказывается это не так...
А как можно удалить другие версии, которые записаны в код?
Как я понимаю, библиотеку нужно подключать только один раз на странице, но некоторые разработчики плагинов и тем умудряются пихать еще и свои, в итоге у меня на странице подключается 3 разных версии. Можно ли как то их оттуда убрать?
Привет, на локальном сервере тему на движок тяну.
Вот такая запара: wp_deregister_script('jquery') - не исключает подключение скрипта, то есть WP из wp-includes тянет jquery версии 1.12.4
Не могу понять, синтаксических ошибок вроде нет, но строка с подключением стандартного файла в коде страницы есть.
Wp версия 4.9.8
Уважаемые, прошу помощи в разборе строк кода указанных ниже, объясните пожалуйста логику на пальцах (для "новичков"), если не затруднит.
Проверяется ссылка
$url
, если рабочая, то jQuery перерегистрируется и подключается в HEAD по этой ссылке. Если не рабочая, то зачем опять jQuery перерегистрируется и подключается из самого ВП.Очень странный код и по моему еще и тормоза вызывает. Рекомендую его не юзать.
Здравствуйте, заметил странную проблему на эту тему.
wp_deregister_script( 'jquery-core' );
иwp_deregister_script( 'jquery' );
удаляет вместе еще кучу скриптов:есть ли способ заменить версию jQuery без удаления других скриптов из ядра? Мне нужно пользователем открывать на фронтенде медиа библиотеку WordPress и если заменить версию jQuery, то медиа библиотека перестает работать.
Полный Код перерегистрации покажи.