Skip to content

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

👉 Як виправити «$ is not a function» у WordPress: 4 способи
WordPressВеб-розробка
6 хв1,190 слів

👉 Як виправити «$ 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 навмання, одна готова обгортка зекономить їм годину дебагу.

Редакція
РедакціяРедакційна команда→ Усі публікації

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