Подключение jQuery из Google CDN с автоматическим определением версии
CDN (Content Delivery Network), или Сеть доставки контента, — это технология, которая позволяет доставлять файлы пользователям с максимально возможной скоростью. Она делает это, выбирая сервер, расположенный ближе к пользователю. Такие сети существуют, например, у Google, Яндекса и других компаний. В веб-разработке часто используют CDN для подключения популярных библиотек, особенно jQuery.
В этой статье мы рассмотрим:
- Правильный способ подключения jQuery в WordPress
- Ошибки при подключении
- Правильный способ подключения скрипта jQuery
- Использование CDN для подключения jQuery в WordPress
- Подключение jQuery из Google CDN
- Отключение jquery-migrate.js
- Подключение jQuery с тем же номером версии, что используется в WordPress
Правильный способ подключения jQuery в WordPress
Ошибка
Многие пользователи, включая меня, часто делали ошибку, подключая jQuery неправильно. Например, в статьях говорили, что для подключения jQuery нужно добавить следующую строку в секцию <head>:
Ошибка здесь не в том, что метод не работает, а в том, что WordPress имеет специальные функции для добавления скриптов на страницу:
wp_register_script()wp_enqueue_script()wp_deregister_script()
Эти функции позволяют избежать конфликтов при подключении одного и того же скрипта разными плагинами. Кроме того, с их помощью можно оптимизировать загрузку JavaScript файлов, что ускорит загрузку сайта. Если все скрипты подключены правильно, они могут быть объединены в один файл и отправлены в браузер в сжатом виде. Так, соблюдение стандартов упрощает обновления и переход на новые версии.
Правильный способ подключения скрипта jQuery
Для правильного подключения jQuery используйте функцию wp_enqueue_script(). Это обеспечит защиту от конфликтов при подключении одного и того же скрипта:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}Этот код нужно поместить в файл вашей темы functions.php. После выполнения скрипта в секции <head> появится следующая строка:
Использование CDN для подключения jQuery в WordPress
В приведенном выше примере мы подключали jQuery из файлов WordPress. Я рекомендую подключать jQuery из Google CDN. Это имеет несколько преимуществ:
- Файлы доставляются в сжатом виде и занимают меньше места.
- Если посетитель ранее заходил на сайт, где jQuery был подключен таким же образом, скрипт уже будет в кэше и не загрузится снова.
- Файл загружается в отдельном потоке.
Подключение jQuery из Google CDN
Для подключения jQuery из Google CDN нужно сначала отключить уже зарегистрированный скрипт jQuery в WordPress, а затем зарегистрировать его заново с новым адресом. Вставьте следующий код в файл functions.php:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отключаем зарегистрированный jQuery
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> появятся следующие строки:
Здесь jquery-core означает, что ссылка на скрипт jQuery заменена, а дополнительный скрипт jquery-migrate.js, необходимый для поддержки версий 1.9.x и ниже, не затрагивается.
Подключение плагина jquery-migrate позволит избежать ошибок несовместимости с версиями 1.9.x (если ваш код был написан для более ранних версий).
Отключение jquery-migrate.js
Если jquery-migrate.js не нужен, используйт�� следующий код для подключения jQuery:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отключаем зарегистрированный jQuery
wp_deregister_script('jquery-core');
// регистрируем 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 мы автоматически отключаем его связку с jquery-migrate. Как результат, в секции <head> будет только эта строка:
Аргумент true в конце функции означает, что скрипт будет загружен внизу страницы, если это возможно. Однако если есть другие скрипты, которые зависят от jQuery и загружаются в секции <head>, jQuery все равно будет загружен туда, что логично.
Подключение 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';
$cdn_url = "//ajax.googleapis.com/ajax/libs/jquery/{$jquery_ver}/jquery.min.js";
wp_deregister_script( 'jquery-core', $cdn_url );
wp_register_script( 'jquery-core', $cdn_url );
wp_enqueue_script( 'jquery' );
}Теперь вы знаете, как правильно подключать jQuery в WordPress с помощью Google CDN. Подобный подход не только оптимизирует скорость загрузки вашего сайта, но и обеспечивает его стабильность.