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 $.
Как в примере ниже:
( 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');
Эта функция занимает пять аргументов:
- $ handle - уникальный дескриптор, который можно использовать для ссылки на скрипт.
- $src — расположение файла скрипта.
- $ deps - указывает массив зависимостей.
- $ ver - номер версии вашего скрипта.
- $ in_footer - сообщает WordPress, куда поместить скрипт.
* Стоит отметить $in_footer означает, что по умолчанию скрипты будут загружены в шапку.
Это плохая практика и может значительно замедлить работу вашего сайта. Поэтому, если вы хотите поместить свой скрипт в нижний колонтитул, убедитесь, что для этого параметра установлено значение true.
Добавление скриптов администратору WordPress
Вы также можете добавить скрипты к администратору. Используемые функции точно такие же, вам просто нужно использовать другой хук.
Например:
функция 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 для получения дополнительной информации.
Добавить jQuery в WordPress с помощью плагинов
Каталог плагинов WP также содержит много интересных плагинов, которые вы можете использовать для вставки скриптов в свои посты, страницы или Темы WordPress.
Вот несколько примеров хорошо известных плагинов JavaScript / jQuery: расширенные настраиваемые поля , Простой пользовательский CSS и JS , стили сценария n et очистка ресурсов.
Создайте свой собственный проект jQuery
Лучшее понимание jQuery только сделает вашу работу более эффективной. Будь то для вашего собственного сайта или для клиентских проектов.
jQuery хорошо известен своей простотой, и, как вы (надеюсь) узнали из этой статьи, добавить простые скрипты jQuery в WordPress проще простого, если вы знаете, как это сделать.
Да, есть небольшие накладные расходы по сравнению с использованием обычного HTML, но есть также дополнительное преимущество управления зависимостями и ясности.
Мало того, используя небольшие уловки, такие как обход совместимости jQuery WP по умолчанию, вы сэкономите много времени, усилий и раздуваемого кода.
