Вы хотите научиться добавлять код jQuery в WordPress? Так что продолжайте читать, чтобы узнать больше.

Несмотря на то, что 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'). On ('щелчок', function () {jQuery (this) .hide ();})

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

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

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

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

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

(функция ($) {$ ('. hideable'). on ('щелчок', функция () {$ (this) .hide ();})}) (jQuery);

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

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

jQuery (документ) .ready (функция ($) {$ ('. hideable'). on ('щелчок', function () {$ (this) .hide ();})});

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

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

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

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

function my_theme_scripts () {wp_enqueue_script ('мой-отличный-скрипт', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

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

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

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

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

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

function 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, и это все !

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

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

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

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

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

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

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

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

Интерактивные карты мира — это Плагин Wordpress который поможет вам создать столько карт, сколько вы хотите, с интерактивными и цветными маркерами, континентами, странами или регионами.

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

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

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

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

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

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

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

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

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

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

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

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

• Как эффективно использовать категории и теги на WordPress
• Как создать адаптивное меню для мобильного WordPress
• Как создать интранет WordPress для вашей организации
• Как установить плагин в WordPress

Заключение

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

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

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

...