logo

Выберите город
Max-Webs – компания федерального уровня, в которой работают высококлассные специалисты.

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

12 января 2016 в 17:31 Jquery,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
НЕТ ВРЕМЕНИ ЧИТАТЬ СТАТЬЮ?
Но вам требуется помощь в настройке Правильное подключение jQuery к WordPress ? Получите индивидуальную мини-консультацию по Скайпу или WhatsApp.

Цена: 500 руб.Оформить заказ и оплатить

Если вы собираетесь делать все самостоятельно — продолжайте чтение!

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

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

Неправильно

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

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

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

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

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

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

[php]
<?php
function my_scripts_method(){
wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
?>
[/php]

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

[php]<script type=’text/javascript’ src=’https://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0′></script>[/php]

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

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

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

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

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

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

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

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

[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’ );
[/php]

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

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, используем код:

[php]
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’ );
[/php]

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

В результате мы получим такие строки в head части документа:

[php]
<script type=’text/javascript’ src=’//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’></script>
<script type=’text/javascript’ src=’https://site.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></script>
[/php]

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

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

[php]
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 );
[/php]

Похожие статьи

Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Бюджет на реализацию *



Запрос демо версии
Дорогой клиент, демо версию мы можем бесплатно реализовать для вас в течении 1-2 дней. Уточните детали вашего бизнеса.

Пришлите 1-5 ссылок на сайты вашей тематики которые вам нравятся. Так же можете приложить ссылки на фото(скрншоты)

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Добавить комментарий, если необходимо



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

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

Бюджет на реализацию *



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Запись на бесплатный урок
Введите ваше имя, телефон и e-mail.
Я свяжусь с Вами для уточнения времени прохождения урока.

Как вас зовут *

Как с вами связаться? *

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

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



[contact-form-7 404 "Not Found"]
Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течение 10 минут, для обсуждения деталей.


Ваш email

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

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

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

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

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течение 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

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

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

[contact-form-7 404 "Not Found"]
Заказать обратный звонок
Я свяжусь с Вами в течение 10 минут и отвечу на все Ваши вопросы.

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

Как с вами связаться? *

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



Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Задать вопрос
У вас есть вопросы адресованный интернет-маркетологу? А у меня ответы, добро пожаловать! И да, это бесплатно. Я отвечу вам в течение 24 в разделе вопрос-ответ.
[contact-form-7 404 "Not Found"]