Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Der Block Editor von WordPress (Gutenberg) stellt eine Farbpalette zur Verfügung, mit der beispielsweise die Textfarbe in einem Block und dessen Hintergrundfarbe verändert werden können. Standardmäßig umfasst die Palette zwölf vordefinierten Farben sowie die Option, eigene Farben mit einem Color-Picker auszuwählen. In vielen Fällen ist es aber sinnvoll statt des Standards eine angepasste Farbauswahl im Theme anzubieten. Wir zeigen euch, wie ihr die Farbeinstellungen deaktivieren oder eine Farbpalette mit eigenen Farben registrieren könnt.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Gutenberg Farbeinstellungen deaktivieren

Wenn ihr keine Farbanpassungen im Editor erlauben, Farben also ausschließlich über das Stylesheet eures Themes steuern wollt, könnt ihr die Farbeinstellungen für Editor-Blöcke mit folgendem Code vollständig deaktivieren. Der Code wird in der functions.php eingefügt.

function disable_color_palette() {
   add_theme_support('editor-color-palette');
   add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'disable_color_palette');

Eigene Farbpalette anlegen

Um eine eigene Farbpalette zu registrieren, übergibt man der Funktion add_theme_support() den Namen des Features 'editor-color-palette' sowie ein Array mit den Farben. Die Informationen zu den Farben stehen in assoziativen Arrays, in denen jeweils Name, Slug und Farbwert festgelegt werden. Der Name wird dabei als Info im Editor ausgegeben und der Slug wird in generierten CSS-Klassen verwendet. Die Farben können u.a. als Hexadezimal-, RGB- oder RGBA-Werte angegeben werden, so dass z. B. auch Transparenzen möglich sind.

function customize_color_palette() {
   add_theme_support('editor-color-palette', array(
      array(
         'name' => __('Petrol'),
         'slug' => 'petrol',
         'color' => '#0094A0',
      ),
      array(
         'name' => __('Red'),
         'slug' => 'red',
         'color' => '#E2574C',
      ),
      array(
         'name' => __('Black'),
         'slug' => 'black',
         'color' => '#000000',
      ),
   ));
}
add_action('after_setup_theme', 'customize_color_palette');

Die vordefinierte Farbpalette von WordPress wird damit nicht ergänzt, sondern überschrieben. Das Beispiel erzeugt also eine Farbpalette mit drei Farben.

Angepasste Farbpalette im WordPress-Block-Editor
Angepasste Farbpalette im WordPress-Block-Editor

Color-Picker deaktivieren

Standardmäßig enthält WordPress zusätzlich zu den Theme-Farben einen Color-Picker, der das Auswählen einer beliebigen Farbe ermöglicht. Wenn ihr die Farbauswahl auf die definierten Farben beschränken wollt, könnt ihr diese Option deaktivieren, indem ihr die Funktion customize_color_palette() um die Zeile add_theme_support('disable-custom-colors'); ergänzt.

function customize_color_palette() {

   // … 

   add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'customize_color_palette');

CSS-Klassen für Block-Farben hinzufügen

Für die Farben der Farbpalette werden CSS-Klassen nach dem Muster has-$slug-color und has-$slug-background-color generiert und dem Block hinzugefügt. Damit diese Klassen einen sichtbaren Effekt im Frontend haben, müssen sie mit entsprechenden Farbangaben dem Stylesheet des Themes hinzugefügt werden. Für die drei Farben aus unserer Beispielpalette sieht das beispielsweise so aus:

.has-petrol-color { color: #0094A0; }
.has-petrol-background-color { background-color: #0094A0; }

.has-red-color { color: #E2574C; }
.has-red-background-color { background-color: #E2574C; }

.has-black-color { color: #000000; }
.has-black-background-color { background-color: #000000; }

Geschrieben von Konstantin Hanke

thumb

Konstantin arbeitet als Webentwickler bei kulturbanause®. Seine Aufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von freier Software.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →