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

Плагины и темы WordPress являются частью того, что делает CMS такой популярной, поскольку они позволяют настраивать и оптимизировать веб-сайты, размещенные на платформе.

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

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

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

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

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

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

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

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

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

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

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

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

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

Просто, не правда ли? Просто замените знак доллара на jQuery, чтобы код был совместим с 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 есть огромное количество разнообразных приложений для любых целей.

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

Это практичное решение, но если вы хотите следовать наиболее эффективному процессу и обеспечить безопасность своего сайта, лучший способ — поставить 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 предлагает множество функций, которые могут оптимизировать ваш сайт, но не всегда возможно освоить их все.

(1 оценок, среднее: 5,00 из 5)

Загрузка...