Как использовать JQuery с WordPress

JQuery — очень популярная библиотека Javascript, которая предоставляет простые, но мощные инструменты для упрощения клиентских сценариев HTML. Поэтому нужно знать, как использовать JQuery с WordPress.

Как Использовать JQuery С WordPress

Давайте рассмотрим простую строку JQuery:

jQuery('.whatever').addClass('whateverelse');

Возможно, вы видели, что нужно писать $ вместо jQuery в начале строки, но в WordPress мы должны использовать слово jQuery со строчным “j” и прописным “Q”. WordPress запускает JQuery по умолчанию в режиме совместимости, где $ не будет работать.

В приведенном ниже примере кода показано, как правильно начать и закончить любые скрипты. Вы начинаете с <script> и заканчиваете < / script> так же, как div. Затем рекомендуется добавлять любые вызовы JQuery внутри анонимной функции, как показано ниже:

<script> function(){
jQuery ('.form_button').addClass ('btn btn-gray'); };
< / script>

Также рекомендуется поместить все скрипты в нижний колонтитул вашего сайта. Если вы пишете код в нижнем колонтитуле, поскольку ваш браузер читает код сверху вниз, ваши сценарии не будут выполняться, пока ваш браузер не опустится до нижнего колонтитула. В большинстве случаев это нормально, но иногда мы хотим, чтобы наш скрипт запускался раньше. В этом случае мы бы предваряли анонимную функцию функцией document ready, как показано ниже:

jQuery(document).ready(function(){
jQuery('.gform_button').addClass("btn btn-gray"); 
);

Как правильно подключить скрипты можно прочитать в этой статье.

Трюк, чтобы использовать знак доллара в WordPress вместо jQuery

Если вы пишете более сложный скрипт, будет неудобно переписывать jQuery вместо знака $ снова и снова, плюс это может привести к раздуванию вашего кода в размере. Что же делать?

Решение

var $ = jQuery.noConflict(); 
$( ".whatever" ).hide();

или вы можете…

(function($) {
 // Здесь ваш код };
})( jQuery );

Опять же…вы можете использовать функцию готовности документа, если вам это нужно.

Пример

Добавим несколько классов к уже существующему div с классом .main-content.

Сначала мы будем искать этот div с этим классом:

jQuery («.main-content «)

Не забудьте поставить точку перед именем класса. Теперь мы сказали jQuery выйти и просмотреть весь код и найти этот конкретный класс. В долю секунды он смотрит и находит его.

Затем, нам нужно добавить класс для нашего div.

jQuery(«.main-content «).addClass();

Вы увидите, что точка с запятой завершает строку JQuery и сообщает вашему браузеру о завершении этой функции. Давайте скажем JQuery, какой класс мы хотим добавить. Внутри скобок .addClass () нам нужно открыть набор кавычек и добавить имена классов, разделенные пробелами, которые мы хотим добавить.

jQuery(".main-content ").addClass("col-lg-4 col-md-4 col-sm-4 col-xs-12");

или

( function($) {

$(".main-content ").addClass("col-lg-4 col-md-4 col-sm-4 col-xs-12");

} )(jQuery);

Добавим этот код в файл scrypt.js

Мы сделали это! Теперь JQuery просмотрел весь код, нашел класс описания продукта и добавил к нему четыре класса Bootstrap. Вы можете проверить это, нажав на описание продукта в браузере и щелкнув правой кнопкой мыши.

В конце хочу заметить, что лучше использовать JQuery в качестве последнего средства. Всегда рекомендуется сначала найти решение с помощью HTML или CSS. Когда все остальное терпит неудачу, воспользуйтесь силой JQuery!

Как легко изменить URL-адрес входа в WordPress