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

Интерактивные элементы страницы, такие как динамические панели поиска, расширенные фильтры продуктов и ползунки, могут сделать ваш сайт более удобным и привлекательным. Но невозможно создать любую из этих функций без использования JavaScript или установки плагинов WordPress.

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

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

Что такое jQuery? (и почему вы можете захотеть его использовать)

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

В двух словах, jQuery — это легкая библиотека JavaScript с открытым исходным кодом, которая упрощает способ написания и использования этого языка кодирования.

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

Например, вам нужен JavaScript для Ajax, обработки событий и пересечения/манипулирования DOM. В частности, функциональность Ajax практична и популярна. Веб-разработчики используют его для создания мгновенной загрузки поиска и расширенной фильтрации продуктов электронной коммерции.

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

Включен ли jQuery в WordPress по умолчанию?

jQuery — такой полезный и популярный ресурс, который по умолчанию включен в вашу установку WordPress. Вам просто нужно знать, как его использовать! В следующих разделах мы научим вас, как это сделать.

Что нужно сделать перед добавлением скриптов jQuery в WordPress

Вскоре мы объясним, как добавить скрипты jQuery в WordPress. Но сначала вы должны сделать несколько вещей, чтобы защитить свой веб-сайт, прежде чем пытаться изменить его основные файлы.

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

Если вы не знаете, как создать резервную копию своего сайта WordPress, или просто ищете инструмент для упрощения процесса, Jetpack VaultPress Backup — отличный вариант.

Jetpack VaultPress Backup автоматически сохраняет все изменения на вашем сайте. Затем вы можете использовать восстановление одним щелчком мыши, чтобы быстро восстановить содержимое. Jetpack даже позволяет восстановить ваш сайт из мобильного приложения Jetpack. Кроме того, если у вас возникнут какие-либо проблемы, вы можете получить помощь от лучшей в своем классе службы поддержки — Happiness Engineers!

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

Как добавить пользовательские сценарии jQuery в WordPress

Теперь, когда вы знаете больше о jQuery и готовите свой сайт к серьезным изменениям, давайте обсудим два способа добавления пользовательских скриптов jQuery в WordPress!

Способ 1: добавить jQuery вручную

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

Стоит использовать дочернюю тему, чтобы любые внесенные вами изменения не были отменены при обновлении темы.

Шаг 1. Войдите в режим совместимости

Одна из замечательных особенностей jQuery заключается в том, что она позволяет вам использовать некоторые знакомые сочетания клавиш при написании кода. В частности, вы можете использовать символ $ для представления jQuery. Это может сэкономить вам много времени, но некоторые другие библиотеки используют этот ярлык для представления чего-то другого.

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

Вы можете сделать это, используя следующий код:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

Когда вы выполняете приведенный выше сценарий, вы сможете использовать $j в качестве ярлыка вместо $. В качестве альтернативы вы можете использовать следующее:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

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

Шаг 2: Создайте файл сценария

Теперь, когда у вас есть код, который вам нужен, вы готовы создать файл сценария. Создайте файл и дайте ему описательное имя, например «my_new_script_file.js». Обязательно используйте расширение .js и добавьте предпочитаемый фрагмент кода совместимости вверху.

На этом этапе вам нужно будет получить доступ и отредактировать файлы вашей темы, которые имеют свои уникальные папки в файлах вашего веб-сайта.

Начните с подключения к вашему веб-сайту с помощью файлового менеджера или бесплатного клиента протокола передачи файлов (FTP), такого как FileZilla.

Затем откройте корневой каталог. Это должно называться как-то вроде public_html или просто public . Кроме того, это может быть просто название вашего веб-сайта.

Затем найдите папку вашей активной темы и создайте новую подпапку. Назовите это /js/ .  

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

Шаг 3: Добавьте скрипт jQuery в файл functions.php

Далее вам нужно найти файл functions.php вашей темы. И родительская, и дочерняя темы должны иметь один. Здесь происходят все ручные настройки.

Поскольку JavaScript требует постановки в очередь, вам нужно будет использовать функцию wp_enqueue_script(). Ваш код может выглядеть примерно так:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Обязательно замените имя вашего уникального файла скрипта и добавьте его в functions.php . Это скажет вашему файлу темы использовать файл скрипта, который вы создали на предыдущем шаге.

Способ 2: добавьте jQuery с помощью плагина WordPress

Как мы только что видели, добавление jQuery вручную может занять много времени и быть немного рискованным, особенно если вы не знакомы с редактированием кода в WordPress. Итак, теперь мы покажем вам, как добавить jQuery с помощью плагина WordPress.

Шаг 1. Установите плагин jQuery.

Во-первых, вам нужно выбрать плагин jQuery. Двумя наиболее популярными вариантами являются простые настраиваемые CSS и JS и расширенные настраиваемые поля.

В этом руководстве мы будем использовать расширенные настраиваемые поля. Этот инструмент помогает создавать привлекательные интерактивные функции с пользовательскими типами блоков.

В бесплатной версии есть множество полезных типов блоков для добавления таких элементов, как группы кнопок, Карты Google, палитры цветов, oEmbed и многое другое. Однако, если вам нужны все 30 настраиваемых блоков, вам необходимо перейти на платную версию Advanced Custom Fields.

После того, как вы выбрали предпочтительный план, просто установите и активируйте плагин, как обычно. Добавьте любые лицензионные ключи в настройках вашего плагина.

Шаг 2. Создайте новое настраиваемое поле

После того, как вы установили и активировали плагин, перейдите в «Пользовательские поля» → «Добавить новый» .

Здесь вам нужно создать свою первую группу полей. Дайте ему название рядом с Добавить новую группу полей . Затем нажмите Сохранить изменения .

Теперь вы можете приступить к редактированию нового поля. Вы можете расширить параметры, нажав «Изменить» под меткой.

Сначала откройте раскрывающееся меню для типа поля и выберите его.

Затем заполните метку поля , имя поля и т. д. Если вы продолжите прокручивать страницу вниз, вы сможете изменить дополнительные параметры, такие как Правила расположения и Представление .

В зависимости от выбранного вами местоположения вы сможете просмотреть свой новый пользовательский блок там. В редакторе блоков вы можете идентифицировать блок по метке, которую вы указали в разделе Метка поля .

Когда вы закончите, нажмите Сохранить изменения . Вы можете нажать кнопку + Добавить поле и повторить этот процесс. После этого просто перейдите в одно из мест, которое вы выбрали для своего поля, и начните его настройку!

Как отложить jQuery в WordPress

Как мы уже говорили, существует множество причин для использования JavaScript и jQuery в WordPress. Фактически, они имеют решающее значение для некоторых интерактивных функций, которые многие пользователи считают само собой разумеющимися.

Но недостатком является то, что эти сложные элементы на стороне клиента могут замедлить работу вашего сайта. Таким образом, вы можете захотеть автоматически откладывать JavaScript (и, соответственно, jQuery) при загрузке вашего сайта WordPress.

Благодаря отсрочке JavaScript все основные элементы вашего сайта будут загружаться раньше , чем менее важные функции JavaScript. Конечно, посетители вашего сайта, вероятно, не заметят этого, но это, вероятно, улучшит их пользовательский опыт (UX), потому что страница будет загружаться быстрее.

Если вы хотите автоматически откладывать jQuery на своем веб-сайте, вы можете использовать для этого Jetpack Boost.

Этот плагин может значительно улучшить общую производительность вашего сайта. В результате вы сможете поддерживать все предпочитаемые вами функции JavaScript без ущерба для скорости страницы.

В дополнение к откладыванию ненужного JavaScript, Jetpack Boost может оптимизировать загрузку CSS и применять отложенную загрузку изображений (среди других оптимизаций производительности). Используя этот инструмент, вы можете улучшить свои показатели Core Web Vitals и повысить видимость вашего сайта в результатах поиска.

Часто задаваемые вопросы о jQuery в WordPress

Надеюсь, мы развеяли большинство ваших сомнений относительно jQuery в WordPress. Тем не менее, если мы что-то упустили, вот несколько часто задаваемых вопросов!

Можете ли вы изменить версию jQuery, используемую в WordPress?

Иногда темы и плагины могут заменять или добавлять версии jQuery на ваш сайт. Поэтому важно убедиться, что ваша версия всегда актуальна. Вы можете легко сделать это с помощью таких плагинов, как jQuery Updater или Version Control for jQuery.

Где я могу проверить версию jQuery на своем сайте WordPress?

Обычно вы можете проверить версию jQuery в браузере. В Google Chrome просто перейдите на свой веб-сайт в интерфейсе. Затем перейдите в «Просмотр» → «Разработчик» → «Консоль JavaScript».

Введите jQuery.fn.jquery, и консоль должна вернуть текущую версию вашего сайта.

Можно ли полностью удалить jQuery из WordPress?

Короткий ответ: да. Если вы обнаружите, что использование JavaScript на вашем сайте негативно влияет на его производительность, вы можете удалить или отменить регистрацию jQuery.

Для этого просто добавьте следующий код в файл functions.php :

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

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

Если скорость вашего сайта ухудшилась после добавления jQuery, лучшей альтернативой будет использование такого решения, как Jetpack Boost. Он может отложить несущественный JavaScript.

Можете ли вы заменить jQuery ванильным JavaScript?

Можно заменить jQuery ванильным JavaScript. Но это может оказаться сложной задачей, если у вас нет большого опыта разработки. Итак, вам следует подумать о найме разработчика, если вам нужно это сделать.

Еще раз стоит отметить, что замена jQuery ванильным JavaScript, вероятно, не нужна, поскольку jQuery уже предоставляет оптимальный код JavaScript. В большинстве случаев незначительное влияние jQuery на производительность обычно стоит усилий, и отсрочка, как правило, является лучшим вариантом.

Если вы решите пойти по этому пути, стоит ознакомиться с этим руководством по добавлению JavaScript в WordPress. Это может помочь вам в этом процессе.

Использование jQuery в WordPress

Использование сложного JavaScript для привлечения функций на вашем сайте может значительно улучшить UX и продвинуть ваши цели. К сожалению, у вас может не хватить времени или навыков разработки для создания этих интерактивных элементов с нуля. Хорошей новостью является то, что вы можете использовать скрипты jQuery, чтобы упростить этот процесс.

Напомним, есть два способа добавить jQuery в WordPress. Во-первых, вы можете сделать это вручную, перейдя в режим совместимости и создав файл сценария. Затем добавьте новый скрипт в файл functions.php . В качестве альтернативы вы можете использовать плагин, например Advanced Custom Fields, чтобы ускорить процесс и устранить необходимость ручного кодирования.

Когда вы используете jQuery для добавления сложных элементов дизайна на свой веб-сайт, вы можете улучшить UX и произвести впечатление на своих посетителей. Но несколько интерактивных функций могут повредить производительности ваших веб-страниц. К счастью, Jetpack Boost может помочь оптимизировать скорость вашего сайта.