Как использовать 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
Изменение доменного имени в WordPress

Доменное имя WordPress предоставляет собой средство поиска и идентификации сайта Read more

Как добавить видео слайдер WordPress: простое руководство для начинающих
Как добавить видео слайдер WordPress: простое руководство для начинающих

Добавление видеоконтента на ваш сайт может быть отличным способом привлечения Read more

Как исключить записи категории с главной страницы сайта на WordPress?
исключить записи с главной страницы

Очень важно при работе с сайтом убедиться, что домашняя страница Read more

Как оптимизировать изображение с помощью Photoshop
Как оптимизировать изображение с помощью Photoshop

Оптимизация изображений — это процесс сжатия и настройки параметров отображения Read more

PNG vs JPG: что лучше для сайта WordPress?
PNG vs JPG: что лучше для вашего сайта?

Визуальная привлекательность имеет решающее значение в веб-дизайне. Внешний вид должен Read more

Как установить WordPress На Локальный сервер– Полное Руководство
WordPress На Localhost

Установка WordPress на компьютер Windows или Mac часто является первым Read more

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

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

пятнадцать − семь =