Пропустить

Как загрузить JavaScript WordPress

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

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

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

Любая тема WordPress обычно состоит из файлов PHP, HTML, CSS и JavaScript. JavaScript - очень известный язык программирования среди разработчиков тем WordPress. Это язык, который делает HTML-страницу интерактивной, а также позволяет вам взаимодействовать с сервером.

Знание того, как использовать его на вашем сайте, будет значительным преимуществом.

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

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

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

Как загрузить JavaScript WordPress

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

Ознакомьтесь также с нашим руководством по Как сжать ваши CSS, HTML и Javascript файлы

WordPress делает то же самое, но вы не можете просто поместить эти теги скрипта в файл верхнего или нижнего колонтитула вашей темы WordPress. WordPress использует интеллектуальный механизм загрузки под названием " enqueueing .

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

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

Как «ставить в очередь» сценарии (добавить в очередь)

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

my_theme_scripts of function () {

 wp_enqueue_script ('мой-скрипт', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Прежде всего, функция должна быть " зацепили На WordPress (Использование Крючки WordPress). Первый аргумент функции add_action () сообщает WordPress, где должны быть размещены эти скрипты:

  • В общественных местах
  • На приборной панели

Если вы используете wp_enqueue_scripts Они будут загружены в публичном пространстве, если вы используете " admin_enqueue_scripts Они будут загружены на приборной панели.

В функции « add_action Вы можете использовать wp_enqueue_script Чтобы добавить скрипты вам нужно. Функция принимает обязательный параметр и четыре необязательных параметра:

  • Первый параметр - это имя вашего скрипта. Вы можете выбрать то, что вы хотите, но обязательно используйте уникальное имя.
  • Второй параметр должен содержать расположение файла в вашей теме WordPress или плагине WordPress.
  • Третий параметр содержит массив зависимостей. В приведенном выше примере я сказал, что jQuery - это зависимость. Все зависимости загружаются перед рассматриваемым скриптом.
  • Четвертый параметр - номер версии
  • Пятый и последний параметр указывает, хотите ли вы загрузить скрипт в верхний или нижний колонтитул. Используйте «true» для загрузки в нижний колонтитул или «false» для загрузки скрипта в заголовок (Вы также не можете заполнить этот параметр).

флигелей

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

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

my_theme_scripts of function () {

 wp_enqueue_script («мой базовый скрипт», get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

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

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

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

условная загрузка

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

my_theme_scripts of function () {

 wp_register_script ('мой-скрипт', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('мой-скрипт');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

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

Например, вы можете создать карусель изображений, которые пользователи могут добавлять в статью, например: [carousel ids = '42,124,123,331,90, XNUMX ′]. На странице статьи будет создана карусель с использованием изображений, обозначенных их идентификаторами.

Для этого необходимо создать файл carousel.js Который основан на JQuery. Вот код для получения (он не создает карусель, но позволяет увидеть, как происходит процесс загрузки):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', истина);

}

 

add_shortcode ('карусель', 'my_carousel');

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

 $ atts = shortcode_atts (массив (

 'Ids' => ",

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

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

 ), $ Atts, 'карусель');

 

 wp_enqueue_script ('моя-карусель');

 // Код для отображения карусели здесь

 

}

Удаление и замена скриптов

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

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

В этих ситуациях функции wp_deregister_script () "И" wp_dequeue_script () Полезны. Вот как можно редактировать код, уже добавленный в WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', истина);

 wp_enqueue_script ('мой-скрипт', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Заключительные мысли

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

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

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

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

1. Премиум-пакет SEO

Premium SEO Pack - это плагин WordPress, который оптимизирует ваш SEO и сжимает CSS для повышения скорости загрузки вашего сайта.

Плагин также позволяет вам управлять дизайном вашего сайта в несколько кликов. Среди его функций: сжатие CSS и JS, интеграция с картой сайта для видео и сниппетов, форматирование файлов HTML и XML, перенаправление страниц 404 и 301, совместное использование в социальных сетях, предоставление 'ALT-этикетка, настраиваемый макет

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

2. Выбор времени доставки Woocommerce для доставки

Woocommerce Delivery Time Picker for Shipping - это расширение WooCommerce, которое позволяет клиентам выбирать дату и время доставки на странице оформления заказа. 

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

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

3. Меню героя

Этот плагин позволяет вам создать собственное меню WordPress за несколько простых шагов. Это позволяет вам легко и интуитивно создавать элегантное и профессиональное меню WordPress. 

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

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

От самого сложного мегаменю, полного функций, до самого простого меню с выпадающим меню - плагин WordPress. HeroMenu настраивает любой тип меню и запускает его за считанные минуты.

С точки зрения функций, которые он предлагает среди прочего: идеальная работа на ПК, планшете и смартфоне, от Пользовательский CSS чтобы добавить свои собственные стили в меню, построитель мегаменю, несколько поддерживаемых браузеров: Chrome, Firefox, Safari, Opera, IE9 и другие.

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

Рекомендуемые ресурсы

Ознакомьтесь с другими рекомендованными ресурсами, которые помогут вам исправить другие распространенные ошибки WordPress. 

Заключение

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

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

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

...

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

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

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

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

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