👉 So beheben Sie '$ is not a function' in WordPress: 4 Wege
Sie bearbeiten functions.php, fügen ein paar Zeilen jQuery ein, und die Seite stürzt mit einem weißen Bildschirm ab. Die Konsole zeigt: Uncaught TypeError: $ is not a function. Kommt Ihnen das bekannt vor?
Jeder WordPress-Entwickler begegnet diesem Fehler mindestens einmal. Sie kopieren funktionierenden jQuery-Code von CodePen oder einem Snippet, fügen ihn auf Ihrer Seite ein, und WordPress versteht ihn nicht. Der Grund ist weder fehlerhafter Code noch ein Plugin-Konflikt. Der Grund liegt darin, wie WordPress mit jQuery umgeht.
Wir behandeln vier bewährte Methoden, um den Fehler „$ is not a function" zu beheben, vom sicheren IIFE-Wrapper bis zum vollständigen Deaktivieren von noConflict. Jede Methode enthält direkt einsetzbaren Code zum Kopieren und Einfügen.
💡 Kurzer Überblick:
- jQuery-Code in eine anonyme IIFE-Funktion verpacken, die sicherste und universellste Methode
- jQuery document ready mit Dollar-Parameter verwenden, für Skripte im Head-Bereich
- Eigenen Alias über noConflict vergeben, praktisch, wenn das Dollarzeichen von einer anderen Bibliothek belegt ist
- noConflict global deaktivieren, nur wenn keine anderen Bibliotheken auf der Seite vorhanden sind
Warum der Fehler „$ is not a function" in WordPress auftritt
WordPress lädt jQuery im noConflict-Modus. Das bedeutet, dass die Variable $, das kurze Alias von jQuery, nicht global verfügbar ist. Die WordPress-Core-Entwickler haben dies bewusst getan, um Konflikte zu vermeiden: Viele JavaScript-Bibliotheken (Prototype, MooTools, ältere Bootstrap-Versionen) verwenden $ ebenfalls als ihre Hauptabkürzung.
Wenn Sie in Ihrem Skript schreiben:
1 $("#element").hide();
Weiß WordPress nicht, dass $ jQuery ist. Es sieht einen Aufruf einer unbekannten Funktion und wirft TypeError: $ is not a function. Außerhalb von WordPress, auf einer „nackten" HTML-Seite, würde derselbe Code problemlos funktionieren, da jQuery $ dort global registriert.
Technisch versteht WordPress nur den vollständigen Namen: jQuery("#element").hide(). Aber in jeder Zeile eines mehrzeiligen Skripts jQuery statt $ zu schreiben, ist umständlich, der Code bläht sich auf und verliert an Lesbarkeit. Glücklicherweise gibt es vier Wege, diese Einschränkung zu umgehen.
Bevor Sie Theme-Dateien bearbeiten, erstellen Sie ein Backup Ihrer Seite. Ein fehlendes Semikolon in functions.php, und die Seite ist offline. Mit einem Backup können Sie Änderungen in einer Minute rückgängig machen.
Methode 1: IIFE-Wrapper, sicher und universell
Der zuverlässigste Weg, $ in WordPress-Skripten zurückzubekommen, ist ein Immediately Invoked Function Expression (IIFE). Sie übergeben jQuery als Argument, und innerhalb der Funktion sprechen Sie es über das vertraute $ an.
Code für footer.php oder eine Einbindung auf niedriger Ebene (Seiten-Footer):
1 (function($) { 2 // Your jQuery code here 3 $("#element").hide(); 4 })(jQuery);
Was hier passiert: Eine anonyme Funktion akzeptiert den Parameter $ und wird sofort mit dem Argument jQuery aufgerufen. Innerhalb dieser Funktion gilt $ === jQuery, während $ außerhalb undefiniert bleibt. Ein Konflikt mit anderen Bibliotheken ist ausgeschlossen.
Diese Methode funktioniert für Skripte im Footer. Wenn das Skript im <head> ausgeführt werden muss, verwenden Sie Methode 2.
Methode 2: jQuery(document).ready mit $-Parameter
Wenn ein Skript im Seitenkopf ausgeführt werden muss (bevor das DOM geladen ist), verpacken Sie es in jQuery(document).ready. Beachten Sie: Das $ wird an den Callback-Parameter übergeben, das ist kein Tippfehler, sondern ein entscheidender Punkt.
Code für header.php oder functions.php via wp_enqueue_script:
1 jQuery(document).ready(function($) { 2 // Your jQuery code here 3 console.log($); 4 });
Die .ready()-Methode wartet auf das vollständige Laden des DOM, und jQuery übergibt sich selbst als $ an den Callback. Innerhalb dieses Callbacks funktioniert $ wieder wie in einer normalen JavaScript-Umgebung. Und anders als bei Methode 1 startet das Skript aus dem <head>, was für kritische Initialisierungsvorgänge nützlich ist.
Die meisten Theme- und Plugin-Entwickler kennen diese WordPress-Eigenheit, daher sehen Sie in qualitativ hochwertigen Produkten fast immer jQuery anstelle von $ oder einen der oben genannten Wrapper.
Methode 3: Eigenen Alias über noConflict erstellen
jQuery erlaubt es Ihnen nicht nur, $ zurückzuholen, sondern auch jede andere kurze Alias-Variable zu vergeben, zum Beispiel die Variablen $j oder jq oder jede von Ihnen bevorzugte Variable. Das ist praktisch, wenn die Seite bereits eine andere Bibliothek verwendet, die $ belegt hat.
1 var jq = jQuery.noConflict(); 2 jq("div p").hide(); 3 4 // Another library continues using its own $ 5 $("content").style.display = "none";
Die Methode jQuery.noConflict() gibt $ für andere Bibliotheken frei und gibt jQuery an Ihre Variable zurück (im Beispiel jq). Danach erfolgen Aufrufe über jq(...), während $ für die benachbarte Bibliothek funktioniert, der Konflikt verschwindet vollständig.
Dieser Ansatz ist besonders nützlich auf Seiten, wo ein WordPress-Theme mit einem Drittanbieter-JavaScript-Framework koexistiert, das $ für eigene Zwecke nutzt.
Methode 4: noConflict vollständig deaktivieren (mit Vorsicht einsetzen)
Wenn Sie sicher wissen, dass die Seite keine anderen Bibliotheken enthält, die $ beanspruchen, können Sie den noConflict-Modus global deaktivieren:
1 $ = jQuery.noConflict(true);
Nach dieser Zeile funktioniert $ wieder als globales jQuery-Alias überall, in jedem Skript, an jeder Stelle der Seite. Diese Methode ist jedoch die riskanteste. Wenn Sie später ein Plugin installieren, das ebenfalls $ verwendet, bricht die Seite mit einem schwer reproduzierbaren Fehler.
Wir empfehlen die Methoden 1 und 2 als primäre Lösungen, sie sind sicher, isoliert und decken die große Mehrheit der realen Szenarien ab. Methode 4 ist für Situationen gedacht, in denen Sie ein großes Legacy-Skript pflegen und nicht jede Funktion einzeln verpacken können.
Im obigen Video sehen Sie eine visuelle Demonstration aller vier Methoden in Aktion. Sehen Sie es sich an, wenn Sie eine visuelle Erklärung dem Text vorziehen.
⁉️🤔 Häufig gestellte Fragen
Warum hat WordPress $ für jQuery überhaupt deaktiviert?
Die WordPress-Core-Entwickler haben
jQuery.noConflict()standardmäßig aktiviert, um Seiten vor Konflikten mit anderen JavaScript-Bibliotheken zu schützen. Prototype.js, MooTools und einige ältere Frameworks registrieren ebenfalls eine globale$-Variable. Würde WordPress$an jQuery vergeben, würde jedes Theme oder Plugin mit einer solchen Bibliothek das Admin-Panel oder das Frontend zerstören. WordPress führt jQuery seit Version 3.6 im noConflict-Modus aus, das ist kein Fehler, sondern eine architektonische Entscheidung. Die$-Variable im globalen Gültigkeitsbereich bleibt für Drittanbieter-Bibliotheken frei. Genau deshalb wird$("#id")außerhalb eines Wrappers immerTypeErrorwerfen.
Kann ich jQuery einfach ein zweites Mal einbinden, außerhalb von WordPress?
Technisch ja, Sie können jQuery über einen CDN-Link ein zweites Mal einbinden, und es wird
$global registrieren. Aber das ist schlechte Praxis: Zwei jQuery-Versionen auf einer Seite geraten in Konflikt, die Seitengröße wächst, und WordPress-Plugins erwarten genau die jQuery-Version, die überwp_enqueue_scriptregistriert wurde. Arbeiten Sie immer mit der jQuery-Version, die WordPress bereitstellt, sie ist auf Kompatibilität mit Core und Admin-Panel getestet. jQuery erneut einzubinden bedeutet, neue Probleme zu schaffen, anstatt das ursprüngliche zu lösen.
Was tun, wenn der Fehler nur auf bestimmten Seiten auftritt?
Prüfen Sie, ob die betreffende Seite ein Drittanbieter-Skript über ein Plugin oder Widget lädt. Einige Caching- und Minifizierungs-Plugins ordnen Skripte aggressiv um, und jQuery kann nach Ihrem Code laden. Deaktivieren Sie Optimierungs-Plugins nacheinander, um den Verursacher zu finden. In den meisten Fällen wird das Problem „$ is not a function auf einer Seite" durch die Reihenfolge des Skript-Ladens verursacht. Ein Minifizierungs- oder Caching-Plugin platziert Ihr Skript vor jQuery, und
$existiert zum Zeitpunkt des Aufrufs noch nicht. Lösung: Entweder das Skript von der Minifizierung ausschließen oder es in den IIFE aus Methode 1 verpacken, der nicht vom globalen$abhängt.
Gibt es ein fertiges Plugin, das diesen Fehler behebt?
Es gibt kein dediziertes Plugin „zur Behebung von $ is not a function", und es wird auch nicht benötigt. Das Problem wird mit einem einzeiligen Wrapper gelöst, und dafür ein separates Plugin zu installieren, ist übertrieben. Es gibt jedoch Plugins wie Code Snippets, mit denen Sie JavaScript- und PHP-Code hinzufügen können, ohne Theme-Dateien zu bearbeiten, was für Anfänger sicherer ist. Code Snippets speichert Ihren Code in der Datenbank, nicht in
functions.php. Wenn Sie einen Syntaxfehler machen, setzt das Plugin die Änderungen automatisch zurück, und die Seite stürzt nicht ab. Wir empfehlen Anfängern, jeglichen JS-Code darüber hinzuzufügen, nicht durch Bearbeiten von Theme-Dateien.
Der Fehler „$ is not a function" ist behoben, was nun?
Wichtigste Erkenntnis: Das Problem liegt weder an Ihrem Code noch an WordPress. Es handelt sich um ein Standardverhalten des CMS, und es wird mit einem Wrapper behoben. In den allermeisten Fällen genügt Methode 1 (IIFE) oder Methode 2 (.ready() mit $). Sie beeinträchtigen keine anderen Skripte und funktionieren in jeder WordPress-Version, von 4.0 bis zur neuesten.
Wenn Sie häufig mit jQuery in WordPress arbeiten, gewöhnen Sie sich an, jedes Skript mit (function($) { zu beginnen und mit })(jQuery); zu beenden, das wird in einer Woche zum Muskelgedächtnis und eliminiert den Fehler dauerhaft.
Teilen Sie den Artikel mit Kollegen, die functions.php noch nach dem Trial-and-Error-Prinzip bearbeiten, ein fertiger Wrapper spart ihnen eine Stunde Fehlersuche.
Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.