Поиск по сайту:

Молодость — не ошибка, старость — не заслуга (Немецкая поговорка).

Как добавить скрипты jQuery в WordPress

4 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
28 марта 2021
Как добавить скрипты jQuery в WordPress
Плагины и темы WordPress являются частью того, что делает CMS такой популярной, поскольку они позволяют настраивать и оптимизировать веб-сайты, размещенные на платформе.

Однако, чтобы в полной мере использовать эти элементы, важно знать, как добавлять и использовать сценарии jQuery.

Но знаете ли вы, что такое jQuery? Это библиотека JavaScript, созданная Джоном Ресигом в 2006 году. Ее основная цель – связать с элементами JavaScript в HTML, чтобы обеспечить большую динамичность и удобство использования веб-страниц.

Строки ее кода упрощают сценарии, интерпретируемые клиентским браузером, и по этой причине это одна из самых популярных библиотек в сообществе разработчиков. Не знаете, как использовать эту функцию?

Не волнутесь. В этом тексте мы опишем основные шаги по добавлению скриптов jQuery в WordPress.

Мы расскажем следующее:

  • Проверить совместимость с jQuery
  • Вход в скрытый режим jQuery
  • Вход в бесконфликтный режим
  • Постановка jQuery в WordPress

 

Проверить совместимость с jQuery

Поскольку WordPress – это инструмент с открытым исходным кодом, который работает с различными типами плагинов и тем, система использует механизм для обеспечения совместимости между различными приложениями.

Следовательно, необходимо убедиться, что jQuery добавлен таким образом, чтобы не мешать другим библиотекам и не конфликтовать с ними.

Для этого все, что вам нужно, – это небольшое изменение в способе написания строк кода. Чтобы сделать jQuery совместимым, вы не должны использовать знак $ в своем коде, как вы, вероятно, делаете в других проектах. Вместо этого вы должны использовать команду jQuery.

Итак, посмотрим на пример ниже:

$('.hideable').on('click', function() {
$(this).hide();
})

 

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

jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})

 

Просто, не правда ли? Просто замените знак доллара на jQuery, чтобы код был совместим с WordPress. Есть только одна проблема: такая замена может сделать код слишком длинным и трудным для чтения. Однако у нас есть хорошие новости.

Вы можете без проблем изменить настройки, чтобы использовать знак $. Для этого есть два варианта: использовать скрытый режим или режим без конфликтов. Подробнее о них мы поговорим в следующих темах.

Читать  Как запланировать cron jobs на сайте WordPress

 

 

Вход в скрытый режим jQuery

Если вы новичок в jQuery, вы должны понять, как работает структура скрипта, прежде чем научиться переходить в скрытый режим. Фреймворк выглядит так:  $(selector).action().

Давайте разберемся с этим для вас:

  • $ – символ доллара сообщает, что это скрипт jQuery;
  • (selector) – действует как запрос, представляя HTML-элемент, который необходимо найти;
  • action() – определяет функцию, которая будет выполняться над элементом.

Теперь, как мы видели в предыдущем разделе, WordPress требует, чтобы вы использовали режим совместимости, заменив знак доллара. Чтобы обойти это и войти в скрытый режим, вам нужно ввести код, который сопоставляет jQuery с $. Используя анонимную функцию, оберните следующий код:

(function($) {
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );

 

Здесь важно отметить, что этот процесс работает только в нижнем колонтитуле. Если вам интересно, можно запустить что-то подобное в заголовке, хотя это может замедлить работу вашего сайта. Следовательно, это действие не рекомендуется.

Однако, если вам нужно, вы должны заключить весь код в функцию, готовую к работе с документом, примерно так:

jQuery(document).ready(function( $ ) {
$('.hideable').on('click', function() {
$(this).hide();
})	
});

 

Вход в бесконфликтный режим

Другой способ избежать необходимости писать jQuery каждый раз при применении сценария – это войти в режим отсутствия конфликтов. Это позволяет вам заменить знак доллара псевдонимом j $, но вы можете определить другой символ позже.

Чтобы войти в режим конфликта, следуйте примеру ниже:

Чтобы войти в режим, следуйте приведенному ниже примеру:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();

 

Теперь, когда вы знаете, как решить проблему совместимости jQuery с WordPress, давайте перейдем к следующему шагу. Продолжай читать!

 

 

Постановка jQuery в WordPress

Есть разные способы добавить jQuery в WordPress. Вы можете сделать это, добавив встроенные скрипты, используя редактор или даже используя специализированный плагин. В каталоге CMS есть огромное количество разнообразных приложений для любых целей.

Для этой конкретной цели одним из основных моментов является расширенные настраиваемые поля , которые были установлены на миллионах сайтов по всему миру.

Читать  Как исправить перевертывание или перелистывание изображений в WordPress

Это практичное решение, но если вы хотите следовать наиболее эффективному процессу и обеспечить безопасность своего сайта, лучший способ – поставить JQuery в очередь в WordPress.

Это самый простой из доступных вариантов. Это связано с тем, что сам WP предоставляет функцию сценария постановки в очередь, которая гарантирует, что весь процесс выполняется правильно и в соответствии со стандартами безопасности платформы. Речь идет о функции wp_enqueue_script.

Он сообщает WordPress, каковы зависимости файла, когда файл должен быть загружен и на какой странице он должен быть загружен. Эта процедура не влияет на скорость загрузки веб-сайта, обеспечивая сохранение положительного восприятия страницы .

Чтобы поставить jScript в WordPress, используйте следующий код:

function custom_scripts_method()
{
wp_register_script('customscripts', get_template_directory_uri() . '/js/jquery.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('customscripts');
}

add_action('wp_enqueue_scripts', 'custom_scripts_method');

 

Важно отметить, что эта функция включает 5 параметров, а именно:

  • $ handle  – первый параметр – это имя, которое вы будете использовать для ссылки на ваш скрипт, которое должно быть написано в нижнем регистре;
  • $ src  – относительно расположения вашего файла скрипта;
  • $ deps  – указывает количество зависимостей и загружает jQuery, если он еще не загружен – это необязательное поле;
  • $ ver  – еще один необязательный параметр, он относится к номеру версии вашего скрипта;
  • $ in_footer  – указывает, где вы хотите, чтобы WP поместил ваш скрипт – если он находится в нижнем колонтитуле, установите для него значение true, если вы хотите разместить его в заголовке, просто установите его false.

Теперь, когда вы знаете, как добавлять скрипты jQuery в WordPress, у вас должна быть еще более эффективная работа на платформе.

CMS предлагает множество функций, которые могут оптимизировать ваш сайт, но не всегда возможно освоить их все.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться в соц. сетях:
4 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Читайте также

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close