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

Автор: | 17.04.2019

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 с WordPress

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

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

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

Похожие записи
Как изменить пароль WordPress (4 способа)

Пароль WordPress дает вам доступ к управлению вашим сайтом. С Read more

WordPress push-уведомления: как их настроить

Вы когда-нибудь видели всплывающее окно, запрашивающее ваше разрешение на отправку Read more

Как заработать на своем сайте

Каждый владелец блога или информационного ресурса рано или поздно задумывается Read more

Как отключить комментарии на WordPress — 3 простых метода

Сегодня поговорим о том, как отключить комментарии на WordPress. Комментарии Read more

Что такое WordPress XML Sitemap и как ее настроить

Значение слова "Карта сайта" (Sitemap) изменилось за последнее десятилетие. Интернет-технологии Read more

Как заблокировать IP-адреса в WordPress

Вы получаете нежелательные комментарии и спам от некоторых посетителей вашего Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

восемь − 2 =