Wie man defekte CSS im WordPress Admin Dashboard repariert

Der Umgang mit fehlerhaftem CSS im WordPress-Verwaltungsbereich kann echte Kopfschmerzen bereiten. Das liegt daran, dass Sie statt des Admin-Dashboards eine unordentliche, ungestylte Seite sehen.

Ein defektes CSS im Admin-Bereich hindert Sie auch daran, an Ihrer Website zu arbeiten, was es zu einem ernsten Problem macht. Und da es viele mögliche Ursachen gibt, sind sich viele Anfänger nicht sicher, wie sie dieses Problem beheben können.

Wir sind bei unseren eigenen Websites schon einmal auf dieses Problem gestoßen und haben daher alle Schritte zur Fehlersuche durchlaufen, um die einfachsten Lösungen zu finden. Und in diesem Tutorial helfen wir Ihnen, fehlerhafte CSS im WordPress-Admin-Dashboard zu beheben.

Hier finden Sie eine kurze Übersicht über die Themen und Schritte zur Fehlerbehebung, die wir in diesem Artikel behandeln:

Was verursacht kaputtes CSS im WordPress Admin-Bereich?

Es gibt verschiedene Gründe, warum CSS im WordPress-Verwaltungsbereich nicht funktioniert. Wie bei vielen häufigen WordPress-Fehlern kann es jedoch für Anfänger frustrierend sein, herauszufinden, was sie beheben müssen.

Unserer Erfahrung nach sind die Hauptursachen für fehlerhaftes CSS im WordPress-Adminbereich die folgenden:

• Plugin-Konflikte: Schlecht kodierte Plugins mit eigenem CSS können mit den Standardstilen von WordPress in Konflikt geraten, indem sie die Stile des Verwaltungsbereichs überschreiben oder beeinträchtigen.
• HTTP/HTTPS-Fehlanpassung: Probleme mit gemischten Inhalten, bei denen einige Dateien über HTTP statt über HTTPS geladen werden, können dazu führen, dass Browser CSS-Dateien blockieren.
• Theme-Störungen: Einige Themes laden CSS in den Verwaltungsbereich, was zu Konflikten führen kann. Wenn Sie ein benutzerdefiniertes Admin-Theme verwenden, kann dies ebenfalls zu Styling-Problemen führen.
• Cache-Probleme: Der Browser-Cache kann veraltete Versionen von CSS-Dateien enthalten. Caching-Plugins können alte CSS-Dateien bereitstellen, was zu Styling-Problemen führt.
• CDN-Probleme: Falsch konfigurierte Content Delivery Networks (CDNs) können veraltete Versionen von CSS-Dateien bereitstellen, was zu fehlenden oder fehlerhaften Stilen führt.
• Falsche Dateiberechtigungen: CSS-Dateien mit falschen Berechtigungen können vom Server möglicherweise nicht gelesen werden.
• Beschädigte Dateien: CSS-Dateien können bei Aktualisierungen oder Uploads beschädigt werden oder fehlen.
• Browser-Erweiterungen: Erweiterungen, insbesondere Inhaltsblocker, können die Anzeige von CSS beeinträchtigen.

Wenn Sie diese Ursachen verstehen, können Sie herausfinden, warum Ihr WordPress-Administrationsbereich ein fehlerhaftes CSS aufweist, so dass Sie es tatsächlich beheben können.

Schritt 1: Prüfen auf Plugin-Konflikte

Unserer Erfahrung nach sind schlecht codierte WordPress-Plugins oft die Ursache für fehlerhafte CSS im Admin-Bereich. Manchmal können jedoch auch gut codierte Plugins Probleme mit der Einrichtung Ihrer WordPress-Site oder Ihres Servers verursachen.

Hier erfahren Sie, wie Sie Plugin-Konflikte erkennen und beheben können.

Alle Plugins deaktivieren

Gehen Sie zunächst in Ihr WordPress-Administrations-Dashboard und navigieren Sie zur Seite Plugins “ Installierte Plugins.

Wählen Sie nun alle Plugins aus und wählen Sie im Dropdown-Menü „Massenaktionen“ die Option „Deaktivieren“, und klicken Sie dann auf „Übernehmen“.

Aktualisieren Sie danach einfach Ihren Verwaltungsbereich oder laden Sie die Seite neu, um zu sehen, ob das CSS-Problem behoben ist. Wenn das CSS-Problem behoben ist, liegt das Problem bei einem der Plugins.

Plugins einzeln reaktivieren

Um festzustellen, welches Plugin das Problem verursacht, müssen Sie jedes Plugin einzeln reaktivieren. Klicken Sie dazu einfach auf den Link „Aktivieren“ unter dem jeweiligen Plugin.

Nach der Aktivierung jedes Plugins müssen Sie den Admin-Bereich aktualisieren, um zu prüfen, ob das CSS wieder bricht.

So können Sie das spezifische Plugin, das das Problem verursacht, identifizieren.

Eine Alternative finden oder das Plugin aktualisieren

Sobald Sie das problematische Plugin identifiziert haben, können Sie prüfen, ob ein Update dafür verfügbar ist. Wenn die Aktualisierung das Problem nicht behebt, sollten Sie ein alternatives Plugin suchen oder den Plugin-Entwickler um Unterstützung bitten.

Eine ausführliche Anleitung finden Sie in unserem Tutorial zur Deaktivierung von Plugins. Diese Anleitung zeigt auch, wie Sie Plugins per FTP deaktivieren, falls Ihr WordPress-Adminbereich nicht zugänglich ist.

Schritt 2: Laden unsicherer Dateien über HTTPS

Eine weitere häufige Ursache für fehlerhaftes CSS, auf die unsere Benutzer gestoßen sind, ist die unsachgemäße Konfiguration sicherer URLs, die zu Problemen mit gemischten Inhalten führt.

Dies geschieht, wenn Ihre Website auf die Verwendung des sicheren HTTPS-Protokolls eingestellt ist, CSS aber über HTTP oder das unsichere Protokoll bereitgestellt wird.

Wenn dies geschieht, blockieren gängige Browser wie Google Chrome automatisch unsichere Ressourcen, was zu fehlerhaftem CSS in Ihrem WordPress-Adminbereich führt.

Dieses Problem kann mit dem Inspektionstool in Ihrem Browser bestätigt werden. Wechseln Sie einfach zur Registerkarte „Konsole“, und Sie werden den Fehler „Gemischter Inhalt“ sehen.

Um dieses Problem zu beheben, müssen Sie zunächst sicherstellen, dass Ihre WordPress-Einstellungen die richtigen URLs enthalten.

Gehen Sie auf die Seite Einstellungen “ Allgemein und stellen Sie sicher, dass sowohl die WordPress-Adresse als auch die Site-Adresse HTTPS in den URLs enthalten.

Wenn Sie bereits HTTPS in beiden URLs haben, dann können Sie WordPress manuell zwingen, das HTTPS-Protokoll zu verwenden.

Bearbeiten Sie einfach Ihre Datei wp-config.php und fügen Sie den folgenden Code hinzu:

define('FORCE_SSL_ADMIN', true);
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = 'on';
}

Alternativ können Sie auch Plugins wie Really Simple SSL verwenden, um HTTPS für alle URLs zu erzwingen.

Weitere Einzelheiten finden Sie in unserer Anleitung zur Behebung des Fehlers „Gemischter Inhalt“ in WordPress.

Schritt 3: Prüfen auf thematische Interferenzen

Wir haben festgestellt, dass unnötige Theme-Eingriffe auch eine häufige Ursache für fehlerhafte CSS im WordPress-Adminbereich sind.

Hier erfahren Sie, wie Sie themenbezogene Probleme erkennen und beheben können.

Zu einem Standardthema wechseln

Um festzustellen, ob Ihr WordPress-Theme die Ursache für das fehlerhafte CSS ist, müssen Sie zunächst zu einem Standard-WordPress-Theme wechseln.

Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zur Seite Darstellung “ Themes.

Hier müssen Sie ein Standard-WordPress-Theme aktivieren, z. B. Twenty Twenty-Four.

Hinweis: Wenn Sie kein Standard-Theme installiert haben, können Sie eines installieren, indem Sie oben auf die Schaltfläche „Neues Theme hinzufügen“ klicken. Die Standard-WordPress-Themes sind nach Jahren benannt.

Aktualisieren Sie Ihren Verwaltungsbereich nach dem Wechsel zu einem Standardthema, um zu sehen, ob das CSS-Problem behoben ist.

Wenn das CSS jetzt korrekt geladen wird, liegt das Problem bei Ihrem vorherigen Thema.

Themenkonflikt beheben

Um dies zu beheben, müssen Sie zunächst prüfen, ob ein Update für Ihr Theme verfügbar ist.

Gehen Sie zu Erscheinungsbild “ Themen, wählen Sie Ihr Thema aus und klicken Sie auf „Jetzt aktualisieren“.

Wenn dies das Problem nicht löst, müssen Sie alle Änderungen, die Sie an Ihrem Thema vorgenommen haben, überprüfen. Überprüfen Sie alle Theme-Anpassungen, die das Problem mit dem fehlerhaften CSS verursachen könnten.

Insbesondere sollten Sie alle zusätzlichen CSS- oder benutzerdefinierten Codes in der Datei functions.php auf Fehler überprüfen.

Als letzten Ausweg können Sie den Entwickler des Themes um Unterstützung bitten oder einen Wechsel zu einem anderen Theme in Erwägung ziehen.

Wir empfehlen die Verwendung von WPCode, um diese Art von Fehlern in Zukunft zu vermeiden. Es ist das beste WordPress-Plugin für Codeschnipsel, mit dem Sie alle Ihre benutzerdefinierten CSS an einem Ort verwalten können, ohne die Datei functions.php bearbeiten zu müssen.

Hier sind einige der Vorteile von WPCode:

• Sie können Ihren benutzerdefinierten CSS-Code einfacher speichern und verwalten.
• WPCode enthält integrierte Prüfungen zur Fehlersuche.
• Sie verlieren Ihre benutzerdefinierten CSS nicht, wenn Sie das Theme wechseln.

Es gibt auch eine kostenlose Version von WPCode mit eingeschränkten Funktionen.

Wir verwenden WPCode auf unseren Websites, um benutzerdefinierte Codeschnipsel, einschließlich benutzerdefinierter CSS, zu verwalten. Weitere Einzelheiten finden Sie in unserer WPCode-Bewertung.

Schritt 4: Caching-Probleme beheben

Normalerweise zwischenspeichern WordPress-Caching-Plugins den WordPress-Adminbereich nicht.

Wir haben jedoch festgestellt, dass falsche Caching-Einstellungen zu Konflikten mit dem Browser-Cache führen, was wiederum Probleme mit CSS verursachen kann.

Um dies zu beheben, müssen Sie zunächst den Cache Ihres Browsers leeren.

Danach können Sie den WordPress-Verwaltungsbereich neu laden, um zu sehen, ob das Problem behoben ist. Ist dies nicht der Fall, müssen Sie den WordPress-Cache löschen.

Dies ist der von Ihrem WordPress-Caching-Plugin erzeugte Cache. Wir haben eine detaillierte Anleitung, wie man den Cache in verschiedenen WordPress-Caching-Plugins löscht.

Schritt 5: CDN-Probleme beheben

Wenn Sie einen CDN-Dienst (Content Delivery Network) verwenden, kann eine Fehlkonfiguration manchmal zu fehlerhaften CSS-Problemen im WordPress-Administrationsbereich führen.

Hier erfahren Sie, wie Sie diese Probleme erkennen und beheben können.

Zunächst müssen Sie das Inspektionstool in Ihrem Browser verwenden und auf die Registerkarte „Konsole“ wechseln. Hier werden Ihnen Fehler angezeigt, wenn Ihre CSS-Dateien blockiert oder nicht gefunden werden.

Als Nächstes müssen Sie zur Website Ihres CDN-Dienstes wechseln und sich bei Ihrem Konto-Dashboard anmelden.

Navigieren Sie von hier aus zum Abschnitt Caching “ Konfiguration und klicken Sie auf die Schaltfläche „Alles löschen“ unter der Option „Cache löschen“.

Hinweis: Wir zeigen Ihnen den Screenshot von Cloudflare CDN. Sie können jedoch die Option zum Löschen des Cache bei allen CDN-Anbietern finden.

Danach müssen Sie zu Ihrer Website zurückkehren und den Verwaltungsbereich neu laden, um zu sehen, ob das Problem jetzt behoben ist.

Wenn das Problem nicht behoben ist, fahren Sie mit dem nächsten Schritt fort.

Schritt 6: Falsche Dateiberechtigungen korrigieren

Wir haben auch festgestellt, dass falsche Dateiberechtigungen einen Server daran hindern, CSS-Dateien zu lesen, was zu fehlerhaften CSS im WordPress-Adminbereich führt.

Hier erfahren Sie, wie Sie die Dateiberechtigungen prüfen und korrigieren können.

Als Erstes müssen Sie sich per FTP mit Ihrer WordPress-Website verbinden.

Sobald Sie verbunden sind, müssen Sie zu Ihrem WordPress-Stammverzeichnis navigieren. Dies ist das Verzeichnis, das die Ordner wp-admin, wp-includes und wp-content enthält.

Klicken Sie nun mit der rechten Maustaste auf den Ordner wp-admin und wählen Sie „Dateiberechtigungen“ oder „Eigenschaften“.

Zunächst müssen Sie sicherstellen, dass alle Verzeichnisse auf 755 gesetzt sind.

Wenn dies nicht der Fall ist, ändern Sie die Berechtigungen und wenden Sie sie rekursiv auf alle Unterverzeichnisse an.

Sie können nun den Vorgang wiederholen, die Berechtigungen auf 644 setzen und sie rekursiv auf alle Dateien anwenden.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Festlegen von Dateiberechtigungen in WordPress.

Besuchen Sie danach den Verwaltungsbereich, um zu sehen, ob das Problem mit dem defekten CSS behoben wurde. Wenn es immer noch vorhanden ist, müssen Sie zum nächsten Schritt übergehen.

Schritt 7: Beschädigte Dateien reparieren

Beschädigte Dateien können zu fehlerhaften CSS im WordPress-Verwaltungsbereich führen.

Ihre WordPress-Dateien können auch ohne Ihr Zutun beschädigt werden. Dies kann durch ein unvollständiges WordPress-Update, versehentliches Löschen von Dateien oder eine Fehlkonfiguration durch Ihren WordPress-Hosting-Anbieter geschehen.

Hier erfahren Sie, wie Sie beschädigte Dateien reparieren oder ersetzen können.

Zunächst müssen Sie eine neue Kopie von WordPress von WordPress.org herunterladen.

Entpacken Sie dann die heruntergeladene ZIP-Datei auf Ihrem Computer.

Als Nächstes müssen Sie eine FTP-Verbindung zu Ihrem WordPress herstellen und die neuen WordPress-Dateien von Ihrem Computer hochladen.

Wählen Sie „Überschreiben“, wenn Sie dazu aufgefordert werden, um sicherzustellen, dass neue Dateien auf Ihre Website hochgeladen werden.

Danach können Sie in Ihrem WordPress-Administrationsbereich überprüfen, ob das Problem mit dem fehlerhaften CSS gelöst wurde.

Wenn dies das Problem nicht löst, ist es an der Zeit, zum nächsten Schritt überzugehen.

Schritt 8: Browser-Erweiterungen prüfen

Browsererweiterungen, insbesondere solche, die Inhalte und Werbung blockieren, können die Anzeige von CSS im WordPress-Administrationsbereich beeinträchtigen.

Hier erfahren Sie, wie Sie Probleme, die durch Browser-Erweiterungen verursacht werden, erkennen und beheben können.

Zunächst müssen Sie Ihren Browser öffnen und zum Menü Erweiterungen/Add-ons navigieren.

Deaktivieren Sie vorübergehend alle Erweiterungen, insbesondere Werbeblocker und Sicherheits-Add-ons.

Sie können Erweiterungen einfach deaktivieren oder ganz entfernen.

Sobald das erledigt ist, können Sie im WordPress-Verwaltungsbereich nachsehen, ob das CSS-Problem behoben ist.

Wenn das Problem behoben ist, müssen Sie herausfinden, welche Erweiterung das Problem verursacht hat.

Reaktivieren Sie jede Erweiterung einzeln und aktualisieren Sie den Verwaltungsbereich nach der Aktivierung jeder Erweiterung, um diejenige zu identifizieren, die das Problem verursacht.

Sobald Sie die problematischen Erweiterungen identifiziert haben, können Sie die Erweiterungseinstellungen überprüfen, um die Blockierung von WordPress-Admin-CSS zu vermeiden.

Wenn das nicht funktioniert, versuchen Sie, eine alternative Erweiterung zu finden.

Tipps zur Fehlerbehebung

Wir hoffen, dass die oben genannten Schritte die CSS-Probleme im WordPress-Administrationsbereich beheben werden. Wenn jedoch keiner der obigen Schritte funktioniert, können Sie diese zusätzlichen Tipps ausprobieren:

Permalinks aktualisieren:

Aktualisieren Sie Ihre WordPress-Permalinks, um die .htaccess-Datei zu aktualisieren, ohne Fehler zu riskieren. Gelegentlich können die Rewrite-Regeln von WordPress verhindern, dass CSS-Dateien korrekt geladen werden. Diese Aktion hilft, die URL-Rewrite-Regeln zu löschen und zurückzusetzen.

Nach Malware scannen:

Manchmal kann auch ein Hacking-Versuch oder Malware dazu führen, dass Ihr Admin-Bereich nicht mehr funktioniert. Scannen Sie Ihre WordPress-Website auf mögliche Malware und versuchen Sie, Ihre gehackte Website zu bereinigen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, das Problem mit dem fehlerhaften CSS im WordPress-Administrationsbereich zu beheben. Vielleicht möchten Sie auch unseren WordPress-Leitfaden zur Fehlerbehebung lesen, um weitere Möglichkeiten zur Behebung von WordPress-Problemen zu finden, oder unseren Leitfaden, wie Sie richtig nach WordPress-Support fragen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.