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

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

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

Режим совместимости jQuery

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

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

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

Взгляните на этот пример.

/* Обычный jQuery */

$('.hideable').on('щелчок', function() {

$(это).скрыть();

})

/* Режим совместимости */

jQuery('.hideable').on('щелчок', function() {

jQuery(это).скрыть();

})

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

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

Для справки, $ — это псевдоним jQuery() и дескриптор функции.

Вот как выглядит базовая структура.

$(селектор).действие()

Здесь знак $ относится к jQuery, $(селектор) находит элементы HTML, а action() определяет действие, которое должно быть выполнено над этими элементами.

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

Как решить проблему совместимости jQuery?

1. Войдите в режим «jQuery Stealth»
2. Войдите в режим «Без конфликтов»

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

Источник изображения: Podfeet

Первый и наиболее распространенный способ обойти проблему совместимости — войти в режим скрытности (скрыть код).

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

Обратитесь к этому примеру

(функция ($) {

$('.hideable').on('щелчок', function() {

$(это).скрыть();

})

})(JQuery);

Теперь, если вы хотите добавить скрипт в шапку, оберните все в готовую к документу функцию и попутно передайте $.

Вот пример.

jQuery (документ) .ready (функция ( $ ) {

$('.hideable').on('щелчок', function() {

$(это).скрыть();

})

});

Войдите в режим отсутствия конфликтов

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

var $j = jQuery.noConflict();

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

Как добавить jQuery на сайты WordPress

Источник изображения: fl1digital.com

Добавление jQuery в WordPress может быть легко выполнено с помощью процесса, называемого Enqueueing .

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

Допустим, вы работаете над темой WordPress. Используйте эту функцию в вашем файле functions.php .

wp_enqueue_script()

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

функция my_theme_scripts () {

wp_enqueue_script('my-great-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, где разместить скрипт

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

Связанный: Ваше окончательное руководство по редактированию WordPress — HTML, CSS, PHP, JavaScript

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

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

Вот пример

функция my_admin_scripts() {

wp_enqueue_script('my-great-script', plugin_dir_url(__FILE__). '/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, отличную от предварительной загрузки.

Вот пример того, как вы можете отменить регистрацию jQuery в WordPress.

// включаем пользовательский jQuery

функция shapeSpace_include_custom_jquery() {

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');

Это просто. Все, что вам нужно сделать, это отменить регистрацию jQuery WordPress с помощью wp_deregister_script() и включить нужный скрипт.

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

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

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

Вот пример

add_action('wp_loaded', 'register_all_scripts');

функция register_all_scripts()

{

wp_register_script(…);

}

Как только вы закончите с этим, поставьте сценарии в очередь, когда они вам понадобятся. Вот как.

add_action('wp_enqueue_scripts', 'enqueue_front_scripts');

add_action('admin_enqueue_scripts', 'enqueue_back_scripts');

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

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

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

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

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

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

То же самое касается добавления jQuery на страницы сайта WordPress, в темы, сообщения и т. д.

Вот некоторые из самых популярных плагинов для добавления jQuery в WordPress.

• Расширенные настраиваемые поля
• Простой пользовательский CSS и JS
• Скрипты N Стили
• Очистка активов

Вывод

Так вот. Теперь вы знаете, как добавить и использовать WordPress jQuery.

Применение этих знаний к вашим проектам поможет вам создавать отличные проекты. Вы также можете прочитать наши полные руководства по таким темам, как JPG против JPEG и WordPress White Label, чтобы расширить свои знания.