Как использовать 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!

Как исправить ошибку «503 Service Unavailable» в WordPress?
Как исправить ошибку «503 Service Unavailable» в WordPress?

Ошибка 503 Service Unavailable является ошибкой веб-сервера. Это означает, что Read more

Что такое автоматизация бизнес-процессов и как это поможет вашему проекту?
Что такое автоматизация бизнес-процессов

Автоматизация бизнес-процессов (АБП) — это решение рутинных задач с помощью Read more

Как установить фавикон (favicon) на сайте wordpress
Как установить фавикон (favicon) на сайте wordpress

Фавикон, или значок сайта, является важным элементом брендинга, который должен Read more

Как использовать якорные ссылки в записях и страницах WordPress?
Якорные ссылки

Важной частью, которую следует учитывать, когда вы ведете блог, особенно Read more

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

Хакер, который хочет получить доступ к вашему сайту WordPress часто Read more

Как сделать редирект (перенаправить) с www на без www (и наоборот) в htaccess
Как сделать редирект (перенаправить) с www на без www в htaccess

Перед запуском нового веб-сайта, одним из решений, которые вы должны Read more

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

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

пятнадцать + 8 =