Использование «$» вместо «jQuery» в шаблонах WordPress

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

});

Источник