Время чтения: 4 мин. 12 января 2016 в 17:31 Jquery,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

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

Большинство пользователей подключает 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]

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

Давайте знакомиться!
Я в социальных сетях, добавляйтесь!
Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

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

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

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

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

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

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

Комментарий

Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

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

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

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

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

Комментарий

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

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

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

Комментарий

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

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Рассчитать стоимость
Заполните поля ниже. Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Опишите ваш вопрос для того чтобы я мог рассчитать стоимость

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

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

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

Опишите ваш вопрос в произвольной форме

Прикрепить файл,если необходимо

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

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

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

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

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

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

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

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

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

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

Предварительная запись для получения скидки
Введите ваше имя, телефон и Skype логин и email. Я свяжусь с Вами для уточнения деталей прохождения курса.

С кого числа Вам удобней начать обучение в 2019 году?

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

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

Выберите программу

Задать вопрос
У вас появился вопрос? Предложение? Пишите, я подробно изучу вас вопрос, подготовлю ответ и отвечу вам.

Ваше имя *

Ваш e-mail*

Ваш сайт

Сообщение *

Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Курс SEO для интернет-магазинов

Из данного курса вы узнаете как превратить ваш интернет магазин рабочую лошадку, генерирующую по нарастающей поток клиентов из 300 человек в месяц, в 10 000 в день. С любым ассортиментом.

Особенности продвижения интернет-магазинов, специфика оптимизации. Как избавить себя от рутинной оптимизации каждой страницы и в 1 клик оптимизировать до 10 000 тыс товаров.

А также вы в разы увеличите продажи, значительно снизите стоимость клика и стоимость заявки, в перспективе сможете отказаться от контексной рекламы (только для акций), откроете новые горизонты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 30 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Курс SEO для корпоративных сайтов

Данный курс поможет вашему бизнесу получить новых клиентов из органического трафика.

А также вы в разы увеличите продажи, значительно снизите стоимость клика и стоимость заявки, в перспективе сможете отказаться от контексной рекламы (только для акций), откроете новые горизонты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 20 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Курс SEO для Landing Page

Данный курс - находа для вас, если вы хотите увеличить трафик или не хотите использовать контекстную рекламу для продвижения своего продукта или услуги.

Курс научит Вас оптимизировать и продвигать одностраничные сайты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 1 день.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Курс SEO для самостоятельного обучения

В закрытом разделе моего сайта весь курс представлен в текстовом/видео формате. Если вы желаете обучаться самостоятельно по актуальным данным которые работают в данный момент (поскольку данную информацию я обновляю сразу по мере изменений от поисковых систем) этот курс для вас.

Вы шаг за шагом приведете свой сайт в порядок и сможете увеличить трафик на 500% минимум!!!

Самым важным отличием данного курса от конкурентов является возможность онлайн переговоров со мной лично. Как это работает: вы изучаете урок, у вас появляются вопросы. Вы их записываете, мы созвонимся по скайпу или телефону и я голосом отвечаю на них.

Получить консультацию

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

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

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

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

Комментарий

Я работаю в городе Москва, но работу строю удаленно, и ваш город Абакан, Абинск, Аксай, Александровское, Алексин, Альметьевск, Анапа, Ангарск, Апшеронск, Арзамас, Армавир, Архангельск, Ачинск, Балаково, Балашиха, Балашов, Барнаул, Батайск, Белая Калитва, Белгород, Белореченск, Березники, Бийск, Благовещенск, Благодарный, Борисоглебск, Братск, Бронницы, Брюховецкая, Брянск, Бугульма, Буденновск, Бузулук, Великие Луки, Великий Новгород, Владивосток, Владикавказ, Владимир, Волгоград, Волгодонск, Волжский, Вологда, Волхов, Воркута, Воронеж, Воскресенск, Выборг, Выкса, Выселки, Гатчина, Геленджик, Георгиевск, Горно Алтайск, Грозный, Губкин, Гудермес, Гуково, Гусь Хрустальный, Десногорск, Дзержинск, Димитровград, Дмитров, Домодедово, Донецк, Ейск, Екатеринбург, Елец, Ессентуки, Железногорск, Железногорск Красноярский край, Железнодорожный, Зеленоград, Зеленокумск, Иваново, Ивантеевка, Ижевск, Изобильный, Ипатово, Иркутск, Йошкар Ола, Казань, Калуга, Каменск Шахтинск, Камышин, Каневская, Кашира, Кемерово, Кинешма, Кириши, Киров, Клин, Клинцы, Ковров, Коломна, Комсомольск на Амуре, Кореновск, Королёв, Кострома, Котлас, Красногорск, Краснодар, Красноярск, Крымск, Кстово, Кузнецк, Курган, Курганинск, Курск, Кущевская, Лабинск, Ленинградская, Ленинск Кузнецкий, Ливны, Липецк, Лобня, Лысьва, Лыткарино, Люберцы, Москва, Магнитогорск, Майкоп, Междуреченск, Миасс, Миллерово, Минеральные воды, Михайловск, Мичуринск, Можайск, Мончегорск, Морозовск, Мостовской, Мурманск, Муром, Мытищи, Набережные Челны, Назрань, Нальчик, Находка, Невинномысск, Нерюнгри, Нефтекамск, Нефтекумск, Нефтеюганск, Нижневартовск, Нижнекамск, Нижний Новгород, Нижний Тагил, Новоалександровск, Новокузнецк, Новомосковск, Новороссийск, Новосибирск, Новочеркасск, Новошахтинск, Норильск, Ноябрьск, Нягань, Одинцово, Октябрьский, Омск, Орёл, Оренбург, Орехово Зуево, Орск, Отрадная, Павловская, Павловский Посад, Пенза, Пермь, Петрозаводск, Петропавловск Камчатский, Подольск, Приморско Ахтарск, Прокопьевск, Псков, Пушкино, Пятигорск, Раменское, Реутов, Россошь, Ростов на Дону, Рыбинск, Рязань, Санкт Петербург, Сальск, Самара, Саранск, Саратов, Саянск, Светлоград, Северодвинск, Северская, Сергиев Посад, Серов, Серпухов, Славянск на Кубани, Смоленск, Солнечногорск, Сочи, Ставрополь, Староминская, Старый Оскол, Стерлитамак, Сургут, Сызрань, Сыктывкар, Таганрог, Тамбов, Тверь, Темрюк, Тимашевск, Тихвин, Тихорецк, Тобольск, Тольятти, Томск, Трудобеликовский, Тула, Тюмень, Улан Удэ, Ульяновск, Усинск, Усолье Сибирское, Уссурийск, Усть Илимск, Усть Лабинск, Уфа, Ухта, Фрязино, Хабаровск, Ханты Мансийск, Чебоксары, Челябинск, Череповец, Чехов, Чита, Шахты, Шелехов, Щёлково, Электросталь, Энгельс, Южно Сахалинск, Якутск, Ярославльи регионАмурская область, Камчатский край, Приморский край, Республика Саха Якутия, Сахалинская область, Хабаровский край, Кировская область, Нижегородская область, Оренбургская область, Пензенская область, Пермский край, Республика Башкортостан Октябрьский и Нефтекамск, Республика Башкортостан Уфа, Республика Марий Эл, Республика Мордовия, Республика Татарстан, Республика Татарстан Казань, Республика Удмуртия, Республика Чувашия, Самарская область, Саратовская область, Ульяновская область, Архангельская область, Вологодская область, Мурманская область, Новгородская область, Псковская область, Республика Карелия, Республика Коми Воркута и Усинск, Республика Коми Сыктывкар, Республика Ингушетия, Республика Кабардино Балкария, Республика Северная Осетия Алания, Ставропольский край, Чеченская Республика, Алтайский край, Забайкальский край, Иркутская область, Кемеровская область, Красноярский край, Красноярский край Норильск, Новосибирская область, Омская область, Республика Алтай, Республика Бурятия, Республика Хакасия, Томская область, Курганская область, Свердловская область, Тюменская область, Ханты Мансийский АО, Челябинская область, Ямало Ненецкий АО, Белгородская область, Брянская область, Владимирская область, Воронежская область, Ивановская область, Калужская область, Костромская область, Курская область, Липецкая область, Орловская область, Рязанская область, Смоленская область, Тамбовская область, Тверская область, Тульская область, Ярославская область, Волгоградская область, Краснодарский край, Республика Адыгея, Ростовская область,не имеет значения.