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.”

Farbeinstellungen Gutenberg Editor WordPress

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.

So sieht der Code mit den neuen Farbeinstellungen in der functions.php bei mir aktuell aus. Nur der Punkt ab /* Color Palette */

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:

farbeinstellungen-code-neue-farben-gutenberg-testen
Neue Farbpalette in WordPress

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.

Lesbarkeitshinweis seitens WordPress zu deiner Farbkombination
Nicht alle Farbkombinationen sind für alle Menschen gut lesbar. WordPress weist dich darauf hin.

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:


Dir gefällt dieser Beitrag? Dann würde ich mich sehr darüber freuen, wenn du ihn teilen oder du einen Kommentar hinterlassen würdest. Vielen Dank! :)


Für diesen Artikel und den Aufbau der Website ist jede Menge Kaffee geflossen. Wenn dir die Infos geholfen haben, freue ich mich jederzeit über neuen Treibstoff. Mit dem Klick auf den Button wirst du zu PayPal weitergeleitet. Dankeschön!

☕ Kaffee spendieren
Sebastian Würfel Avatar

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.


Verpasse keine neuen Beiträge

Vielen Dank für den Support :) Und keine Sorge, ich spamme nicht. Natürlich ist eine Abmeldung vom Newsletter jederzeit möglich. Die Eintragung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß der Datenschutzerklärung.


Schreibe einen Kommentar