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: Dieses Problem zeigt an, dass eine Variable oder Funktion fehlt oder undefiniert ist.
• Uncaught TypeError: Dieser Fehler deutet auf ein Problem mit einer Operation hin, z. B. der Versuch, eine nicht vorhandene Methode für ein Objekt zu verwenden.
• SyntaxError: Syntaxfehler treten häufig aufgrund eines Tippfehlers oder einer falschen Formatierung im Code auf.

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.

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. In Ihrer wp-config.php-Datei setzen Sie WP_DEBUG auf true. Dies aktiviert den Debug-Modus von WordPress und protokolliert Fehler.

define('WP_DEBUG', true);

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.

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. Oftmals wurde das Problem, auf das Sie stoßen, durch ein aktuelles Update des Plugins oder Themes behoben.
• 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.