So beheben Sie JavaScript-Fehler in WordPress

Als Inhaber einer WordPress-Website werden Sie gelegentlich auf Fehler stoßen, die dazu führen können, dass Ihre Website nicht richtig funktioniert. Diese JavaScript-Probleme können schwierig zu beheben sein, insbesondere für Online-Anfänger.

JavaScript ist ein wichtiger Bestandteil von WordPress-Themes und -Plugins. Das bedeutet, dass JavaScript-bezogene Probleme Kernfunktionen schnell beeinträchtigen, Ihre Website verlangsamen oder die Benutzererfahrung beeinträchtigen können.

In dieser Anleitung erfahren Sie, wie Sie JavaScript-Fehler in WordPress finden und beheben, vom Erkennen in der Browser-Konsole über die Isolierung von Plugin- und Theme-Konflikten bis hin zum Ausführen von WordPress im sicheren Debugging-Modus.

So beheben Sie JavaScript-Fehler in WordPress

Die Ursache eines JavaScript-Fehlers finden Sie normalerweise innerhalb weniger Minuten, sobald Sie wissen, wo Sie suchen müssen. Im Folgenden sind die fünf Orte aufgeführt, die ich zuerst überprüfe, sowie einige Gewohnheiten, die helfen, diese Fehler zukünftig zu vermeiden.

JavaScript-Probleme identifizieren und beheben

JavaScript-Fehler können aus verschiedenen Gründen auftreten. Ich zeige Ihnen die besten Stellen, um herauszufinden, was das Problem auf Ihrer Website verursacht.

1. Browser-Entwicklertools verwenden

Die Browserkonsole ist Ihr bester Freund, wenn es darum geht, JavaScript-Fehler zu identifizieren. Hier erfahren Sie, wie Sie darauf zugreifen können:

Öffnen Sie zuerst die Seite, auf der der JavaScript-Fehler auftritt. Klicken Sie dann mit der rechten Maustaste irgendwo auf die Seite und wählen Sie Untersuchen, um das Entwicklermenü Ihres Browsers zu öffnen.

Wenn Sie stattdessen eine Tastenkombination verwenden möchten, drücken Sie Cmd+Option+J auf dem Mac (oder Strg+Umschalt+J unter Windows) für Chrome. In Firefox ist das Äquivalent Cmd+Option+K oder Strg+Umschalt+K.

Navigieren Sie hier zum Tab Konsole, um JavaScript-bezogene Warnungen anzuzeigen. Wenn keine Fehler angezeigt werden, müssen Sie die Seite möglicherweise neu laden.

JavaScript-Probleme werden in der Konsole normalerweise in rotem Text angezeigt. Achten Sie bei der Fehlerbehebung auf Meldungen, die Hinweise darauf geben, welches Skript, welche Datei oder welche Funktion das Problem verursacht.

Sobald Sie JavaScript-Fehler in der Konsole identifiziert haben, können Sie sie zu ihrer Quelle zurückverfolgen. Hier sind einige der häufigsten Fehler, die Sie wahrscheinlich in der Konsole Ihres Browsers sehen werden.

• Uncaught ReferenceError: jQuery is not defined: Ein Skript hat versucht, jQuery zu verwenden, bevor es geladen wurde, oder es wurde überhaupt nicht geladen. Block-Themes, die auf dem Site Editor basieren, laden jQuery nicht, es sei denn, ein Plugin fordert es an.
• Uncaught TypeError: $ is not a function: jQuery wurde im noConflict-Modus geladen und ein Skript hat trotzdem die $-Kurzform verwendet. Das Einpacken des Snippets in einen jQuery(function($) { })-Block behebt dies normalerweise.
• Uncaught SyntaxError: Ein Tippfehler oder ein überflüssiges Zeichen im benutzerdefinierten Code. Die Konsole gibt die Datei und die Zeilennummer an, was normalerweise ausreicht, um sie zu finden.
• Uncaught TypeError: Cannot read properties of undefined: Das Skript wurde ausgeführt, bevor das Element, auf das es abzielt, auf der Seite vorhanden war. Dies ist häufig der Fall, wenn ein Snippet im Header statt im Footer geladen wird.
• Ein 404- oder net::ERR_ABORTED-Fehler bei einer .js-Datei: Die Datei wurde überhaupt nicht geladen. Überprüfen Sie Ihr CDN, Ihr Caching-Plugin oder eine Datei, die bei einem Update umbenannt wurde.

In den meisten Fällen zeigt das Problem die Datei/den Speicherort an, von dem der Fehler ausgeht. Von dort aus können Sie feststellen, ob es sich um ein Plugin- oder Theme-Problem handelt.

2. Plugin- oder Theme-Konflikte identifizieren

Die meisten JavaScript-Fehler in WordPress werden oft durch Plugin- oder Theme-Konflikte verursacht. Wenn mehrere Plugins oder Themes inkompatible JavaScript-Bibliotheken oder doppelte Funktionen verwenden, können sie Probleme verursachen.

Hier erfahren Sie, wie Sie Konflikte beheben:

Konflikte mit Themes

Ich empfehle, vorübergehend zu einem Standard-WordPress-Theme zu wechseln. Mindestens eines dieser Themes ist normalerweise auf Ihrer WordPress-Site vorinstalliert. Sie sind immer nach dem Jahr benannt (z. B. Twenty Twenty-Six).

Um eines der Standard-Themes von WordPress zu aktivieren, gehen Sie in Ihrem WordPress-Dashboard zu Design » Themes. Fahren Sie dann mit der Maus über ein Standard-Theme und klicken Sie auf Aktivieren.

Wenn die Probleme nach dem Wechsel Ihres Themes verschwinden, liegt das Problem wahrscheinlich bei Ihrem WordPress-Theme.

Die sofortige Lösung ist, nach Updates zu suchen. Wenn eine neue Version verfügbar ist, klicken Sie auf den Link Jetzt aktualisieren, um Ihr Theme zu aktualisieren.

Oft behebt ein Update des Themes kritische JavaScript-Probleme. Wenn das Problem weiterhin besteht, empfehle ich, den Theme-Entwickler zu kontaktieren und vorübergehend zu einem neuen Theme zu wechseln.

WPForms dokumentiert auch die häufigsten Theme-Konflikte, die am häufigsten auftreten.

Konflikte mit Plugins

Wenn das Wechseln zu einem Standard-Theme den Fehler nicht behebt, besteht der nächste Schritt darin, auf Plugin-Konflikte zu prüfen.

Dazu müssen Sie alle Plugins auf Ihrer Website deaktivieren und prüfen, ob der JavaScript-Fehler weiterhin besteht. Eine ausführlichere Anleitung finden Sie in unserem Leitfaden zum Testen auf Theme- oder Plugin-Konflikte.

Gehen Sie dazu zu Plugins » Installierte Plugins und klicken Sie auf das Kontrollkästchen, um alle Plugins auszuwählen.

Klicken Sie anschließend auf das Dropdown-Menü Massenaktionen und wählen Sie Deaktivieren.

Klicken Sie als Nächstes auf Anwenden, um alle Plugins auf Ihrer WordPress-Website zu deaktivieren.

Wenn der Fehler verschwunden ist, ist wahrscheinlich eines Ihrer WordPress-Plugins die Ursache des Problems. Um das fehlerhafte Plugin zu finden, aktivieren Sie die Plugins einzeln wieder. Klicken Sie dazu unter dem Plugin-Namen auf Aktivieren.

Erstellen Sie jetzt Ihr WordPress-Formular

Sobald Sie ein Plugin aktiviert haben, prüfen Sie, ob der Fehler erneut auftritt. Das Plugin, das Sie aktiviert haben, bevor der Fehler erneut auftrat, ist wahrscheinlich der Schuldige.

Nachdem Sie das fehlerhafte Plugin identifiziert haben, empfehle ich, nach verfügbaren Updates zu suchen. Wenn eines vorhanden ist, stellen Sie sicher, dass Sie das Plugin aktualisieren.

Der Entwickler des Plugins hat möglicherweise ein Update veröffentlicht, das das Problem behebt. Wenn jedoch keine Updates verfügbar sind, sollten Sie das fehlerhafte Plugin löschen und zu einem alternativen Plugin wechseln.

3. Debugging-Tools in WordPress verwenden

WordPress verfügt über integrierte Debugging-Tools, die Ihnen helfen können, JavaScript-Probleme aufzudecken. Wenn Sie den Debug-Modus auf Ihrer Website aktivieren, zeigt WordPress alle Fehler an, auf die es auf dem Frontend Ihrer Website stößt.

Um den Debug-Modus zu aktivieren, müssen Sie auf Ihre WordPress-Dateien auf Ihrem Server zugreifen, entweder über FTP, cPanel oder ein FTP-Dateimanager-Plugin.

Sobald Ihre Website-Dateien geöffnet sind, müssen Sie wp-config.php zur Bearbeitung öffnen. Diese befindet sich im Stammverzeichnis Ihrer Website. Setzen Sie in Ihrer wp-config.php-Datei WP_DEBUG auf true. Dadurch wird der Debug-Modus von WordPress aktiviert und Fehler protokolliert.

define( 'WP_DEBUG', true );

WPForms bietet eine ausführlichere Anleitung, wie Sie das Debugging in WordPress aktivieren können, wenn Sie mehr Details zu den verfügbaren Konstanten wünschen.

WordPress enthält auch zusätzliche Konstanten, mit denen Sie andere Bereiche der Kernsoftware beheben können. Wenn Sie beispielsweise die nicht minimierten Versionen der WordPress-Kernskripte sehen möchten, fügen Sie den folgenden Ausschnitt zum wp-config.php-Code-Editor hinzu:

define('SCRIPT_DEBUG', true);

Wenn SCRIPT_DEBUG aktiviert ist, lädt WordPress Dateien wie wp-includes/js/script.js anstelle von wp-includes/js/script.min.js. Dies kann bei der Entwicklung oder beim Debuggen einer Website sehr nützlich sein, da es vollen Zugriff auf den Code für eine einfachere Überprüfung und Änderung bietet.

Wenn Sie Fehlerprotokolle in einer Datei speichern möchten, anstatt sie im Frontend Ihrer Website anzuzeigen, müssen Sie die Konstante WP_DEBUG_LOG aktivieren. Fügen Sie dazu die folgende Codezeile zu Ihrer wp-config.php-Datei hinzu.

define('WP_DEBUG_LOG', true);

Wenn WP_DEBUG_LOG aktiviert ist, protokolliert es Fehler in einer Datei unter wp-content/debug.log. Dieses Protokoll enthält oft wertvolle Informationen darüber, welche Skripte fehlerhaft sind.

4. Fehlerbehebungsmodus aktivieren

Wenn das Deaktivieren von Plugins oder das Wechseln von Themes Ihre Website stört, sollten Sie den Fehlerbehebungsmodus mit Tools wie Health Check & Troubleshooting verwenden. Dazu müssen Sie das Plugin Health Check & Troubleshooting auf Ihrer Website installieren und aktivieren.

Das Plugin ermöglicht es Ihnen, den Fehlerbehebungsmodus zu aktivieren, ohne Besucher Ihrer Website zu beeinträchtigen. Dieser Ansatz ist besonders nützlich auf Live-Websites, bei denen Sie keine Ausfallzeiten riskieren können.

Nachdem Sie das Plugin aktiviert haben, gehen Sie in Ihrem WordPress-Adminbereich zu Tools » Website-Zustand. Navigieren Sie dann zur Registerkarte Fehlerbehebung.

Klicken Sie nun auf die Schaltfläche Fehlerbehebungsmodus aktivieren, um fortzufahren.

Dadurch werden alle Plugins auf Ihrer Website deaktiviert und Ihre Website auf ein Standard-Theme gesetzt. Sie werden zum Bildschirm des Fehlerbehebungsmodus weitergeleitet.

Hier können Sie Ihr Theme und Ihre Plugins in einer kontrollierten Umgebung verwalten. Wenn es Probleme auf Ihrer Website gibt, sehen Sie diese im Abschnitt Hinweise.

Ihre Website wird nach der Aktivierung des Fehlerbehebungsmodus auf ein natives WordPress-Theme zurückgesetzt.

Ich schlage vor, Ihre Website zu überprüfen, um zu sehen, ob die Verwendung eines Standard-Themes den Fehler auf Ihrer Website behebt. Wenn ja, liegt das Problem wahrscheinlich an Ihrem WordPress-Theme.

Wenn Sie auf das Dropdown-Menü Verfügbare Plugins klicken, werden alle Plugins auf Ihrer Website angezeigt. Hier können Sie Plugins einzeln aktivieren, um Plugin-Konflikte zu überprüfen. Um ein Plugin zu aktivieren, klicken Sie neben dem Namen des Plugins auf Aktivieren.

Befolgen Sie die Schritte im Abschnitt Fehlerbehebung bei Plugin-Konflikten dieser Anleitung für weitere Details. Wenn Sie mit der Fehlerbehebung Ihrer Website fertig sind, klicken Sie auf die Schaltfläche Fehlerbehebungsmodus deaktivieren, um sie in ihren ursprünglichen Zustand zurückzusetzen.

5. Überprüfung von Performance-Plugin-Konflikten

Wenn der Fehler nur auf Ihrer Live-Website auftritt, nur für abgemeldete Besucher sichtbar ist oder verschwindet, sobald Sie das Caching deaktivieren, ist ein Performance-Plugin die wahrscheinlichste Ursache.

Einstellungen wie JavaScript verzögern, JavaScript verzögern, Minifizieren und Kombinieren ändern alle die Reihenfolge, in der Ihre Skripte ausgeführt werden. Diese Reihenfolge ist wichtig, da jQuery nicht sicher verzögert werden kann, wenn andere Skripte erwarten, dass es zuerst bereit ist.

Plugins wie WP Rocket, LiteSpeed Cache, Autoptimize und Perfmatters bieten all diese Optionen an und werden oft durch ein Ein-Klick-Optimierungs-Preset aktiviert, anstatt bewusst.

Block-Themes, die auf dem Site Editor basieren, laden jQuery überhaupt nicht, es sei denn, etwas fordert es explizit an. Ein Snippet, das auf einem älteren Theme gut funktionierte, kann nach dem Wechsel zu Twenty Twenty-Six fehlschlagen.

Ein CDN-Ausfall bewirkt etwas Ähnliches, indem Ihre Skripte mit heruntergezogen werden, wann immer ein Plugin jQuery von einem CDN und nicht von WordPress selbst lädt.

• Um dies zu testen, schalten Sie alle JavaScript-Optimierungen in Ihrem Performance-Plugin aus, leeren Sie jeden Cache und laden Sie die Seite neu.
• Wenn der Fehler verschwindet, aktivieren Sie eine Einstellung nach der anderen wieder, bis er wieder auftritt. Fügen Sie dann das fehlerhafte Skript zur Ausschlussliste dieser Einstellung hinzu.
• Für jQuery selbst ist der auszuschließende Pfad /wp-includes/js/jquery/jquery.min.js.

Wenn WP Rocket Ihr Caching-Plugin ist, hat WPForms ein Dokument zur Konfiguration seiner Optimierungseinstellungen. Das Dokument zu JavaScript wird nicht richtig geladen behandelt eine umfassendere Checkliste.

Bewährte Praktiken zur Vermeidung von JavaScript-Fehlern

Im Folgenden gebe ich Ihnen einige Tipps, wie Sie Ihre WordPress-Website schützen und JavaScript-bezogene Probleme vermeiden können.

• Halten Sie Ihre Website aktuell: Regelmäßige Updates von WordPress, Ihrem Theme und anderen Plugins können helfen, Konflikte und Fehler zu vermeiden. Oft wird das Problem, auf das Sie stoßen, wahrscheinlich durch ein kürzlich durchgeführtes Update des Plugins oder Themes behoben worden sein. Updates aufzuschieben ist einer der häufigsten WordPress-Fehler, auf die ich stoße.
• Verwenden Sie ein Child-Theme für Anpassungen: Manchmal überschreiben Updates Ihres Themes oder Ihrer Plugins benutzerdefinierte Code-Schnipsel, die Sie zu Ihrer Website hinzugefügt haben. Dies kann zu fehlerhaften JavaScript-Funktionalitäten führen. Die Verwendung eines Child-Themes stellt sicher, dass Ihre benutzerdefinierten Schnipsel unverändert bleiben.
• Überprüfen Sie benutzerdefinierte JavaScript-Schnipsel doppelt: Wenn Sie benutzerdefiniertes JavaScript in Ihrem WordPress-Theme oder Plugin hinzugefügt haben, überprüfen Sie, ob es korrekt formatiert ist. Stellen Sie außerdem sicher, dass es mit den Skripten Ihrer Website kompatibel ist. Ich empfehle, Inline-JavaScript in eine Funktion zu verpacken oder jQuery zu verwenden, um Konflikte zu vermeiden.
• Skripte richtig einreihen: Wenn Sie benutzerdefinierte Skripte hinzufügen, sollten Sie diese mit WordPress-Funktionen richtig einreihen, um Ladeprobleme zu vermeiden. Hier ist ein Beispiel:

function my_custom_scripts() { 
          wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true); 
} 
add_action('wp_enqueue_scripts', 'my_custom_scripts');

• Testen Sie in mehreren Browsern: Moderne Browser haben ihre JavaScript-Implementierungen weitgehend standardisiert. Es ist jedoch immer noch wichtig, Ihre Website in verschiedenen Browsern zu testen, einschließlich älterer Versionen von Internet Explorer. Dies kann helfen, browserspezifische Probleme frühzeitig im Webentwicklungsprozess zu identifizieren.
• Implementieren Sie eine ordnungsgemäße Fehlerbehandlung: Gute Fehlerbehandlungspraktiken in Ihrem benutzerdefinierten JS-Schnipsel können verhindern, dass viele Probleme zu größeren Störungen führen. Dazu gehört die Verwendung von Try-Catch-Blöcken und die Bereitstellung von Fallback-Optionen, wo immer möglich.

Erkunden Sie als Nächstes die besten Plugins für WordPress

In diesem Beitrag habe ich Ihnen gezeigt, wie Sie JavaScript-Fehler in WordPress identifizieren und beheben können. Beachten Sie als Faustregel, dass Sie Plugins und Themes auf dem neuesten Stand halten und bewährte Praktiken beim Hinzufügen von benutzerdefiniertem JavaScript befolgen sollten.

Stellen Sie außerdem sicher, dass Sie empfohlene Plugins auf Ihrer WordPress-Website verwenden und vermeiden Sie die Verwendung von Nulled-Versionen von Plugins wie dem WPForms Pro Nulled Plugin.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.