Я много раз писала про JQuery, в том числе и совместном его использовании в WordPress. Но о самом главном — о том как же все-таки правильно подключить его в шаблон, не разу не говорила, поскольку не придавала этому большого значения. И сегодня пришло время исправиться, и написать небольшую заметку об этом.
Если хотите, вы можете просто загрузить JQuery, положить на свой сервер и прописать ссылку на него в header.php, в секции <head>. Но это может причинить вам неудобства. Одна из причин — некоторые плагины использующие библиотеку JQuery, будут пытаться ее загрузить. Это может вызвать проблемы, поскольку плагину не будет известно, что она уже загружена.
Вторая причина в том, что Worpress уже включает в себя копию JQuery. Далее вы узнаете как можно загрузить JQuery в свою тему, правильным способом. Вставьте следующий код в файл header.php, в секции <head>:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
Ваша тема вероятно уже включает в себя функцию wp_head, так что убедитесь что вы расположили вызов функции wp_enqueue_script ДО функции wp_head. Теперь вы можете включить вызов своего собственного JQuery JavaScript-файла ПОСЛЕ функции wp_head.
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>
(прим. автора Функция wp_enqueue_script(), как раз используется для безопасного подключения javascript в тему WordPress. Она может принимать следующие параметры:
<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>
$handle
(строка) (обязательный) Название скрипта. Без регистра.
По умолчанию: Нет
$src
(строка) (необязательный) Путь к скрипту из корневой директории WordPress. Например: «/wp-includes/js/scriptaculous/scriptaculous.js«. Этот параметр необходим только когда WordPress ничего не знает об этом скрипте.
По умолчанию: Нет
$deps
(массив) (необязательный) Массив указателей на любые скрипты, от которых зависит этот скрипт; скрипты, которые должны быть загружены до этого скрипта. false — если зависимостей нет. Этот параметр необходим только в том случае, когда WordPress ничего не знает об этом скрипте.
По умолчанию: Нет
$ver
(строка) (необязательный) Строка указывает номер версии скрипта, если их несколько. По умолчанию значение false. Этот параметр используется для обеспечения отправки пользователю, правильной версии скрипта, независимо от кэша, и он обязательно должен быть включен, если доступен номер версии, и он влияет на работу скрипта.
По умолчанию: Нет).
В принципе вы уже можете действовать, но есть некоторые соображения. Например, избежать в будущем возможных конфликтов с другими библиотеками. Вы конечно не собираетесь сразу использовать несколько JS-библиотек, но лучше предусмотреть, чем потом сожалеть.
Чтобы максимально обезопасить себя от конфликтов, в можете перевести JQuery в «неконфликтный» режим и использовать другой шорткод. В нашем примере «$j» вместо дефолтного «$». Стандартный шорткод «$», например, может конфликтовать с Prototype. Далее пример безопасного использования JQuery:
var $j = jQuery.noConflict();
$j(function(){
$j("#sidebar li a").hover(function(){
$j(this).stop().animate({
paddingLeft: "20px&"
}, 400);
}, function() {
$j(this).stop().animate({
paddingLeft: 0
}, 400);
});
});
Можете ли вы узнать этот код? Мы использовали его для добавления анимации ссылок в сайдабре темы.
maxx says:
Интересная статья, но есть вопрос. Зачем у вас в блоге jQuery подключается 2 раза? Причем версии 1.2.6 и 1.3.2.
21.06.2009 — 12:54
dreamhelg says:
именно потому, что когда я делала свою тему, я еще мало что знала о правильном подключении jquery в WordPress, спасибо что сказали, надо будет исправить ;)
21.06.2009 — 12:59
Gelios_west says:
Большое Спасибо очень помогло
28.07.2009 — 14:21
Parviz says:
Спасибо! Долго мучался со скачанной темой WordPress, из-за конфликтов. Ваша статья помогла!!!
22.08.2009 — 20:58
alexpts says:
А лучше подключать jQuery из api google, там он gzip отдается + кэширование лучше.
11.10.2009 — 17:48
kstu says:
Почему-то все ровно лезит 2 раза jquery… 1 раз от плагина Next Gen Gallery второй раз — то что я вставляю…
16.10.2009 — 10:58
DiamondSteel says:
А если jquery требуется для плагина? И не известно подключена ли эта библиотека уже в теме или другим плагином.
Как правильно подключить jquery в плагине?
04.01.2010 — 15:50
begenote says:
Оно то все хорошо, но вот wp_head() подключает свою версию js, и вызов
особо не не помогает, есть ли способ отключить jquery вообще? Странным образом скрипты не хотят работать, даже если их использовать после wp_head(), помогают лишь некоторые манипуляции с functions.php, в которых я не совсем уверен… в противном случае все плагины для jquery грузятся в коде до библиотеки.25.01.2010 — 17:38
alexpts says:
wp_head() не подключает ничего, скорее всего какой-то плагин вешает на фильр wp_head подключение jQuery, для того чтобы сама бибилиотека не грузилась дважды и нужн оиспользовать функцию wp_enqueue_script, только вот саму библиотеку не стоит так грузить, как на писано на этой странице. Если скрипт использует jQuery, то нужно с помощью функции загрузить пользовательский скрипт и указать в массиве 3 параметром, используемую библиотеку, т.е. jquery.
12.02.2010 — 21:57
Дмитрий says:
Установил Disqus, активировал его перестал работать nivo slider, в чем может быть беда?
Отключаю Дискус, слайдер опять работает.
Как выглядит проблема. У меня слайдер стоит на главной странице, после того, при автивированном дискусе, открывается сайт нормально, но слайдер вместо показа картинок, показывает крутящееся колесо, якобы что-то он пытается загрузить.
Просто не знаю даже куда обратиться, решил туда, где хоть немного речь идет о дискусе и джикверри.
29.05.2011 — 19:15
Артём says:
Спасибо. Долго искал как подключить яваскрипт и нашел у вас ответ.
30.10.2011 — 01:50
Alek says:
пжл помогите разобраться: поставил java калькулятор c jQuery-слайдером в тему WordPress, отладил — работает в опере, файрфоксе, гуглхроме, сафари, но в долбаном интернет эксплорере не отображается jQuery-слайдер — точнее рисунок отображается а ползунок не двигается. Библиотеки грузятся с ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js и ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
Пробовал как тут рекомендовалось в header.php вставлять:
до и после полный путь
все равно в IE ползунок не двигается, что можно сделать? посоветуйте пжл
05.11.2011 — 20:44
Анна says:
Доброго времени!
А если у меня в крде страницы есть такие строчки:
то это у меня java подключена или нет? очень хочется, чтоб была java и jquerry, но никак не могу разобраться, что надо делать ((
05.12.2011 — 02:37
Анна says:
Ах ты ж.. не отобразилосью.. попробую так
script type=»text/javascript» src=»/wp-content/themes/redial/js/scripts.js» ></script
05.12.2011 — 02:40
chdamir says:
Спасибо за хороший перевод. До сих пор актуально.
И заметка понравилась про решение конфликта из-за $ с другими библиотеками. М.б. пригодится, если случится катать простыни на jQuery.
Оригинальное оформление ссылок в сайдбаре. Клево.
Только странно такое видеть внутри твитов.
28.02.2012 — 16:18
Arto says:
Спасибо большое! Все получилось
21.06.2012 — 08:11
Artem says:
Есть ли способ подключить всё через function.php?
09.09.2012 — 21:24
Константин says:
О, боги, это же надо насколько простым оказалось решение моей проблемы!!!)
Весь на эмоциях!))
Я несколько дней уже читаю всякую оккультную литературу по ВП, чтобы заставить работать мой слайдер и галерею одновременно. Уже глаза болят и голова кружится от сотен попыток править код.
А тут все так просто и изящно. Просто поставь одну строчку, а другую опусти под «хэд» )
Дамочка, автор блога, целую ваши пальчики за данную ценную статью, которая даст отдых моим глазам и сохранит чуточку зрения!)
Будьте счастливы!
П.С. ссорри за излишнюю эмоциональность
25.09.2012 — 17:03
Olunka says:
Спасибо, все получилось.
Я только начала интересоваться JQuery, ваша статья оказалась очень кстати.
12.11.2012 — 04:20
Ирина says:
а у меня ситуация была, может кому-то поможет, на сайте перестал работать слайдер и еще пару очень приятных и нужных «плюшек» для работы которых требуется JQuery. Я уже перекопала все что могла, и по Вашей статье пыталась положение спасти и еще начитавшись кучу материала пыталась все вернуть к жизни. Ничего не помогало. А потом как-то просто не знаю по какому наитию отключила все установленные плагины и о чудо! JQuery заработал как часы )) затем просто поочередно включала каждый плагин и проверяла. Таким образом нашла плагин который вызывал конфликт, и как я сразу не заметила что после именно его установки все перестало работать не знаю.
07.12.2012 — 01:56
Вадим says:
Статья 2009 года, подскажите пожалуйста как дела обстоят в конце августа 2013 года?
А именно с движком WP 3.6, как там реализована функция подключения jQuery на автомате?
25.08.2013 — 23:19
Вадим says:
Пытаюсь подключить вот этот код:
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 600, 'swing', function () {
window.location.hash = target;
});
});
});
не хочет плавно прокручивать, прыгает к якорю, как будто что то не подключено.
вот я и ищу причину
25.08.2013 — 23:23
Алексей says:
У меня тоже была проблема с подключением js в вордпресс. И решение не сразу далось. Я его увидел только на wordpress.org. Это от дублирования подключаемых js и css файлов. В комментариях вижу пригодится. Суть в том, что сначала смотрится есть ли вхождения для библиотеки, а уж потом подключается необходимые JS файлы.
19.08.2015 — 21:26
Ксения says:
Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)
24.02.2016 — 14:52
Кирилл says:
Спасибо за быстрое решение, у меня совсем беда с библиотеками случилась однажды
19.02.2017 — 17:30
Romeo says:
Спасибо большое! Помогли решить проблему на которую потратил целый день. Особо благодарен примеру в конце статьи гдн знак $ надо менять на $j.
07.04.2017 — 09:39
Санек says:
«гдн знак $ надо менять на $j»
+1
сперва попробуйте это сделать, а лишь потом (если код не сработает) начинайте подключать jQuery
07.06.2018 — 17:09
Онтомн says:
Привет)
У меня, в пока ещё неработающем джейквери-скрипте, есть несколько вариаций применения бакса. Все ли мне нужно заменять на «$j»?
Вот например:
(function( $ ){
$.fn.jSlabify = function(options) {
…
$(«body»).addClass(«slabified»);
return this.each(function(){
if(options)
$.extend(settings, options);
var $this = $(this),
keepSpans = $(«span.slabbedtext», $this).length,
Где-то понятно, а где-то сомневаюсь. Например: разве «var $this» нужно править «var $jthis»? Ну и так далее, там много всякого. Как непрограммист, логику самостоятельно не улавливаю, подскажите.
24.03.2018 — 15:33