Я много раз писала про 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);
});
});
Можете ли вы узнать этот код? Мы использовали его для добавления анимации ссылок в сайдабре темы.
Интересная статья, но есть вопрос. Зачем у вас в блоге jQuery подключается 2 раза? Причем версии 1.2.6 и 1.3.2.
именно потому, что когда я делала свою тему, я еще мало что знала о правильном подключении jquery в WordPress, спасибо что сказали, надо будет исправить ;)
Большое Спасибо очень помогло
Спасибо! Долго мучался со скачанной темой WordPress, из-за конфликтов. Ваша статья помогла!!!
А лучше подключать jQuery из api google, там он gzip отдается + кэширование лучше.
Почему-то все ровно лезит 2 раза jquery… 1 раз от плагина Next Gen Gallery второй раз — то что я вставляю…
А если jquery требуется для плагина? И не известно подключена ли эта библиотека уже в теме или другим плагином.
Как правильно подключить jquery в плагине?
Оно то все хорошо, но вот wp_head() подключает свою версию js, и вызов
особо не не помогает, есть ли способ отключить jquery вообще? Странным образом скрипты не хотят работать, даже если их использовать после wp_head(), помогают лишь некоторые манипуляции с functions.php, в которых я не совсем уверен… в противном случае все плагины для jquery грузятся в коде до библиотеки.wp_head() не подключает ничего, скорее всего какой-то плагин вешает на фильр wp_head подключение jQuery, для того чтобы сама бибилиотека не грузилась дважды и нужн оиспользовать функцию wp_enqueue_script, только вот саму библиотеку не стоит так грузить, как на писано на этой странице. Если скрипт использует jQuery, то нужно с помощью функции загрузить пользовательский скрипт и указать в массиве 3 параметром, используемую библиотеку, т.е. jquery.
Установил Disqus, активировал его перестал работать nivo slider, в чем может быть беда?
Отключаю Дискус, слайдер опять работает.
Как выглядит проблема. У меня слайдер стоит на главной странице, после того, при автивированном дискусе, открывается сайт нормально, но слайдер вместо показа картинок, показывает крутящееся колесо, якобы что-то он пытается загрузить.
Просто не знаю даже куда обратиться, решил туда, где хоть немного речь идет о дискусе и джикверри.
Спасибо. Долго искал как подключить яваскрипт и нашел у вас ответ.
пжл помогите разобраться: поставил 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 ползунок не двигается, что можно сделать? посоветуйте пжл
Доброго времени!
А если у меня в крде страницы есть такие строчки:
то это у меня java подключена или нет? очень хочется, чтоб была java и jquerry, но никак не могу разобраться, что надо делать ((
Ах ты ж.. не отобразилосью.. попробую так
script type=»text/javascript» src=»/wp-content/themes/redial/js/scripts.js» ></script
Спасибо за хороший перевод. До сих пор актуально.
И заметка понравилась про решение конфликта из-за $ с другими библиотеками. М.б. пригодится, если случится катать простыни на jQuery.
Оригинальное оформление ссылок в сайдбаре. Клево.
Только странно такое видеть внутри твитов.
Спасибо большое! Все получилось
Есть ли способ подключить всё через function.php?
О, боги, это же надо насколько простым оказалось решение моей проблемы!!!)
Весь на эмоциях!))
Я несколько дней уже читаю всякую оккультную литературу по ВП, чтобы заставить работать мой слайдер и галерею одновременно. Уже глаза болят и голова кружится от сотен попыток править код.
А тут все так просто и изящно. Просто поставь одну строчку, а другую опусти под «хэд» )
Дамочка, автор блога, целую ваши пальчики за данную ценную статью, которая даст отдых моим глазам и сохранит чуточку зрения!)
Будьте счастливы!
П.С. ссорри за излишнюю эмоциональность
Спасибо, все получилось.
Я только начала интересоваться JQuery, ваша статья оказалась очень кстати.
а у меня ситуация была, может кому-то поможет, на сайте перестал работать слайдер и еще пару очень приятных и нужных «плюшек» для работы которых требуется JQuery. Я уже перекопала все что могла, и по Вашей статье пыталась положение спасти и еще начитавшись кучу материала пыталась все вернуть к жизни. Ничего не помогало. А потом как-то просто не знаю по какому наитию отключила все установленные плагины и о чудо! JQuery заработал как часы )) затем просто поочередно включала каждый плагин и проверяла. Таким образом нашла плагин который вызывал конфликт, и как я сразу не заметила что после именно его установки все перестало работать не знаю.
Статья 2009 года, подскажите пожалуйста как дела обстоят в конце августа 2013 года?
А именно с движком WP 3.6, как там реализована функция подключения jQuery на автомате?
Пытаюсь подключить вот этот код:
$(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;
});
});
});
не хочет плавно прокручивать, прыгает к якорю, как будто что то не подключено.
вот я и ищу причину
У меня тоже была проблема с подключением js в вордпресс. И решение не сразу далось. Я его увидел только на wordpress.org. Это от дублирования подключаемых js и css файлов. В комментариях вижу пригодится. Суть в том, что сначала смотрится есть ли вхождения для библиотеки, а уж потом подключается необходимые JS файлы.
Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)
Спасибо за быстрое решение, у меня совсем беда с библиотеками случилась однажды
Спасибо большое! Помогли решить проблему на которую потратил целый день. Особо благодарен примеру в конце статьи гдн знак $ надо менять на $j.
«гдн знак $ надо менять на $j»
+1
сперва попробуйте это сделать, а лишь потом (если код не сработает) начинайте подключать jQuery
Привет)
У меня, в пока ещё неработающем джейквери-скрипте, есть несколько вариаций применения бакса. Все ли мне нужно заменять на «$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»? Ну и так далее, там много всякого. Как непрограммист, логику самостоятельно не улавливаю, подскажите.