+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Правильное подключение jQuery к WordPress

Jquery,Блог вебмастера

скачанные файлы

Большинство пользователей подключает Jquery путем добавления в часть документа такой строки, что является ошибкой.

Неправильно

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Ошибка не в том, что не будет работать, а в том, что сам движок Worpress уже включает в себя JQuery. Так же такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами.

Незаменим, при оптимизации загрузки файлов для ускорения загрузки всего сайта.

Правильно без использования jQuery Migrate

Правильный вариант подключения jQuery скрипта это использование функции wp_enqueue_script().

Такое подключение соответствует стандарту и обезопасит вас от конфликтов с подключением этого же скрипта в плагинах (скрипт будет подключен один раз):

<?php 
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

Вставлять этот код нужно в файл темы functions.php. После того, как код будет вставлен, посмотрев исходный код в части страницы у вас появится следующая строка:

<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>

Использование CDN при подключении jQuery в WordPress

Пример выше показывает как подключить jQuery из файлов самого WordPress, тогда как я бы порекомендовал подключать jQuery с CDN Google.

CDN — это Content Delivery Network или сеть доставки контента.

Такая сеть позволяет существенно ускорить загрузку файлов, размещенных в сети. Принцип работы CDN состоит в том, что имеется сеть серверов, на каждом из которых дублируется размещенная информация.

Когда пользователь запрашивает загрузку объекта (скрипта, файла стилей и т.д.), то происходит определение ближайшего к клиенту сервера и с него загружаются данные. В итоге задержки загрузки минимальны, скорость максимальна.

Такое подключение имеет ряд преимуществ:

  • Файл отдается в сжатом виде и весит меньше;
  • Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта.
  • Файл подгружается в отдельный поток.

Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт (путь к файлу jQuery) и зарегистрировать свой. Делается этот путем добавления в functions.php такого кода:

function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', true );
wp_enqueue_script( 'jquery' );
}    

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Если разобрать данный код, то каждая фраза значит:

wp_deregister_script — отключает стандартную библиотеку Jquery, которая есть в WordPress по умолчанию.
wp_register_script — регистрируем новую библиотеку.
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js — ссылка в примере ведет всегда на последнюю версию jQuery в CDN Google.
true — обычно скрипт подключается в часть документа, если указать true, то скрипт будет подключен перед тегом , точнее там где вызывается тег шаблона wp_footer(). Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнарировано.
wp_enqueue_script — добавляем в код шаблона.

Правильно с использованием jQuery Migrate

По умолчанию jQuery Migrate подключен в WordPress. Он нужен для перехода к версии jQuery 1.9.x, с более ранних версий.

Подключение «jquery-migrate» плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jquery функционал в котором нет ошибок будет работать, а ошибки можно будет исправить по мере выявления.

По этому если нужно сохранить jQuery Migrate, используем код:

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не трогается дополнительный подключаемый скрипт jQuery-migrate.js.

В результате мы получим такие строки в 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 с самого движка WordPress

Вам возможно нужно будет подключить jQuery той версии, которая используется в WordPress, но с CDN сервиса. Пример ниже показывает, как получить текущую версию jQuery, используемую в WordPress и использовать её в CDN ссылке:

function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver; // для версий WP меньше 3.6 'jquery' меняем на 'jquery-core'
	$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' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка