Möchten Sie die Hintergrundfarbe des WordPress-Blockeditors für Administratoren ändern?
Wenn Sie an einem benutzerdefinierten Kundenprojekt arbeiten, möchten Sie möglicherweise manchmal die Hintergrundfarbe des Gutenberg-Editors in WordPress ändern, um sie an die Markenfarben anzupassen.
In diesem Artikel zeigen wir Ihnen, wie Sie die Hintergrundfarbe des WordPress-Blockeditors für den Admin-Bereich einfach anpassen können.
Notiz: Diese Anleitung behandelt das Ändern der Editorfarbe im WordPress-Adminbereich. Wenn Sie die Hintergrundfarbe im WordPress-Frontend ändern möchten, lesen Sie bitte unser Tutorial zum Ändern der Hintergrundfarbe in WordPress.
Warum die Hintergrundfarbe des Blockeditors in WordPress ändern?
Möglicherweise möchten Sie die Hintergrundfarbe des WordPress-Blockeditors aus verschiedenen Gründen ändern.
Beispielsweise verwenden die meisten modernen WordPress-Designs dieselbe Hintergrundfarbe für den Blockeditor wie die Live-Website, einschließlich Astra, OceanWP, GeneratePress und mehr.
Wenn Ihr WordPress-Design jedoch nicht dieselben Farben verwendet, sieht das Erscheinungsbild Ihres Beitrags im Editor ganz anders aus als das, was Ihre Benutzer auf der Live-Website sehen werden.
Ein weiterer Grund für die Änderung der Hintergrundfarbe könnten persönliche Vorlieben sein.
Beispielsweise verwendet der Blockeditor standardmäßig einen einfachen weißen Hintergrund. Einige Benutzer finden es möglicherweise etwas stressig, stundenlang auf den weißen Bildschirm zu schauen. Überanstrengung der Augen kann für viele Menschen ein echtes Problem sein, und der standardmäßige weiße Hintergrund ist nicht einfach für die Augen.
Lassen Sie uns sehen, wie Sie die Hintergrundfarbe des WordPress-Editors einfach ändern können.
So ändern Sie die Hintergrundfarbe des WordPress-Editors
Sie können die Hintergrundfarbe des WordPress-Editors ganz einfach ändern, indem Sie der Datei functions.php Ihres Themes benutzerdefinierten Code hinzufügen.
Denken Sie jedoch daran, dass selbst der kleinste Fehler im Code Ihre Website beschädigen und unzugänglich machen kann. Deshalb empfehlen wir die Verwendung des WPCode Plugin. 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.
Zuerst müssen Sie die installieren und aktivieren kostenloses WPCode-Plugin. Weitere Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die besuchen Code-Snippets » + Snippets hinzufügen Seite aus der Admin-Seitenleiste.
Von hier aus müssen Sie unter der Option „Ihren benutzerdefinierten Code hinzufügen (neues Snippet)“ auf die Schaltfläche „Snippet verwenden“ klicken.
Dadurch gelangen Sie auf die Seite „Benutzerdefiniertes Snippet erstellen“, auf der Sie beginnen können, indem Sie einen Namen für Ihr Code-Snippet eingeben. Dies ist nur für Sie und kann alles sein, was Ihnen hilft, den Code zu identifizieren.
Als nächstes müssen Sie „PHP-Snippet“ als „Codetyp“ aus dem Dropdown-Menü auf der rechten Seite auswählen.
Danach müssen Sie den folgenden Code kopieren und in das Feld „Codevorschau“ einfügen.
add_action( 'admin_footer', function() {
?>
<style>
.editor-styles-wrapper {
background-color: #bee0ec;
}
</style>
<?php
});
Als nächstes müssen Sie in dem gerade eingefügten PHP-Snippet nach dem folgenden Code suchen.
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 „Weiß“ oder „Blau“ verwenden.
Danach müssen Sie nach unten zum Abschnitt „Einfügen“ scrollen und die Option „Automatisch einfügen“ auswählen.
Als Nächstes müssen Sie den „Speicherort“ des Code-Snippets als „Nur Administrator“ aus dem Dropdown-Menü auswählen.
Danach müssen Sie zum Anfang der Seite zurückscrollen und den Schalter „Inaktiv“ auf „Aktiv“ umschalten.
Vergessen Sie abschließend nicht, auf die Schaltfläche „Snippet speichern“ zu klicken, um Ihre Änderungen zu speichern.
Besuchen Sie jetzt den Blockeditor in der Admin-Seitenleiste.
So sah der Block-Editor auf unserer Seite aus, nachdem das CSS-Code-Snippet hinzugefügt wurde.
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 über 85 zeitsparenden WordPress-Shortcuts sehen oder einen Blick auf unsere Top-Auswahl für die besten WordPress-Seitenerstellungs-Plugins werfen.