В 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);
});
});
