Подключение 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://site.ru/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' );
}
- Must-Use плагины в WordPress
- API настроек (опций)
- SHORTINIT константа: WordPress среда с минимальной нагрузкой
- Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре
- Динамический архив блога с использованием jQuery (Ajax)
- Кнопка «Наверх» с плавным прокручиванием
Если не сложно подскажите как составить блок php для добавления параметров асинхронной загрузки jquery.Так чтобы в конечном итоге на странице подключался код вида:
script src="/jquery.js" async onload="init()"
Никак не выходит добавить параметр onload="init()"
Правда тут решения, как добавить 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.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
Уважаемые, прошу помощи в разборе строк кода указанных ниже, объясните пожалуйста логику на пальцах (для "новичков"), если не затруднит.
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'); } }Проверяется ссылка
$url, если рабочая, то jQuery перерегистрируется и подключается в HEAD по этой ссылке. Если не рабочая, то зачем опять jQuery перерегистрируется и подключается из самого ВП.Очень странный код и по моему еще и тормоза вызывает. Рекомендую его не юзать.