WordPress: Eigene Farbpalette im Gutenberg Editor festlegen

In diesem Beitrag möchte ich dir zeigen, wie du im Gutenberg Editor von WordPress eigene Farben festlegen kannst. Denn nicht jedem taugt die vordefinierte Auswahl – mich eingeschlossen.

Die Farbpalette im Gutenberg-Editor

Wenn du deine Beiträge mit dem Gutenberg-Editor bearbeitest, dann siehst du bei vielen Elementen in der rechten Seitenleiste das Feld „Farbeinstellungen.“

Damit lässt sich zwar schon einiges ganz gut umsetzen. Aber falls du eine bestimmte Farbe für deine Website immer wiederverwenden möchtest, dann musst du diese jedes Mal einzeln über „Individuelle Farbe“ auswählen. Das ist auf Dauer etwas nervig.

Farben für dein Farbschema der Website auswählen

Damit du das umsetzen kannst, brauchst du auf jeden Fall die gewünschten hexadezimalen Farbcodes, die du besonders häufig verwenden möchtest (z.B. #000000 für schwarz).

Je nach Blog Design oder Corporate Design, hast du das selbst oder jemand anderes wahrscheinlich schon vor einiger Zeit einmal festgelegt.

Oftmals gibt es hier vier Hauptfarbtöne, die auf der Website für verschiedene Elemente wiederkehrend auftauchen.

Außerdem bieten sich weitere Farben wie schwarz, weiß sowie ein heller und ein dunkler Grauton an, die an der einen oder anderen Stelle als neutraler Background ganz praktisch sein können.

Passe folgenden Code mit deinen Farbcodes an

Danach kannst du den folgenden Code als Grundlage nehmen, um deine neuen Farben festzulegen:

/* Color Palette */

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Hellgrau' ),
            'slug'  => 'hellgrau',
            'color' => '#F2F3F4',
        ),
        array(
            'name'  => __( 'Hellblau' ),
            'slug'  => 'hellblau',
            'color' => '#809ead',
        ),
        array(
            'name'  => __( 'Dunkelgrau' ),
            'slug'  => 'dunkelgrau',
            'color' => '#262626',
        ),
        array(
            'name'  => __( 'Rot' ),
            'slug'  => 'rot',
            'color' => '#ff0000 ',
        ),
		array(
            'name'  => __( 'Weiß' ),
            'slug'  => 'weiss',
            'color' => '#ffffff',
        ),
		array(
            'name'  => __( 'Schwarz' ),
            'slug'  => 'schwarz',
            'color' => '#000000',
        ),
    ) );
} );

Du kannst dabei beliebig viele weitere Farben hinzufügen. Je nachdem wie viele du benötigst.

Bei mir ist es vor allem ein Blauton, der aktuell mein Theme dominiert. Vielleicht passe ich den in Zukunft einmal an, aber aktuell bin ich noch soweit zufrieden damit.

Außerdem brauche immer wieder mal weiß und schwarz, deswegen habe ich diese Farben / Helligkeitsstufen auch mit dazu genommen.

Natürlich hast du weiterhin die Möglichkeit, eigene Farben über den Editor festzulegen. Oder den obigen angepassten Code später zu erweitern.

Code der Website hinzufügen: functions.php

Hier hast du verschiedene Möglichkeiten. Ich arbeite so gut wie immer mit Child Themes, deswegen packe ich den Code in die functions.php meines Child Themes.

Die meisten Theme-Anbieter – wie z.B. GeneratePress – haben ein solches Child Theme als Grundgerüst zum kostenlosen Download für eigene Anpassungen. Google dazu einfach nach deinem „Themenamen + Child Theme“ und du wirst in der Regel fündig.

CSS für die Farben hinzufügen

Damit die Änderungen außerdem im Frontend aktiv werden, musst du auch noch etwas CSS hinzufügen.

Dazu kannst du auch die style.css deines Child Themes nutzen. Alternativ geht das auch über Customizer > Zusätzliches CSS.

Für meine Farben sieht das zugehörige CSS wie folgt aus:

/* Color Palette CSS */

.has-hellgrau-background-color {
    background-color: #C2B7B3;
}
 
.has-hellgrau-color {
    color: #C2B7B3;
}

.has-hellblau-background-color {
    background-color: #809ead;
}
 
.has-hellblau-color {
    color: #809ead;
}

.has-dunkelgrau-background-color {
    background-color: #262626;
}
 
.has-dunkelgrau-color {
    color: #262626;
}

.has-rot-background-color {
    background-color: #C00000;
}
 
.has-rot-color {
    color: #C00000;
}


.has-weiss-background-color {
    background-color: #ffffff;
}
 
.has-weiss-color {
    color: #ffffff;
}

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

Prüfe die Anpassungen

Im letzten Schritt überprüfst du in einem Beitrag, ob die neuen Änderungen greifen. Dazu musst du entweder in dem Beitrag, den aktuell bearbeitest, noch einmal aktualisieren / F5 drücken. Oder du öffnest einen neuen Beitrag.

Wenn alles mit dem Code passt, dann siehst du jetzt das angepasste Farbschema in WordPress bzw. dem Gutenberg Editor:

Außerdem musst du natürlich auch den Live-Beitrag überprüfen. Denn wenn du vergisst, auch das CSS hinzuzufügen, dann werden die Änderungen dort nicht greifen. Und das obwohl du die Farben im Editor siehst:

1. Test eigene Farbe „hellgrau“ in der Farbpalette im Gutenberg Editor

2. Test eigene Farbe „hellblau“ in der Farbpalette im Gutenberg Editor

3. Test eigene Farbe „dunkelgrau“ in der Farbpalette im Gutenberg Editor

4. Test eigene Farbe „rot“ in der Farbpalette im Gutenberg Editor

5. Test eigene Farbe „weiß“ in der Farbpalette im Gutenberg Editor

6. Test eigene Farbe „schwarz“ in der Farbpalette im Gutenberg Editor

(Fokus liegt in den obigen Beispielen auf den Hintergrundfarben, aus Lesbarkeitsgründen habe ich die Textfarbe jeweils angepasst.)

Wichtig ist auch der Hinweis, ob die Farbkombination gut lesbar ist. Denn beispielsweise für meinen roten Balken mit der weißen Schrift bekomme ich den Hinweis, dass dies hier nicht der Fall ist.

An der Stelle kannst du überlegen, ob du diese Kombination so verwenden wollen würdest.

Fazit

Im Prinzip kannst du die vordefinierten Farbeinstellungen im Gutenberg Editor sehr einfach anpassen. Ein Variante dafür habe ich dir in diesem Beitrag gezeigt.

Ansonsten bin ich mir auch ziemlich sicher, dass es ein Plugin dafür gibt 😉

Auch interessant:

• So kannst du die WordPress 404 Seite bearbeiten
• WordPress in Unterverzeichnis installieren: So geht’s
• Persönliche All-Inkl Erfahrungen seit 2015 bis heute
• Externe Domain mit All-Inkl Webhosting nutzen