Plötzlich war das WordPress Backend meiner Webseite zerschossen und das Layout hat vorne und hinten nicht mehr gepasst. Woran es liegt und was man dagegen tun kann erfährst Du in diesem Beitrag.

Immer wieder berichten WordPress Nutzer, dass der Admin Bereich der WordPress Installation plötzlich Designfehler verursacht und das komplette Layout nicht mehr passt. Das Frontend hingegen scheint von diesem Problem unberührt.

Auf der Suche nach einer Lösung, damit das zerschossene Layout wieder passt – stößt man auf zahlreiche Beiträge. In meinem Fall hat jedoch keines dieser Hilfethemen geholfen. Nach langer Suche konnte ich dann jedoch alles wieder reparieren und mein Backend konnte wieder problemlos aufgerufen werden.

Bevor ich jedoch meinen Lösungsansatz beschreibe, gehe ich auf die weiteren Lösungsansätze ein.

WordPress Backend zerschossen

In den meisten Fällen wird das WordPress Backend nach einem Update des Themes oder von Plugins zerschossen sein und nichts passt mehr. Doch hin und wieder passiert dies ohne Zutun obwohl keine Plugins oder Themes aktualisiert wurden.

Wenn das WordPress Backend optisch fehlerhaft angezeigt wird, liegt es an der CSS die nicht richtig geladen werden kann und sieht oft so aus:

WordPress Core Datei load-styles.php wird nicht geladen

Nutzt man beispielsweise die Console in Google Chrome bekommt man in diesem Fall folgende Fehler angezeigt:

Die Datei /wp-admin/load-styles.php kann aus unerklärlichen Gründen nicht geladen werden und verursacht ein zerschossenen WP-Backend. Schnelle Abhilfe ist ganz einfach möglich aber löst nicht automatisch das Problem bzw. Ursache.

WordPress Backend reparieren

Damit dein WordPress Admin-Bereich wieder richtig angezeigt wird, gibt es verschiedene Lösungsansätze die Du nacheinander durchgehen solltest. Zwar lässt sich das Darstellungsproblem über die wp-config.php entfernen, allerdings ist das Problem damit nicht behoben. Deswegen zeige ich euch erst weiter unten wie dies funktioniert.

Browser Cache löschen

Du solltest den Cache Deines Browsers mal komplett löschen und die Seite neu laden. Diesen Schritt nach jeder anderen Maßnahme bitte auch durchführen.

Alle Plugins deaktivieren

Zuerst solltest Du alle Plugins deaktivieren. Das geht am einfachsten über ein FTP Programm. Dort dann einfach den kompletten Ordner „Plugins“ (wp-content/plugins) umbenennen oder Unterstriche anfügen „Plugins___„. Dadurch werden alle Plugins deaktiviert.

Prüfe nun, ob dein Backend wieder fehlerfrei angezeigt wird. (Cache löschen nicht vergessen!)

Wenn ja, kannst Du die Plugins nach und nach wieder aktivieren und herausfinden, welches Plugin den Darstellungsfehler verursacht.

URL Pfade prüfen

Es kann durchaus vorkommen, dass der Pfad zur Domain geändert wurde, durch Umstellung auf https oder einen Domainumzug und nicht mehr richtig funktioniert. Prüfen in den WordPress Einstellungen den Domainpfad. Zusätzlich prüfen in der wp-config.php ob dort die folgenden Einträge – sofern vorhanden – richtig sind:

define( ‚WP_SITEURL‘, ‚https://some.domain‘ );

define( ‚WP_HOME‘, ‚https://some.domain‘ );

Achte darauf, ob Du http oder https dort stehen hast.

Cloudflare Nutzer

Die Layout Verschiebungen kommen bei einigen Nutzern in Verbindung mit Cloudflare zustande. Sofern Du Cloudflare verwendest, prüfen mal im Cloudflare Dashboard Deine Firewall-Einstellungen unter „Firewall Events Log“ warum die URL zu load-styles.php blockiert wird. Zusätzlich solltest Du den gesamten Cloudflare Cache mal löschen.

Bei der Nutzung eines Flexible SSL von Cloudflare arbeitet dieses als Reverse-Proxy welches sich über http mit WordPress verbindet. WordPress denkt, dass Sie eine Verbindung über http herstellen, und leitet eine Weiterleitung an die https-Ressource durch. Der Browser fordert die https-Ressource von CloudFlare an und CloudFlare fordert die Ressource erneut über http vom WordPress-Server an, was zu einer weiteren Umleitung führt.

In diesem Fall versuche folgendes:

Füge Deiner wp-config.php Datei folgende Zeile hinzu:

 if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS']='on';

Wichtig hierbei: Die Zeile sollte VOR der folgenden stehen:

require_once(ABSPATH . 'wp-settings.php');

Diese Anweisung gilt letztendlich für alle Reverse-Proxy-Server und nicht nur für Cloudflare. Dadurch wird die Umleitungsschleife beendet.

Layout-Fehler wiederherstellen

Du kannst die Darstellungsfehler Deines zerschossenen WordPress Backend auch auf die Schnelle wieder herstellen. Allerdings behebt diese Maßnahme nicht die Ursache des Problems! Füge Deiner wp-config.php folgenden Code hinzu:

define( 'CONCATENATE_SCRIPTS', false );

Wichtig hierbei: Die Zeile sollte VOR der folgenden stehen:

require_once(ABSPATH . 'wp-settings.php');

Und wieder einmal den Browser Cache löschen.

.htaccess Datei prüfen

In meinem Fall wurde das Backend durch einen Fehler in der .htaccess Datei zerschossen. Ich nutzte vor Wochen mal das Security Plugin „WP Cerber Security„. Nachdem ich dieses wieder deaktiviert hatte wurde ein Eintrag aus der htaccess-Datei offensichtlich nicht automatisch entfernt.

Prüfe also, ob sich in Deiner .htaccess-Datei Reste von einem nicht mehr vorhanden Plugin finden lassen und entferne diese. In meinem Fall sah der falsche Eintrag so aus:

 # BEGIN WP CERBER GROOVE
# Protection of admin scripts is enabled (CVE-2018-6389)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^(.*)wp-admin/+load-scripts\.php$ [OR,NC]
RewriteCond %{REQUEST_URI} ^(.*)wp-admin/+load-styles\.php$ [NC]
RewriteCond %{HTTP_COOKIE} !cerber_groove_x_fx1rGHbpXJLzy2P0YOjhEC4cB3ek=4wlWf7sLZb0uOt1jXCd3eFohD6
RewriteRule (.*) - [R=403,L]
</IfModule>
# END WP CERBER GROOVE

Designfehler behoben?

Ich hoffe die von mir aufgeführten Lösungsansätze haben Dir geholfen das Darstellungsproblem im WordPress Backend zu beheben und alles funktioniert wieder? Wenn Du weitere Lösungsansätze kennen solltest, freue ich mich über einen Kommentar von Dir.