Im Gutenberg-Editor von WordPress lassen sich benutzerdefinierte Farben zur Farbpalette hinzufügen, indem zusätzlicher CSS- oder Theme-Support-Code integriert wird. Jedes Theme liefert von Haus aus eine vordefinierte Auswahl an Farben. Durch das Hinzufügen eigener Farbwerte kann sichergestellt werden, dass Redakteurinnen und Redakteure – oder man selbst – im Editor konsistent markenspezifische Farben verwenden.
Die Farbpalette im Gutenberg-Editor des Twenty Twenty-One Themes ändern
Um die Farbpalette des Gutenberg-Editors im Twenty Twenty-One Theme zu verändern, empfiehlt es sich, ein Child-Theme zu verwenden. Dadurch bleiben alle Anpassungen auch nach zukünftigen Updates des Haupt-Themes erhalten.
Die Anpassung erfolgt über die Funktion add_theme_support(), mit der sich benutzerdefinierte Farben definieren und die vorhandene Standardpalette überschreiben oder erweitern lassen.
Dieser Code gehört in die functions.php Datei:
function meine_gutenberg_color_palette() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __('Cyanblau', 'twentytwentyone'),
'slug' => 'cyanblau',
'color' => '#042940',
),
array(
'name' => __('Cyan', 'twentytwentyone'),
'slug' => 'cyan',
'color' => '#005C53',
),
array(
'name' => __('Gelbgruen', 'twentytwentyone'),
'slug' => 'gelbgruen',
'color' => '#9FC131',
),
array(
'name' => __('Gelb', 'twentytwentyone'),
'slug' => 'gelb',
'color' => '#ffff00',
),
array(
'name' => __('Schwarz', 'twentytwentyone'),
'slug' => 'schwarz',
'color' => '#000000',
),
array(
'name' => __('Weiss', 'twentytwentyone'),
'slug' => 'weiss',
'color' => '#ffffff',
),
array(
'name' => __('Lightseagreen', 'twentytwentyone'),
'slug' => 'lightseagreen',
'color' => '#20b2aa',
),
array(
'name' => __('Rosarot', 'twentytwentyone'),
'slug' => 'rosarot',
'color' => '#df4d55',
),
));
}
add_action( 'after_setup_theme' , 'meine_gutenberg_color_palette', 20 );Es lassen sich beliebig viele Farben hinzufügen, indem man zusätzliche Arrays im editor-color-palette-Argument erstellt. Nachdem die functions.php gespeichert wurde, erscheinen die neuen Farben im Gutenberg-Editor.
Sollten sie nicht sofort angezeigt werden, hilft es, den WordPress- oder Browser-Cache zu leeren.
Der Ausdruck 'twentytwentyone' st die Textdomain des Themes Twenty Twenty-One. Bei der Verwendung eines anderen Themes muss dieser Wert durch die jeweilige Textdomain ersetzt werden. Die Textdomain findet sich üblicherweise in der style.css des aktiven Themes oder in zugehörigen Übersetzungsdateien.
Den CSS-Code für die Farben hinzufügen
Damit die Farbpalette im Twenty Twenty-One Theme erscheint, müssen noch die entsprechenden CSS-Klassen definiert werden. In diesem Beispiel basieren die CSS-Klassen auf den im Code vergebenen Farb-Slugs.
Fügen Sie den folgenden CSS-Code in der style.css Datei (am besten Child-Theme nutzen!) hinzu, um die obigen Farben im Gutenberg-Editor anzuzeigen. Alternativ benutzerdefiniertes CSS hinzufügen: Das WordPress-Dashboard öffnen und zu „Design“ > „Anpassen“ > „Zusätzliches CSS“ gehen. Dort kann man ebenfalls benutzerdefinierten CSS-Code hinzufügen.
/* CSS für die Gutenberg-Editor-Farbpalette */
/* Verwende die Farb-Slugs als Klassen mit dem Präfix "has-" */
/* Cyanblau */
.has-cyanblau-color {
color: #042940; /* Farbcode für Cyanblau */
}
/* Cyan */
.has-cyan-color {
color: #005C53; /* Farbcode für Cyan */
}
/* Gelbgruen */
.has-gelbgruen-color {
color: #9FC131; /* Farbcode für Gelbgruen */
}
/* Gelb */
.has-gelb-color {
color: #ffff00; /* Farbcode für Gelb */
}
/* Schwarz */
.has-schwarz-color {
color: #000000; /* Farbcode für Schwarz */
}
/* Weiss */
.has-weiss-color {
color: #ffffff; /* Farbcode für Weiss */
}
/* Lightseagreen */
.has-lightseagreen-color {
color: #20b2aa; /* Farbcode für Lightseagreen */
}
/* Rosarot */
.has-rosarot-color {
color: #df4d55; /* Farbcode für Rosarot */
}
Nach dem Speichern sollte die Farbpalette im Gutenberg-Editor sichtbar sein. Falls die Anpassungen nicht sofort greifen, ist es auch hier sinnvoll, den Cache der WordPress-Seite oder des Browsers zu leeren.