So passen Sie die Hintergrundfarbe des WordPress Block Editors an

Es gab eine Zeit, in der das Ändern von Hintergrundfarben in WordPress bedeutete, in den Code einzutauchen und zu hoffen, dass nichts kaputt geht. Wir erinnern uns gut an diese Zeiten. WordPress hat sich seitdem stark weiterentwickelt, und der Block-Editor hat die Anpassung einfacher denn je gemacht.

Dennoch fällt es vielen Website-Besitzern schwer, ihre Hintergrundfarben genau richtig hinzubekommen.

Nach dem Betreiben mehrerer WordPress-Websites und der Unterstützung Tausender von Benutzern haben wir die einfachsten und zuverlässigsten Wege gelernt, um diese Änderungen vorzunehmen.

In diesem Leitfaden zeigen wir Ihnen genau, wie Sie Hintergrundfarben im WordPress-Block-Editor mit Methoden ändern, die für jedes Theme und jedes Fähigkeitsniveau funktionieren.

Warum die Hintergrundfarbe des Block-Editors in WordPress ändern?

Möglicherweise möchten Sie die Hintergrundfarbe des WordPress Block-Editors aus verschiedenen Gründen ändern.

Zum Beispiel verwenden die meisten modernen WordPress-Themes die gleiche Hintergrundfarbe für den Block-Editor wie für die Live-Website, einschließlich OceanWP, GeneratePress und mehr.

Wenn Ihr WordPress-Theme jedoch nicht dieselben Farben verwendet, sieht die Darstellung Ihres Beitrags im Editor ganz anders aus als das, was Ihre Benutzer auf der Live-Website sehen werden.

Ein weiterer Grund könnte einfach Ihr persönlicher Komfort sein.

Wenn Sie viele Stunden mit Schreiben verbringen, kann es anstrengend für die Augen sein, auf einen hellweißen Bildschirm zu starren. Das Ändern des Hintergrunds des Editors in eine sanftere Farbe kann Ihre Arbeitszeit angenehmer gestalten.

Nun, da das geklärt ist, sehen wir uns an, wie Sie die Hintergrundfarbe des WordPress-Editors ganz einfach ändern können.

So ändern Sie die Hintergrundfarbe des WordPress-Editors

Sie können die Hintergrundfarbe des WordPress-Editors ändern, indem Sie benutzerdefinierten Code zur functions.php-Datei Ihres Themes hinzufügen.

Selbst der kleinste Fehler im Code kann jedoch Ihre Website unbrauchbar machen und sie unzugänglich machen.

Deshalb empfehlen wir die Verwendung des WPCode Plugins.

Nach gründlichen Tests sind wir zu dem Schluss gekommen, dass dies der einfachste und sicherste Weg ist, benutzerdefinierten Code zu Ihrer WordPress-Website hinzuzufügen. Weitere Informationen finden Sie in unserem WPCode-Testbericht.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code-Schnipsel » +Schnipsel hinzufügen in der WordPress-Admin-Seitenleiste.

Klicken Sie von hier aus unter der Option „Fügen Sie Ihren benutzerdefinierten Code hinzu (neuer Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie mit der Eingabe eines Namens für Ihr Code-Snippet beginnen können. Dies ist nur für Sie und kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Wählen Sie als Nächstes im erscheinenden Menü nach dem Klicken auf das Menü „Code-Typ“ in der oberen rechten Ecke des Bildschirms „PHP-Snippet“ aus.

Kopieren Sie anschließend den folgenden Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Dieser Code-Snippet macht zwei einfache Dinge. Der Teil add_action weist WordPress an, unser benutzerdefiniertes Styling zum Footer des Admin-Bereichs hinzuzufügen.

Darin zielt der CSS-Code auf den Hauptcontainer des Block-Editors (.editor-styles-wrapper) ab und setzt dessen background-color auf einen neuen Hex-Code.

Sobald Sie dies getan haben, suchen Sie im PHP-Snippet, das Sie gerade eingefügt haben, nach dem folgenden Code:

background-color: #bee0ec;

Dann müssen Sie den Hex-Code Ihrer bevorzugten Farbe neben der Option für die Hintergrundfarbe hinzufügen.

Wenn Sie keinen Hex-Code verwenden möchten, können Sie stattdessen einige grundlegende Farbnamen wie „white“ oder „blue“ verwenden.

Scrollen Sie danach zum Abschnitt „Einfügen“ und wählen Sie die Option „Automatisch einfügen“.

Wählen Sie als Nächstes im Dropdown-Menü den „Ort“ des Code-Snippets als „Nur Admin“ aus.

Gehen Sie danach zurück zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“.

Vergessen Sie schließlich nicht, auf die Schaltfläche „Snippet speichern“ zu klicken, um Ihre Änderungen zu speichern.

Besuchen Sie nun den Block-Editor über die Admin-Seitenleiste.

So sah der Block-Editor auf unserer Website aus, nachdem wir den PHP Code-Schnipsel hinzugefügt hatten.

Video-Tutorial

Wenn Sie lieber ein Video ansehen möchten, sehen Sie sich unser YouTube-Tutorial an, wie Sie die Hintergrundfarbe des WordPress Block Editors anpassen:

Bonus-Methode: Ändern Sie die Hintergrundfarbe auf Ihrer Live-Website

Wenn Sie die Hintergrundfarbe ändern möchten, die Ihre Besucher auf Ihrer Live-Website sehen, hängt die Methode von Ihrem WordPress-Theme ab.

WordPress hat zwei Arten von Themes: klassische Themes und neuere Block-Themes. Wir zeigen Ihnen beide Wege.

Methode 1: Verwendung des Theme-Customizers (für klassische Themes)

Die meisten klassischen Themes verwenden den Theme-Customizer für Farbänderungen. Sie erreichen ihn, indem Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen navigieren.

Sobald der Customizer geladen ist, suchen Sie nach einem Abschnitt mit der Bezeichnung „Farben“, „Farben & Dunkelmodus“ oder etwas Ähnlichem. Der genaue Name und Speicherort dieser Einstellungen kann je nach Theme variieren.

Dort sollten Sie eine Option für „Hintergrundfarbe“ finden, mit der Sie über einen Farbwähler Ihre Änderungen vornehmen können. Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“, um zu speichern.

Methode 2: Verwendung des Full Site Editors (für Block-Themes)

Wenn Sie ein modernes Block-Theme verwenden, nehmen Sie diese Änderungen im Full Site Editor vor. Um ihn aufzurufen, gehen Sie in Ihrer Admin-Seitenleiste zu Darstellung » Editor.

Klicken Sie im Editor auf das Symbol „Stile“ auf der rechten Seite (es sieht aus wie ein halb gefüllter Kreis). Dadurch wird das globale Stil-Panel geöffnet.

Klicken Sie hier auf „Farben“ und wählen Sie dann die Option „Hintergrund“ aus.

Sie können jetzt eine neue Hintergrundfarbe für Ihre gesamte Website auswählen. Der Editor zeigt Ihnen eine Live-Vorschau, und Sie können auf „Speichern“ klicken, wenn Sie fertig sind.

Eine detailliertere Anleitung zu beiden Methoden finden Sie in unserem Leitfaden für Anfänger unter So passen Sie Farben auf Ihrer WordPress-Website an.

Häufig gestellte Fragen zum Ändern des Editor-Hintergrunds

Hier sind einige Fragen, die unsere Leser häufig zum Ändern der Hintergrundfarbe des WordPress-Editors stellen:

Wird dieser Code-Schnipsel meine Website verlangsamen?

Nein, dieser spezielle Code wird Ihre Website nicht verlangsamen. Da wir den WPCode-Schnipsel so eingestellt haben, dass er nur im Bereich „Nur Admin“ geladen wird, fügt er dem Frontend Ihrer Website keinen zusätzlichen Code hinzu. Er wird nur für eingeloggte Benutzer geladen, die den Block-Editor aktiv nutzen.

Kann ich statt einer Volltonfarbe einen Farbverlauf oder ein Bild für den Editor-Hintergrund verwenden?

Ja, das können Sie. Es erfordert eine kleine Änderung am CSS-Code. Anstelle von background-color würden Sie die Eigenschaft background verwenden.

Um beispielsweise einen einfachen linearen Farbverlauf hinzuzufügen, könnte Ihr CSS im Schnipsel wie folgt aussehen:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Sie können Online-CSS-Farbverlauf-Generatoren verwenden, um komplexere Stile zu erstellen.

Der Code hat nicht funktioniert. Was sollte ich zuerst überprüfen?

Wenn sich die Farbe nicht ändert, überprüfen Sie zuerst die Einstellungen in Ihrem WPCode-Schnipsel. Stellen Sie sicher, dass der Schalter oben auf „Aktiv“ und der Einfügeort auf „Nur Admin“ eingestellt ist.

Überprüfen Sie auch den Code selbst auf Tippfehler, insbesondere im CSS-Selektor (.editor-styles-wrapper) und im Hex-Farbcode.

Wie finde ich den Hex-Code für eine bestimmte Farbe, die ich verwenden möchte?

Der einfachste Weg ist die Verwendung eines Online-Farbwähler-Tools. Websites wie Googles Color Picker, HTML Color Codes oder Adobe Color ermöglichen es Ihnen, jede Farbe visuell auszuwählen. Sie liefern Ihnen sofort den richtigen Hex-Code (z. B. #1a457c), den Sie kopieren und in den Code-Schnipsel einfügen können.

Wenn ich mein Theme aktualisiere, verliere ich dann die Änderung der Hintergrundfarbe des Block-Editors?

Nein, Sie werden die Änderung nicht verlieren. Das ist der größte Vorteil der Verwendung eines Plugins wie WPCode anstelle der direkten Bearbeitung der functions.php-Datei Ihres Themes. Der Code-Schnipsel wird unabhängig von Ihrem Theme gespeichert und funktioniert daher auch nach Theme-Updates weiterhin.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Hintergrundfarbe des WordPress-Editors einfach ändern können. Möglicherweise möchten Sie auch unseren ultimativen Leitfaden zum Deaktivieren des Vollbildeditors in WordPress lesen oder sich unsere Top-Auswahl für die besten Gutenberg-Blöcke-Plugins für WordPress ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.