jquery-wordpress

Название статьи подразумевает, что существуют еще неправильные способы подключить jQuery-скрипты, например, жестко прописывая путь к скрипту в файле темы header.php

Также, статья не называется Как подключить jQuery в WordPress, а именно Как подключить jQuery-скрипты в WordPress, так как если все сделано правильно, то jQuery подключится автоматически на той странице, где нужно подключить ваш jQuery-скрипт (js файл, содержащий jQuery инструкции).

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

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

Это сводится к тому, что вы не можете использовать знак доллара напрямую, как было в других проектах. При написании jQuery-скрипта для WordPress вам нужно использовать jQuery вместо $. Рассмотрим на примере:

Хорошая новость заключается в том, что с некоторыми изменениями вы можете вернуться к нашему прекрасному и дорогому (в прямом смысле) доллару! Так как писать каждый раз в коде jQuery долго, нудно и неудобно для читаемости кода. А доллар, он и в Африке доллар!)

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

Если вы хотите добавить свой скрипт в шапке сайта (что, кстати, делать не рекомендуется) — можно обернуть все в document-ready функцию, передавая $ по ходу дела:

Добавление ссылки на jQuery-скрипт

Теперь, когда вы можете написать правильный код для WordPress jQuery, давайте свяжем наш скрипт с сайтом. В WordPress процесс называется поставить в очередь. Правила одинаковые для любых скриптов и стилей и описываются в этой статье (стоит почитать)

Примеры подключения

  • Подключение скрипта на фронтенд страницах сайта, сам скрипт расположен в папке активной темы, внутри папки js, скрипт зависим от самой библиотеки jQuery (т.е. jQuery будет автоматически подключаться на всех страницах, где будет подключаться ваш скрипт), указываем версию скрипта и то, что он будет в футере

  • Подключение скрипта на фронтенд страницах сайта, сам скрипт расположен в папке дочерней темы, внутри папки js, скрипт зависим от самой библиотеки jQuery, указываем версию скрипта и то, скрипт подключается в шапку (последний параметр отсутствует)

  • В этом примере подключение происходит только в админке сайта (backend), сам скрипт расположен внутри папки js разрабатываемого плагина, версию и место загрузки можно пропустить (по умолчанию скрипт подгружается в шапке и имеет версию, равную версии самого WordPress).

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

    В этом случае с помощью условного тега is_single() мы указали, что наш скрипт необходимо подключать только на страницах одиночных записей (тип поста — запись). Таким образом оптимизируя работу сайта и не подключая скрипт там, где в нем нет необходимости.