В WordPress по умолчанию подключается библиотека jQuery. Поэтому не обязательно подключать дополнительные библиотеки jQuery, достаточно в файле functions.php подключить уже имеющуюся:
wp_enqueue_script("jQuery");
а подключать скрипты, для использования которых нужна библиотека jQuery можно таким образом через файл functions.php:
wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);
Загвоздка в том, что эта копия jQuery находится а режиме совместимости по умолчанию. Это означает, что типичный псевдоним $
для jQuery не работает, поэтому он не конфликтует с другими библиотеками JavaScript, которые также используют знак доллара, например MooTools или Prototype.
Многие авторы плагинов и разработчики тем знают об этом, и они используют jQuery
вместо $
.
/* Normal jQuery you see everywhere */ $("#some-element").yaddaYaddaYadda(); /* "Safe" jQuery you see in WordPress */ jQuery("#some-element").yaddaYaddaYadda();
Но постоянное использование jQuery
усложняет чтение и увеличивает код. Поэтому, если скрипты подключаются в футере, то свой код, использующий библиотеку jQuery можно завернуть в анонимную функцию, в которую вы передаете jQuery
для сопоставления $
.
(function($) { // $ Works! You can test it with next line if you like // console.log($); })( jQuery );
Если необходимо загрузить скрипты в хедере, тогда необходимо использовать функцию document ready
, тогда вы сможете использовать $
внутри нее.
jQuery(document).ready(function( $ ) { // $ Works! You can test it with next line if you like // console.log($); });
Чтобы быть супербезопасным, вы можете поместить jQuery
в режим “no conflict” и использовать другой ярлык для jQuery
. В этом случае $j
вместо стандартного $
. Например, стандартный $
может конфликтовать с Prototype. Вот пример безопасного использования jQuery JavaScript:
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); }); });