Использование «$» вместо «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); }); });
Создаем дочернюю тему. первым делом создается папка с таким же именем как у родителя с…
Быстрая заметка о проблеме, которая иногда встречается с форматами HubSpot, неправильно отображающимися на сайтах. Это…
Для мультиязычности сайтов на CMS WordPress я рекомендую использовать плагин Polylang — наиболее удобный, гибкий…
Для длинных записей, которые могут логично разбиваться на несколько блоков, например с нумерацией, или списком…
1 комментарий
Ответить
Спасибо!