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.
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.
Sehen wir uns also an, wie Sie die Hintergrundfarbe des WordPress-Editors ganz einfach ändern können.
Video-Anleitung
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)“.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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
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