Подключение JQuery в WordPress (правильный способ)

jquery

Я много раз писала про 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&amp;"
    	}, 400);
    }, function() {
    	$j(this).stop().animate({
    		paddingLeft: 0
    	}, 400);
    });

});

Можете ли вы узнать этот код? Мы использовали его для добавления анимации ссылок в сайдабре темы.

Оригинал статьи.

Комментарии: (14)

  1. maxx

    Интересная статья, но есть вопрос. Зачем у вас в блоге jQuery подключается 2 раза? Причем версии 1.2.6 и 1.3.2.

    • dreamhelg

      именно потому, что когда я делала свою тему, я еще мало что знала о правильном подключении jquery в WordPress, спасибо что сказали, надо будет исправить ;)

  2. Gelios_west

    Большое Спасибо очень помогло

  3. Спасибо! Долго мучался со скачанной темой WordPress, из-за конфликтов. Ваша статья помогла!!!

  4. А лучше подключать jQuery из api google, там он gzip отдается + кэширование лучше.

  5. Почему-то все ровно лезит 2 раза jquery… 1 раз от плагина Next Gen Gallery второй раз — то что я вставляю…

  6. А если jquery требуется для плагина? И не известно подключена ли эта библиотека уже в теме или другим плагином.
    Как правильно подключить jquery в плагине?

  7. Оно то все хорошо, но вот wp_head() подключает свою версию js, и вызов особо не не помогает, есть ли способ отключить jquery вообще? Странным образом скрипты не хотят работать, даже если их использовать после wp_head(), помогают лишь некоторые манипуляции с functions.php, в которых я не совсем уверен… в противном случае все плагины для jquery грузятся в коде до библиотеки.

  8. wp_head() не подключает ничего, скорее всего какой-то плагин вешает на фильр wp_head подключение jQuery, для того чтобы сама бибилиотека не грузилась дважды и нужн оиспользовать функцию wp_enqueue_script, только вот саму библиотеку не стоит так грузить, как на писано на этой странице. Если скрипт использует jQuery, то нужно с помощью функции загрузить пользовательский скрипт и указать в массиве 3 параметром, используемую библиотеку, т.е. jquery.

  9. Установил Disqus, активировал его перестал работать nivo slider, в чем может быть беда?
    Отключаю Дискус, слайдер опять работает.
    Как выглядит проблема. У меня слайдер стоит на главной странице, после того, при автивированном дискусе, открывается сайт нормально, но слайдер вместо показа картинок, показывает крутящееся колесо, якобы что-то он пытается загрузить.
    Просто не знаю даже куда обратиться, решил туда, где хоть немного речь идет о дискусе и джикверри.

  10. Спасибо. Долго искал как подключить яваскрипт и нашел у вас ответ.

  11. Alek

    пжл помогите разобраться: поставил 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 ползунок не двигается, что можно сделать? посоветуйте пжл

  12. Доброго времени!
    А если у меня в крде страницы есть такие строчки:

    то это у меня java подключена или нет? очень хочется, чтоб была java и jquerry, но никак не могу разобраться, что надо делать ((

    • Анна

      Ах ты ж.. не отобразилосью.. попробую так
      script type=»text/javascript» src=»/wp-content/themes/redial/js/scripts.js» ></script

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>