Пропустить

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

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

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

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

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

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

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

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

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

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

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

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

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

/ * Обычный JQuery * / $ ('.hideable') .on ('click', function () { $ (this) .hide (); })

/ * Режим совместимости * / jQuery ('.hideable') .on ('click', function () { jQuery (это) .hide (); })

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

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

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

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

Основная структура выглядит следующим образом: $ (Селектор) .action (), Знак доллара определяет jQuery ... "(селектор)" запрашивает или находит элементы HTML ... и, наконец, "действие jQuery ()" - это действие, которое выполняется над элементами.

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

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

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

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

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

Начните продвигать свой блог

Загрузите десятки логотипов, баннеров, шаблонов веб-сайтов и многих других маркетинговых инструментов для продвижения вашего блога WordPress. [Рекомендуется]

(функция ($) { $ ('.hideable') .on ('click', function () { $ (this) .hide (); }) }) (jQuery);

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

jQuery (документ) .ready (function ($) { $ ('.hideable') .on ('click', function () { $ (this) .hide (); }) });

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

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

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

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

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

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

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

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

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

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

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

function 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 знать, куда поместить скрипт.

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

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

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

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

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

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

Например:

function my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__ФАЙЛОВ__). '/js/my-great-script.js', массив ('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'); register_all_scripts () function { wp_register_script (…); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вверх
2 акции
доля2
чирикать
Регистрация