Skip to content

Всё для WordPress, веб-разработки — и не только

👉 Как исправить «$ is not a function» в WordPress: 4 способа
WordPressВеб-разработка
6 мин1,190 слов1 837

👉 Как исправить «$ is not a function» в WordPress: 4 способа

Вы правите functions.php, добавляете пару строк jQuery, и сайт падает с белым экраном. В консоли горит: Uncaught TypeError: $ is not a function. Знакомая картина?

С этой ошибкой сталкивается каждый WordPress-разработчик хотя бы раз. Вы копируете рабочий jQuery-код из CodePen или сниппета, вставляете на сайт, а WordPress его не понимает. Причина не в кривом коде и не в конфликте плагинов. Причина в том, как WordPress обращается с jQuery.

Мы разберём четыре проверенных способа исправить ошибку «$ is not a function», от безопасного IIFE-враппера до полного отключения noConflict. Каждый способ с готовым кодом, который можно скопировать и вставить.

💡 Быстрый обзор:

  • Оберните jQuery-код в анонимную функцию IIFE, самый безопасный и универсальный способ
  • Используйте jQuery document ready с параметром доллара для скриптов в head
  • Назначьте свой псевдоним через noConflict, удобно если доллар занят другой библиотекой
  • Глобально отключите noConflict, только когда нет других библиотек на сайте

Почему возникает ошибка «$ is not a function» в WordPress

WordPress загружает jQuery в режиме noConflict. Это означает, что переменная $, короткий псевдоним jQuery, не доступна глобально. Разработчики ядра WordPress сделали это намеренно, чтобы избежать конфликтов: многие JavaScript-библиотеки (Prototype, MooTools, старые версии Bootstrap) тоже используют $ как своё главное сокращение.

Когда вы пишете в своём скрипте:

1$("#element").hide();

WordPress не знает, что $, это jQuery. Он видит вызов неизвестной функции и выбрасывает TypeError: $ is not a function. Вне WordPress, на «голой» HTML-странице, этот же код отработал бы без проблем, там jQuery регистрирует $ глобально.

Технически WordPress понимает только полное имя: jQuery("#element").hide(). Но писать jQuery вместо $ в каждой строке многострочного скрипта неудобно, код распухает и теряет читаемость. К счастью, есть четыре способа обойти это ограничение.

Ошибка $ is not a function в консоли WordPress

Перед любыми правками файлов темы сделайте резервную копию сайта. Одна пропущенная точка с запятой в functions.php, и сайт ложится. С бекапом вы откатите изменения за минуту.

Способ 1: IIFE-обёртка, безопасный и универсальный

Самый надёжный способ вернуть $ в WordPress-скрипты, немедленно вызываемая функция (IIFE, Immediately Invoked Function Expression). Вы передаёте jQuery как аргумент, а внутри функции обращаетесь к нему через привычный $.

Код для footer.php или низкоуровневой вставки (подвал сайта):

1(function($) {
2    // Ваш jQuery-код здесь
3    $("#element").hide();
4})(jQuery);

Что здесь происходит: анонимная функция принимает параметр $ и сразу вызывается с аргументом jQuery. Внутри этой функции $ === jQuery, а снаружи $ по-прежнему не определён. Конфликт с другими библиотеками исключён.

Этот способ работает для скриптов в подвале. Если скрипт должен сработать в <head>, используйте способ 2.

Способ 2: jQuery(document).ready с параметром $

Когда скрипт должен выполняться в заголовке страницы (до загрузки DOM), оберните его в jQuery(document).ready. Обратите внимание: в параметр колбэка передаётся $, это не опечатка, а ключевой момент.

Код для header.php или functions.php через wp_enqueue_script:

1jQuery(document).ready(function($) {
2    // Ваш jQuery-код здесь
3    console.log($);
4});

Метод .ready() дожидается полной загрузки DOM, а jQuery передаёт себя в колбэк как $. Внутри этого колбэка $ снова работает как в обычном JavaScript-окружении. И, в отличие от способа 1, скрипт стартует из <head>, что полезно для критических операций инициализации.

Большинство разработчиков тем и плагинов знают об этой особенности WordPress, поэтому в качественных продуктах вы почти всегда увидите jQuery вместо $, или один из врапперов выше.

Способ 3: создать собственный псевдоним через noConflict

jQuery позволяет не только вернуть $, но и назначить любой другой короткий псевдоним, например переменные $j или jq, либо любую переменную на ваш вкус. Это удобно, когда на сайте уже используется другая библиотека, занявшая $.

1var jq = jQuery.noConflict();
2jq("div p").hide();
3 
4// Другая библиотека продолжает использовать свой $
5$("content").style.display = "none";

Метод jQuery.noConflict() освобождает $ для других библиотек и возвращает jQuery в вашу переменную (jq в примере). После этого вызовы делаются через jq(...), а $ работает как у соседней библиотеки, конфликт исчезает полностью.

Этот подход особенно полезен на сайтах, где WordPress-тема соседствует со сторонним JavaScript-фреймворком, использующим $ для своих целей.

Способ 4: полностью отключить noConflict (с осторожностью)

Если вы точно знаете, что на сайте нет других библиотек, претендующих на $, можно отключить noConflict-режим глобально:

1$ = jQuery.noConflict(true);

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

Мы рекомендуем способы 1 и 2 как основные, они безопасны, изолированы и покрывают подавляющее большинство реальных сценариев. Способ 4, для ситуаций, когда вы поддерживаете большой legacy-скрипт и не можете обернуть каждую функцию отдельно.

На видео выше, наглядная демонстрация всех четырёх способов в действии. Посмотрите, если предпочитаете визуальное объяснение текстовому.

⁉️🤔 Частые вопросы

Почему в WordPress вообще отключили $ для jQuery?

Разработчики ядра WordPress включили jQuery.noConflict() по умолчанию, чтобы обезопасить сайты от конфликтов с другими JavaScript-библиотеками. Prototype.js, MooTools и некоторые старые фреймворки тоже регистрируют глобальную переменную $. Если бы WordPress отдавал $ под jQuery, любая тема или плагин с такой библиотекой ломали бы админку или фронтэнд. WordPress запускает jQuery в noConflict-режиме с версии 3.6, это не баг, а архитектурное решение. Переменная $ в глобальной области видимости остаётся свободной для сторонних библиотек. Именно поэтому $("#id") снаружи враппера всегда будет выдавать TypeError.

Можно ли просто вставить jQuery второй раз, вне WordPress?

Формально, да, вы можете подключить jQuery через CDN-ссылку второй раз, и она зарегистрирует $ глобально. Но это плохая практика: две версии jQuery на одной странице конфликтуют, размер страницы растёт, а плагины WordPress ожидают именно ту версию jQuery, которая зарегистрирована через wp_enqueue_script. Всегда работайте с той версией jQuery, которую поставляет WordPress, она протестирована на совместимость с ядром и админкой. Подключать jQuery повторно, значит создавать новые проблемы вместо решения исходной.

Что делать, если ошибка появляется только на отдельных страницах?

Проверьте, не подключает ли конкретная страница сторонний скрипт через плагин или виджет. Некоторые плагины кеширования и минификации агрессивно переупорядочивают скрипты, и jQuery может загрузиться позже вашего кода. Отключите плагины оптимизации по одному, чтобы найти виновника. В большинстве случаев проблема «$ is not a function на одной странице» вызвана порядком загрузки скриптов. Плагин минификации или кеширования ставит ваш скрипт перед jQuery, и $ ещё не существует на момент вызова. Решение: либо исключить скрипт из минификации, либо обернуть его в IIFE из способа 1, который не зависит от глобального $.

Есть ли готовый плагин, который исправляет эту ошибку?

Специального плагина «для исправления $ is not a function» нет, и он не нужен. Проблема решается одной строкой-обёрткой, а установка отдельного плагина ради этого избыточна. Однако есть плагины вроде Code Snippets, которые позволяют добавлять JavaScript и PHP-код без правки файлов темы, это безопаснее для новичков. Code Snippets хранит ваш код в базе данных, а не в functions.php. Если вы допустите синтаксическую ошибку, плагин автоматически откатит изменения, и сайт не упадёт. Рекомендуем новичкам добавлять любой JS-код именно через него, а не через правку файлов темы.

Ошибка «$ is not a function» исправлена, что дальше?

Главный вывод: проблема не в вашем коде и не в WordPress. Это штатное поведение CMS, и оно исправляется одной обёрткой. В подавляющем большинстве случаев достаточно способа 1 (IIFE) или способа 2 (.ready() с $). Они не ломают другие скрипты и работают в любой версии WordPress, от 4.0 до самой свежей.

Если вы часто работаете с jQuery в WordPress, заведите привычку начинать каждый скрипт с (function($) { и заканчивать })(jQuery);, это войдёт в мышечную память за неделю и навсегда избавит от ошибки.

Делитесь статьёй с коллегами, которые ещё правят functions.php наугад, один готовый враппер сэкономит им час дебага.

Редакция
РедакцияРедакционная команда→ Все публикации

Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.