Пропустить

Как правильно добавить код JQuery на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

О режиме совместимости с jQuery

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

Как вы, наверное, знаете, WordPress поставляется с уже включенным jQuery.

Версия jQuery для WordPress также имеет " режим совместимости Это механизм, позволяющий избежать конфликтов с другими библиотеками javascript.

Часть этого защитного механизма означает, что вы не по-па использовать $подписывайтесь напрямую, как в других проектах.

Вместо этого при написании кода jQuery для WordPress вы должны использовать jQuery.

Вот пример этого кода:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

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

Хорошие новости?

С помощью нескольких модификаций вы снова можете использовать наш симпатичный маленький символ доллара.

Кстати, если вы новичок в jQuery знак $ - это просто псевдоним для jQuery (), а затем псевдоним для функции.

Базовая структура выглядит так: $(selector).action(). Знак доллара определяет jQuery… «(селектор)» запрашивает или находит элементы HTML… и, наконец, «действие jQuery ()» - это действие, выполняемое над элементами.

Возвращаясь к тому, как мы можем обойти нашу проблему совместимости ... вот несколько жизнеспособных вариантов:

1.Введите скрытый режим jQuery

Первый способ обойти режим совместимости - проникнуть в код.

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

Как в примере ниже:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

2. Войдите в режим «Нет конфликта»

Еще один простой способ избежать написания jQuery - переключиться в режим "Конфликт свободен" и используйте другой ярлык.

В этом случае: $jвместо по умолчанию $.

Все, что вам нужно сделать, это объявить в верхней части вашего скрипта:var $j = jQuery.noConflict();

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

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

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

Для классического веб-сайта HTML мы будем использовать  <link> пункт для добавления скриптов. WordPress делает то же самое, но мы будем использовать для этого специальные функции WP.

Таким образом, он управляет всеми нашими зависимостями для нас (спасибо WP!).

Если вы работаете над темой, вы можете использовать функцию  wp_enqueue_script() в вашем  functions.php файл.

Вот как это выглядит:

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Эта функция занимает пять аргументов:

  1. $ handle - уникальный дескриптор, который можно использовать для ссылки на скрипт.
  2. $ src - расположение файла скрипта.
  3. $ deps - указывает массив зависимостей.
  4. $ ver - номер версии вашего скрипта.
  5. $ in_footer - сообщает WordPress, куда поместить скрипт.

* Стоит отметить  $in_footer означает, что по умолчанию скрипты будут загружены в шапку.

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Добавление скриптов администратору WordPress

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

Например:

function my_admin_scripts () {
wp_enqueue_script ('мой-отличный-скрипт', plugin_dir_url (__ФАЙЛОВ__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Вместо входа в систему, wp_enqueue_scriptsмы должны использовать admin_enqueue_scripts.

Как отписаться от jQuery из WordPress

Но что, если вы хотите использовать версию jQuery, отличную от той, которая была предварительно загружена WordPress?

Вы можете поставить его в очередь ... но это означает, что на странице будут две версии jQuery.

Чтобы этого не произошло, нам нужно отменить регистрацию версии WP.

Вот как это выглядит:

// включает пользовательский jQuery
shapeSpace_include_custom_jquery () function {

wp_deregister_script ('jquery');
wp_enqueue_script(
   'jquery', 
   'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
   array(), 
   null, 
   true);
}
 add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Это так же просто, как использовать  wp_deregister_script () для разрегистрировать jQuery из WP, затем включающий скрипт jQuery, который вы хотите добавить.

В приведенном выше примере мы использовали Библиотека jQuery, размещенная в Google , но вы, очевидно, замените его URL-адресом вашего собственного скрипта.

Не следует ли сохранять сценарии перед их постановкой в ​​очередь?

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

Например, на  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

Как только вы это сделаете, вы можете поставить скрипты в очередь, когда они вам понадобятся:

add_action ('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action ('admin_enqueue_scripts', 'enqueue_back_scripts');

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

Использование условных тегов

Используйте условные теги для загрузки ваших скриптов только при необходимости.

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

Посмотрите на документация скриптов очередей  в Кодексе WordPress для получения дополнительной информации.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Добавить jQuery в WordPress с помощью плагинов

Каталог плагинов WP также содержит много интересных плагинов, которые вы можете использовать для вставки скриптов в ваши публикации, страницы или темы WordPress.

Вот несколько примеров хорошо известных плагинов JavaScript / jQuery: расширенные настраиваемые поля , Простой пользовательский CSS и JS , стили сценария n et очистка ресурсов.

Создайте свой собственный проект jQuery

Лучшее понимание jQuery только сделает вашу работу более эффективной. Будь то для вашего собственного сайта или для клиентских проектов.

jQuery хорошо известен своей простотой, и, как вы (надеюсь) узнали из этой статьи, добавить простые скрипты jQuery в WordPress проще простого, если вы знаете, как это сделать.

Да, есть небольшие накладные расходы по сравнению с использованием обычного HTML, но есть также дополнительное преимущество управления зависимостями и ясности.

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх