Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man die Hintergrundfarbe des WordPress-Block-Editors anpasst

Möchten Sie die Hintergrundfarbe des WordPress-Blockeditors für Administratoren anpassen?

Bei der Arbeit an einem Kundenprojekt kann es vorkommen, dass Sie die Hintergrundfarbe des Gutenberg-Editors in WordPress ändern möchten, damit sie den Markenfarben des Kunden entspricht.

In diesem Artikel zeigen wir Ihnen, wie Sie die Hintergrundfarbe des WordPress-Blockeditors für den Admin-Bereich ganz einfach anpassen können.

Changing the background color of WordPress block editor

Hinweis: Diese Anleitung behandelt das Ändern der Editorfarbe im WordPress-Admin. Wenn Sie die Hintergrundfarbe im WordPress-Frontend ändern möchten, können Sie nach unten zum Bonus-Abschnitt scrollen oder unser Tutorial zum Ändern der Hintergrundfarbe in WordPress lesen.

Warum sollte man die Hintergrundfarbe des Blockeditors in WordPress ändern?

Sie können die Hintergrundfarbe des WordPress-Blockeditors aus verschiedenen Gründen ändern.

Die meisten modernen WordPress-Themes verwenden beispielsweise die gleiche Hintergrundfarbe für den Block-Editor wie für die Live-Website, darunter Astra, OceanWP, GeneratePress und andere.

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

Ein weiterer Grund für die Änderung der Hintergrundfarbe könnte die persönliche Vorliebe sein.

So verwendet der Block-Editor standardmäßig einen einfachen weißen Hintergrund. Manche Benutzer finden es vielleicht etwas anstrengend, stundenlang auf den weißen Bildschirm zu schauen. Augenbelastung kann für viele Menschen ein echtes Problem sein, und der weiße Standardhintergrund ist nicht gerade augenschonend.

Default block editor

Sehen wir uns also an, wie Sie die Hintergrundfarbe des WordPress-Editors ganz einfach ändern können.

Video-Anleitung

Subscribe to WPBeginner

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

Wie man die Hintergrundfarbe des WordPress-Editors ändert

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

Doch schon der kleinste Fehler im Code kann Ihre Website zerstören und unzugänglich machen.

Deshalb empfehlen wir die Verwendung des WPCode-Plugins . Es ist das beste WordPress-Code-Snippets-Plugin auf dem Markt und der einfachste und sicherste Weg, benutzerdefinierten Code zu Ihrer WordPress-Website hinzuzufügen.

Zunächst müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: WPCode hat auch einen kostenlosen Plan, den Sie für dieses Tutorial verwenden können. Mit dem Premium-Plan haben Sie jedoch Zugriff auf weitere Funktionen wie die Code-Snippet-Bibliothek, bedingte Logik und mehr.

Besuchen Sie nach der Aktivierung die Seite Code Snippets “ +Add Snippet in der WordPress-Admin-Seitenleiste.

Klicken Sie hier auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Add new snippet

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Namen für Ihr Code-Snippet eingeben können. Dieser Name ist nur für Sie bestimmt und kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Wählen Sie als nächstes aus dem Dropdown-Menü in der rechten Ecke des Bildschirms „PHP Snippet“ als „Code-Typ“ aus.

Choose PHP Snippet option as the code type for changing editor background color

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

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

Sobald Sie das getan haben, müssen Sie den folgenden Code in dem PHP-Schnipsel suchen, den Sie gerade eingefügt haben:

background-color: #bee0ec;

Fügen Sie dann den Hex-Code Ihrer bevorzugten Farbe neben der Option für die Hintergrundfarbe ein. Wenn Sie keinen Hex-Code verwenden möchten, können Sie stattdessen einige grundlegende Farbnamen wie „Weiß“ oder „Blau“ verwenden.

Paste the code snippet for changing the editor background color

Blättern Sie dann zum Abschnitt „Einfügen“ und wählen Sie die Option „Automatisch einfügen“.

Als Nächstes müssen Sie den „Speicherort“ des Codefragments als „Nur für Administratoren“ aus dem Dropdown-Menü auswählen.

Choose the insertion method and location of the code snippet

Gehen Sie dann zurück zum Anfang der Seite und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“ um.

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

Save the code snippet for changing the background color

Rufen Sie nun den Block-Editor in der Admin-Seitenleiste auf.

So sah der Block-Editor auf unserer Website nach dem Hinzufügen des PHP-Codefragments aus.

Editor color preview

Bonus: Ändern Sie die Hintergrundfarbe in WordPress

Wenn Sie die Hintergrundfarbe des Frontends Ihrer Website ändern möchten, können Sie dies im WordPress-Dashboard unter Erscheinungsbild “ Anpassen tun.

Dadurch wird der Theme-Customizer gestartet, in dem Sie in der linken Spalte auf die Registerkarte „Farben & Dunkler Modus“ klicken müssen. Beachten Sie, dass Ihr Customizer je nach verwendetem Theme anders aussehen kann.

Click on the Color and dark mode panel in the theme customizer

Daraufhin öffnet sich ein neues Fenster in der Seitenleiste, in dem Sie auf die Option „Farbe auswählen“ klicken müssen.

Der Farbwähler wird nun auf Ihrem Bildschirm geöffnet, und Sie können Ihre bevorzugte Hintergrundfarbe auswählen. Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ oben zu klicken, um Ihre Einstellungen zu speichern.

Change the bacground color in the theme customizer

Sie können auch die Textfarbe, die Farbe der Hervorhebungen, die Farbe der Schaltflächen und vieles mehr über den Theme-Customizer ändern. Wenn Sie jedoch ein Block-Theme verwenden, müssen Sie diese Änderungen im vollständigen Site-Editor vornehmen.

Weitere Einzelheiten zu diesem Thema finden Sie in unserem Leitfaden für Einsteiger zur Anpassung von Farben auf Ihrer WordPress-Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie die Hintergrundfarbe des WordPress-Editors einfach ändern können. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zu den nützlichsten und zeitsparendsten WordPress-Shortcuts lesen oder einen Blick auf unsere Top-Picks für die besten WordPress Page Builder Plugins werfen.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

5 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Shawn

    This works better for me;
    .editor-styles-wrapper, body.mce-content-body, .wp-block {
    background-color: ;
    color: ;
    }

    • WPBeginner Support

      Thank you for sharing what worked for you! :)

      Admin

  3. Broc Hite

    This was great, but it was only an incomplete solution for me since I spend more time in the code editor vs the visual editor. I’m still Googling trying to figure out how to change the color there.

    • WPBeginner Support

      If you wanted to change the background color in the text/code editor, you could instead target .edit-post-text-editor in the code above.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.