WordPress unterstützt sowohl JavaScript als auch die jQuery-Bibliothek vollständig. Die Art und Weise, wie WordPress jQuery implementiert, kann jedoch zu Fehlern führen, wenn du versuchst, Funktionen auszuführen. Eines der häufigsten Probleme ist der Fehler „Uncaught TypeError: $ is not a function“.

Die Behebung dieses Fehlers ist relativ einfach, wenn du verstehst, was ihn verursacht. Der Alias „$“ ist der Kern des Problems, und jQuery und WordPress bieten mehrere Möglichkeiten, ihn zu umgehen, damit du die benötigten Funktionen ausführen kannst.

In diesem Artikel erklären wir, was der Fehler „Uncaught TypeError: $ is not a function“ ist und was ihn verursacht. Außerdem zeigen wir dir, wie du das Problem beheben kannst. Los geht’s!

Was ist der Fehler „Uncaught TypeError: $ is not a function“ in WordPress?

Der Fehler „Uncaught TypeError: $ is not a function“ ist ein häufiger JavaScript-Fehler, der auftritt, wenn die jQuery-Bibliothek nicht richtig geladen ist oder es einen Konflikt mit anderen Skripten gibt, die das Symbol „$“ verwenden.

In WordPress hat dieser Fehler mehr damit zu tun, wie das Content Management System (CMS) jQuery implementiert und weniger mit Ladeproblemen.

jQuery ist eine beliebte JavaScript-Bibliothek. Sie wird häufig in WordPress-Themes und -Plugins verwendet, um verschiedene dynamische Elemente, Animationen und AJAX-Operationen zu steuern:

jQuery-Bibliothek Startseite
jQuery-Bibliothek

In jQuery ist das „$“-Symbol ein Alias für das jQuery-Objekt, das primäre Objekt, mit dem du bei der Arbeit mit der Bibliothek interagierst. Es macht den Code kürzer, lesbarer und einfacher zu schreiben.

Der „Uncaught TypeError: $ is not a function“ ist etwas schwierig zu beheben, weil du keine eindeutige Fehlermeldung erhältst. Im Gegensatz zu anderen WordPress-Fehlern kann dieses Problem durch falsch konfigurierte Elemente auf deiner Website oder sogar durch eine 404-Fehlerseite ausgelöst werden:

Screenshot eines 404 "Seite nicht gefunden"-Fehlers
404 „Seite nicht gefunden“-Fehler

Der effektivste Weg, das Problem zu diagnostizieren, ist ein Blick in die Entwicklerkonsole oder in die WordPress Debug-Logs.

Was sind die Hauptursachen für den Fehler „Uncaught TypeError: $ is not a function“?

Der Fehler „Uncaught TypeError: $ is not a function“ hat mit jQuery zu tun. Das Problem tritt auf, wenn eine Funktion, die das Symbol „$“ enthält, ausgeführt wird, während die Website geladen wird.

Hier sind einige mögliche Ursachen für diesen Fehler:

  1. Die jQuery-Bibliothek ist nicht richtig geladen. Wenn die jQuery-Bibliothek nicht ordnungsgemäß geladen oder in die Warteschlange aufgenommen wurde, wird das „$“-Symbol nicht als gültige Funktion erkannt und es wird ein Fehler ausgegeben. In WordPress ist das normalerweise kein Problem, weil das Content Management System (CMS) die Bibliothek von Haus aus lädt.
  2. Du verwendest jQuery im NoConflict-Modus. Standardmäßig führt WordPress jQuery im noConflict-Modus aus. Das bedeutet, dass es das „$“-Symbol nicht als Funktionsnamen erkennt. Um es zu verwenden, musst du einen Workaround einbauen.
  3. Plugin- oder Theme-Konflikte. Einige Plugins oder Themes können unsachgemäß kodiertes JavaScript enthalten, das die ordnungsgemäße Funktion von jQuery beeinträchtigt oder das „$“-Symbol auf eine Weise verwendet, die Probleme mit anderen Skripten verursacht.

Kurz gesagt: WordPress ist nicht so konfiguriert, dass es das „$“-Symbol erkennt. Das heißt aber nicht, dass du keinen jQuery-Code innerhalb des CMS ausführen kannst. Schließlich ist die Bibliothek ein Teil von WordPress. Du musst jedoch einen Workaround verwenden, um Probleme mit dem „$“-Symbol zu vermeiden.

Wie du den Fehler „Uncaught TypeError: $ is not a function“ behebst (2 Wege)

Bevor wir loslegen, ist es wichtig zu wissen, dass jQuery bereits ein Teil von WordPress ist. In einigen Tutorials wirst du angewiesen, jQuery einzureihen, aber die Bibliothek ist schon seit einiger Zeit Teil des Content Management Systems (CMS).

WordPress führt jQuery außerdem von Haus aus im „noConflict“-Modus aus. Das bedeutet, dass es das „$“-Symbol freigibt, damit andere Bibliotheken es verwenden können. Anstatt den „noConflict“-Modus zu deaktivieren, solltest du dieses Problem folgendermaßen angehen.

1. Verwende „jQuery“ anstelle von „$“

Wenn du bei der Verwendung des „$“-Symbols in Funktionen auf Probleme stößt, kannst du stattdessen „jQuery“ verwenden. Hier ist ein Beispiel dafür, wie eine einfache jQuery-Funktion mit „$“ aussehen kann:

$(function() {
  // Your code here will run once the DOM is ready
});

In diesem Fall wäre es eine schnelle Lösung, das „$“-Symbol durch jQuery zu ersetzen. Der Code würde dann wie folgt aussehen:

jQuery(function() {
  // This code will not trigger the error
});

Alternativ kannst du den Code auch in einen sofort aufgerufenen Funktionsausdruck „einwickeln“, der das jQuery-Symbol enthält. Das folgende Beispiel würde den Fehler „Uncaught TypeError: $ is not a function“ nicht auslösen, weil es das jQuery-Symbol als Wrapper verwendet:

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

Nachdem du diese Änderungen am Code vorgenommen hast, kannst du in der Entwicklerkonsole deines Browsers oder im WordPress-Debug-Log nachsehen, ob der Fehler weiterhin besteht. Wenn das der Fall ist, musst du „jQuery“ eventuell einem anderen Symbol zuordnen, um weitere Fehler zu vermeiden.

2. Verwende einen eigenen Alias in jQuery

„$“ ist der Standard-Alias für das jQuery-Objekt. Da WordPress jQuery jedoch im NoConflict-Modus ausführt, musst du eventuell einen anderen Alias zuordnen, um Konflikte mit anderen Bibliotheken zu vermeiden.

Dieser Vorgang ist relativ einfach, da du den Alias mit einer einzigen Codezeile einem neuen Symbol zuordnen kannst:

vvar $j = jQuery;

Dieser Code ersetzt den Standard-Alias durch „$j“, kann aber auch ein beliebiges anderes Symbol sein. Manche Entwickler bevorzugen diesen Ansatz gegenüber der Eingabe des vollständigen „jQuery“-Objekts, wie wir in der vorherigen Methode gezeigt haben.

Wenn du dir nicht sicher bist, wo du den Code einfügen sollst, kannst du unsere Anleitung zum Hinzufügen von Code in den Header und Footer von WordPress lesen. Auch wenn du einen neuen Alias registrierst, kannst du immer noch „jQuery“ anstelle dieses Symbols verwenden.

Zusammenfassung

WordPress ermöglicht es dir, jQuery auf deiner Website zu verwenden. Wenn du jedoch Fehler wie „Uncaught TypeError: $ is not a function“ vermeiden willst, musst du verstehen, wie das CMS die Bibliothek implementiert. WordPress verwendet den „noConflict“-Modus von jQuery, das heißt, es erkennt das „$“-Symbol nicht.

Der Fehler „Uncaught TypeError: $ is not a function“ erscheint, wenn du versuchst, eine Funktion zu verwenden, die jQuery mit „$“ aufruft. Um dieses Problem zu umgehen, kannst du stattdessen das vollständige jQuery-Objekt eingeben oder den Alias einem anderen Symbol zuordnen, um Konflikte zu vermeiden.

Wenn du Kinsta nutzt, kannst du den WordPress-Debug-Modus im MyKinsta-Dashboard aktivieren, um Probleme zu diagnostizieren. Außerdem bieten alle unsere Tarife einen erstklassigen Support, der dir bei der Behebung von Problemen hilft, die bei dir auftreten können. Schau dir unsere Angebote an!