Пропустить

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

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

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

Более Загрузка 600.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 ('my-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, поэтому вы можете добавить ее в качестве зависимости без каких-либо забот. Есть много других jQuery-скриптов и плагинов, которые предлагает WordPress. Если ваш код зависит от одного из них, вам не нужно использовать одну из своих копий, а просто добавить ее в качестве зависимости. Вот Список скриптов, которые WordPress предложения.

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

my_theme_scripts of function () {

wp_enqueue_script («сценарий my-base», get_template_directory_uri (). '/js/my-base-script.js', массив ('jquery'), '1.0.0', true);

wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', массив ("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 ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

wp_enqueue_script ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

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

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

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

Для этого необходимо создать файл 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', true);

}

add_shortcode ('carousel', 'my_carousel');

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

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

'Ids' => ",

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

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

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

wp_enqueue_script ('my-carousel');

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

}

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

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

Вы также можете заменить 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', true);

wp_enqueue_script ('my-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