Хотите узнать, как загрузить JavaScript в WordPress?

Все 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);

}

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' => ",

 ), $ 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. 

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

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

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

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

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

• Как исправить ошибки Перенаправление на WordPress
• Как создать собственный макет с Факир
• Как создать интранет WordPress для вашей организации
• Как создать страницу входа на WordPress

Заключение

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

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

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

...