Как правильно добавить скрипты jQuery в WordPress

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

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

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

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

Хорошае новость! С помощью нескольких модификаций можно вернуться к прекрасному знаку доллара. Выписывание jQuery много раз делает код дольше и труднее для восприятия.

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

Если Вы хотите добавить код в хэдер – чего нужно избегать по возможности – Вы можете поместить код в document-ready функцию:

Ссылка на jQuery скрипт

Если у вас есть скрипт jQuery в отдельном файле, нужно прописать ссылку на него. В WordPress этот процесс называется enqueueing (постановка в очередь).
Для этого используется специальная функция wp_enqueue_script().
Эту функцию нужно поместить в functions.php вот так:

У функции 5 аргументов. Первый это называние, с его помощью можно обратиться к скрипту, вторым является местоположение файла скрипта, третий – это массив зависимостей. В примере скрипт my-great-script зависит от изначального jquery.
Это нужно, чтобы WordPress знал, какой файл загрузить сначала.

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

Добавлениескрипта в Админ панель

Можно добавить скрипт и в админпанель. Функция при этом будет та же, но хук поменяется. Посмотрите на пример ниже:

Вместо wp_enqueue_scripts нужно использовать admin_enqueue_scripts .

Источник: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *