Плагины и темы 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. Есть только одна проблема: такая замена может сделать код слишком длинным и трудным для чтения. Однако у нас есть хорошие новости.
Вы можете без проблем изменить настройки, чтобы использовать знак $. Для этого есть два варианта: использовать скрытый режим или режим без конфликтов. Подробнее о них мы поговорим в следующих темах.
Вход в скрытый режим 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 предлагает множество функций, которые могут оптимизировать ваш сайт, но не всегда возможно освоить их все.