jQuery в WordPress

WordPress уже содержит jQuery — в современных версиях это jQuery 3.7. Отдельно загружать библиотеку с CDN не нужно: достаточно сказать WordPress, что вашему скрипту нужна jQuery, и он подключит её сам, один раз и в правильном порядке.

Где лежат файлы

Скрипт кладут в папку темы, а подключают в её файле functions.php:

wp-content/themes/my-theme/
├── functions.php
├── style.css
└── js/
    └── todo.js

Если вы правите чужую тему, создайте дочернюю тему: при обновлении основной темы ваши файлы иначе пропадут.

Подключение: wp_enqueue_script

Добавьте в functions.php:

<?php
// wp-content/themes/my-theme/functions.php
 
function my_theme_scripts() {
    wp_enqueue_script(
        'my-theme-todo',                 // имя скрипта
        get_theme_file_uri('js/todo.js'), // адрес файла
        array('jquery'),                 // зависимости
        '1.0.0',                         // версия
        true                             // подключить в конце страницы
    );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Функция wp_enqueue_script() ставит скрипт в очередь. Зависимость 'jquery' гарантирует, что jQuery загрузится раньше вашего файла. Версия добавляется к адресу как ?ver=1.0.0 — при её смене браузер не возьмёт старый файл из кеша. Откройте любую страницу сайта и посмотрите исходный код: перед todo.js будет тег с jquery.min.js.

Режим noConflict

WordPress включает jQuery в режиме noConflict: короткое имя $ освобождено для других библиотек, и доступно только полное имя jQuery. Поэтому привычный код в WordPress падает с ошибкой $ is not a function.

Решение — получить $ как аргумент. Функция, переданная в jQuery(), получает саму jQuery первым аргументом:

// wp-content/themes/my-theme/js/todo.js
jQuery(function ($) {
  $('.todo-list').on('click', 'li', function () {
    $(this).toggleClass('done');
  });
});

Внутри функции $ снова работает как обычно, а снаружи не мешает другим скриптам. Этот же приём — обёртка (function ($) { ... })(jQuery) — используется в плагинах из прошлого урока.

Разметка

Список выводится в шаблоне темы, например в page.php, или через блок «HTML» в редакторе:

<ul class="todo-list">
  <li>Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>

Щелчок по пункту на странице сайта зачёркивает его — если в style.css темы есть правило для класса done.

noConflict вне WordPress

Вне WordPress такой режим включают вручную:

// script.js
const jq = jQuery.noConflict();
jq('h1').text('Список дел');

После вызова $ возвращается библиотеке, которая занимала его до jQuery, а jQuery доступна под именами jQuery и jq.

Частая ошибка

Отключать встроенную jQuery через wp_deregister_script('jquery') и подключать свою с CDN или другой версии. Плагины WordPress рассчитаны на встроенную версию и могут перестать работать, а при ошибке в адресе jQuery пропадёт со всего сайта. Пользуйтесь той, что поставляется с WordPress.