Пропустить

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

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

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

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

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

Поэтому мы попытаемся уточнить вещи.

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

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

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

Узнайте, если Должен ли jQuery быть удален из ваших тем и плагинов WordPress ?

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

Посмотрите на код ниже, чтобы понять, что я имею в виду:

/ * Обычный режим * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Режим совместимости * / jQuery ('. Hideable'). ('click', function () {jQuery (this) .hide ();})

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

Проверьте редактора 10 коды для разработчиков WordPress

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

  • Знак доллара для определения jQuery
  • A (селектор) для «поиска» элементов HTML
  • Действие jQuery () для выполнения над этими элементами

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

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

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

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

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

Узнайте также по пути как легко код на WordPress, не ломая ваш сайт

JQuery (документ) .ready (функция ($) {$ () это ( 'щелчок', функция () {$ (это) .hide () 'Hideable ..';})});

Как связать ваши скрипты с jQuery

Теперь, когда вы можете написать действительный код jQuery на WordPress, мы свяжем нашу работу с нашим сайтом. В WordPress процесс называется enqueueing "(хвостовая система). Для обычного HTML-сайта мы должны использовать тег <скрипт> Добавить скрипты.

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

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

my_theme_scripts функция () {wp_enqueue_script ( 'мой пра-скрипт', get_template_directory_uri () '/js/my-great-script.js', массив (»JQuery '), 1.0.0', правда.); } add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

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

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

Откройте для себя тоже Как загрузить JavaScript WordPress

Четвертый параметр - это номер версии, а пятый параметр позволяет WordPress знать, куда поместить скрипт. По умолчанию скрипты будут загружаться в заголовок, что является плохой практикой, так как это замедляет загрузку страницы вашего сайта (браузеры перестают загружать страницу каждый раз, когда встречается блок <script>). Вы должны загрузить все свои скрипты в нижний колонтитул, если возможно, указав пятый параметр " правда .

Как добавить скрипт на приборной панели

Вы также можете добавить сценарии на приборная панель, Используемые функции точно такие же, просто используйте " крючок «Different. Посмотрите на пример ниже:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', массив ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

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

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

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

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

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

Узнайте также наш 10 WordPress плагины для повышения скорости загрузки вашего блога

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

Откройте для себя также несколько премиальных плагинов WordPress

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Интерактивные карты мира

Интерактивные карты мира - это плагин WordPress, который позволяет создавать столько карт, сколько вы хотите, с интерактивными и красочными маркерами, континентами, странами или регионами.

Он полностью совместим с новой версией WordPress и Визуальный Композитор, Благодаря этому плагину вы можете отобразить несколько типов регионов, таких как: карта всего мира, континент или субконтинент (Африка, Европа, Америка, Азия, Океания и все их субконтиненты), страна, страна разделена на регионы, штат США, штаты США поделены на метрополии, штат штатов разделен на метрополии.

скачать | Демонстрация | веб-хостинг

2. Форма контакта AJAX с отслеживанием

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

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

скачать | Демонстрация | веб-хостинг

3. Стандартный платежный шлюз PayPal для форм Ninja

Стандартный шлюз PayPal для форм Ninja позволяет создавать формы, которые легко интегрируются с платежным шлюзом PayPal.

Вы сможете создавать персонализированные формы заказов и получать платежи с использованием стандартных учетных записей Paypal. Его основными функциями являются: простая и быстрая интеграция, интеграция с IPN, возможность включать / отключать шлюз PayPal в отдельных формах, поддержка регулярных платежей и т. Д.

скачать | Демонстрация |веб-хостинг

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

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

Другие рекомендуемые ресурсы

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

Заключение

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

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

А пока расскажите нам о своем Комментарии и предложения в специальном разделе.

...

Эта статья содержит 1 комментарий
  1. Благодарю вас. Я пытаюсь сделать это с помощью знака $ в течение часа. Использование jquery не является проблемой.

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

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

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

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