Seitenfarbe als Designsystem: Mein eigenes WordPress-Plugin für dynamische Farbschemata

Mit meinem kleinen WordPress-Plugin für die Seitenfarbe habe ich mir ein flexibles Farbsystem gebaut, das direkt aus dem Custom Field farbe gespeist wird. Egal ob Beitrag, Seite, Custom Post Type oder Taxonomie-Archiv: Sobald für das aktuelle Objekt eine Farbe hinterlegt ist, erzeugt das Plugin automatisch eine Reihe von CSS-Variablen und Utility-Klassen, mit denen ich das komplette Design der Seite steuern kann.

Was das Plugin genau macht

Das Plugin liest eine im Backend gepflegte Hex-Farbe aus dem Meta-Feld farbe aus und stellt sie im Frontend als CSS-Variablen zur Verfügung. Zusätzlich erzeugt es daraus abgeleitete Helligkeitsstufen und RGBA-Varianten und bietet passende Utility-Klassen für den Hintergrund an.

• Funktioniert für alle Single-Ansichten: Beiträge, Seiten und alle Custom Post Types.
• Funktioniert auch für Taxonomie-Archive wie Kategorien, Schlagwörter und Custom Taxonomys.
• Nutzt das Meta-Feld bzw. Term-Meta-Feld farbe als zentrale Farbangabe.
• Erzeugt globale CSS-Variablen im :root-Scope.
• Stellt Utility-Klassen bereit, um die Seitenfarbe direkt als Hintergrundfarbe zu verwenden.

Technische Grundlage: CSS-Variablen für die Seitenfarbe

Sobald das Plugin eine gültige Hex-Farbe findet, erzeugt es im Head-Bereich der Seite ein Inline-Stylesheet mit mehreren CSS-Variablen. Die wichtigste Basis sind zwei Variablen:

Basis-Variablen

Die Basis-Variablen sind:

• --seitenfarbe: die Originalfarbe als Hex-Wert, zum Beispiel #ff5500.
• --seitenfarbe-rgb: die gleiche Farbe als kommagetrennte RGB-Liste, zum Beispiel 255, 85, 0.

Der große Vorteil: Mit --seitenfarbe kann ich überall direkt die Vollfarbe nutzen, und mit --seitenfarbe-rgb kann ich beliebige Transparenzen über rgba() definieren, zum Beispiel:

background-color: rgba(var(--seitenfarbe-rgb), 0.54);

Abgeleitete Farbvarianten (10 bis 90 Prozent)

Ausgehend von der Grundfarbe erzeugt das Plugin zusätzlich mehrere hellere Varianten. Dazu wird die Originalfarbe stufenweise auf Weiß gemischt. Für jede Stufe werden weitere Variablen erzeugt, zum Beispiel:

• --seitenfarbe-10
• --seitenfarbe-20
• …
• --seitenfarbe-90

Diese Werte sind bereits als Hex-Farben berechnet, sodass ich sie ohne weiteres direkt als Hintergrund einsetzen kann.

Parallel dazu legt das Plugin auch RGBA-Varianten an, zum Beispiel:

• --seitenfarbe-rgba-10 mit ungefähr 0.1 Transparenz
• --seitenfarbe-rgba-20 mit ungefähr 0.2 Transparenz
• … bis --seitenfarbe-rgba-90

Diese RGBA-Varianten basieren intern auf rgba(--seitenfarbe-rgb, alpha) und eignen sich ideal für Overlays, dezente Hintergründe oder Hover-States.

Woher kommt die Farbe? Beiträge, Seiten, CPTs und Taxonomien

Das Plugin sorgt zuerst dafür, dass es überhaupt eine passende Farbe gibt. Es prüft in dieser Reihenfolge:

• Bin ich auf einer einzelnen Seite, einem einzelnen Beitrag oder einem Custom Post Type? Dann wird über get_post_meta das Meta-Feld farbe für das aktuelle Objekt ausgelesen.
• Bin ich auf einem Taxonomie-Archiv (Kategorie, Schlagwort oder Custom Taxonomy)? Dann wird über get_term_meta das Term-Meta-Feld farbe für den aktuellen Term abgefragt.
• Falls kein Wert vorhanden ist oder die Farbe ungültig ist, wird gar kein CSS ausgegeben. Die Seite verhält sich dann so, als gäbe es keine Seitenfarbe.

Dadurch kann ich für jede Inhaltsebene einen eigenen Farbakzent definieren: zum Beispiel eine bestimmte Farbe für eine Kategorie, die dann auf allen Beiträgen dieser Kategorie automatisch sichtbar ist, oder eine individuelle Farbe für einen Portfolio-CPT.

Automatische Utility-Klassen für Hintergründe

Neben den Variablen schreibt das Plugin auch mehrere Utility-Klassen in das Stylesheet. So kann ich im Editor oder über eigene Templates sehr schnell Hintergründe zuweisen, ohne jedes Mal neue CSS-Regeln zu definieren.

• .seitenfarbe-bg: verwendet die reine Grundfarbe --seitenfarbe als Hintergrund.
• .seitenfarbe-10-bg bis .seitenfarbe-90-bg: nutzen die vorgerechneten, etwas helleren Varianten --seitenfarbe-10 bis --seitenfarbe-90.
• .seitenfarbe-rgba-10-bg bis .seitenfarbe-rgba-90-bg: nutzen die RGBA-Varianten mit unterschiedlicher Transparenz.

Im HTML kann ich dadurch einfach solche Klassen verwenden:

<div class="seitenfarbe-bg">…</div>

oder

<div class="seitenfarbe-30-bg">…</div>

oder besonders weich:

<div class="seitenfarbe-rgba-50-bg">…</div>

Praxisbeispiel: Verlauf über mehrere Kadence-Spalten

Ein sehr schöner Anwendungsfall ist ein Verlauf über mehrere Spalten, zum Beispiel in einer WooCommerce- oder Leistungsübersicht mit Kadence Columns. Wenn ich eine Reihe von Spalten habe, kann ich die Hintergrundfarben mit zunehmender Transparenz aufbauen.

Die Basis dafür ist die Variable --seitenfarbe-rgb. Ich kann für jede Spalte eine andere Opacity definieren, zum Beispiel von 0 bis 1 in 20 Schritten. Das ergibt einen sehr sanften, linearen Verlauf von sehr hell bis vollflächig.

Beispielidee in CSS-Form, rein konzeptionell beschrieben:

• Spalte 1: background-color: rgba(var(--seitenfarbe-rgb), 0);
• Spalte 2: background-color: rgba(var(--seitenfarbe-rgb), 0.05);
• Spalte 3: background-color: rgba(var(--seitenfarbe-rgb), 0.10);
• …
• Spalte 20: background-color: rgba(var(--seitenfarbe-rgb), 1);

Auf diese Weise kann ich mit sehr wenig zusätzlichem CSS einen lebendigen, stimmigen Farbverlauf schaffen, der sich automatisch an die auf der Seite definierte farbe anpasst.

Weitere Einsatzmöglichkeiten im Design

Durch das zentrale Farbsystem lassen sich viele Design-Elemente elegant an die Seitenfarbe koppeln:

• Hero-Sections: Hintergrund oder Overlay der Hero-Sektion mit einer RGBA-Variante der Seitenfarbe.
• Buttons: Primäre Buttons in der Vollfarbe, sekundäre Buttons mit hellerer oder transparenter Variante.
• Cards und Boxen: Rahmen, Icons oder Badges in abgestuften Varianten der Seitenfarbe.
• Hover-Effekte: Beim Hover auf Karten oder Teaser-Elementen wird eine intensivere oder weniger transparente Variante genutzt.
• Kategorien und Archive: Jede Kategorie kann eine eigene Farbe bekommen, die sich im Layout widerspiegelt.

Weil alles auf Variablen basiert, reicht oft eine einzige Änderung an der Farbe im Backend, um einen komplett neuen Look für eine Seite oder Inhaltsgruppe zu erzeugen.

Vorteile für Wartung und Konsistenz

Das Plugin ist bewusst schlank und fokussiert, bringt aber ein paar deutliche Vorteile mit:

• Konsistentes Design: Alle Farbakzente stammen aus einer Quelle, dem Feld farbe.
• Einfache Pflege: Die Farbe wird pro Seite, Beitrag oder Kategorie nur einmal gepflegt.
• Weniger doppeltes CSS: Durch die Utility-Klassen brauche ich deutlich weniger individuelle Regeln.
• Kompatibel mit Page Buildern und Gutenberg: Klassen können einfach im Block-Editor zugewiesen werden.
• Flexibel erweiterbar: Weitere Utility-Klassen oder Variablen lassen sich jederzeit ergänzen, ohne das Grundkonzept zu ändern.

Grenzen und sinnvolle Vorsichtsmaßnahmen

Natürlich gibt es auch ein paar Punkte, die ich im Blick behalte:

• Ohne gepflegtes Feld farbe wird kein CSS ausgegeben. Das ist gewollt, um unnötige Variablen zu vermeiden.
• Sehr dunkle oder sehr grelle Farben sollten mit Bedacht gewählt werden, damit Texte weiterhin gut lesbar bleiben.
• Kontraste sollten bei Buttons und Überschriften geprüft werden, insbesondere bei hohen Transparenzen.
• Da das Stylesheet im Head pro Seite generiert wird, sollte der Code schlank bleiben und nicht unnötig aufgebläht werden.

Fazit: Ein kleines Plugin mit großem Effekt

Mein Seitenfarben-Plugin ist technisch ein relativ kleines Stück Code, hat aber einen großen Einfluss auf das Design und die Wartbarkeit meiner WordPress-Projekte. Durch das zentrale Feld farbe, die daraus abgeleiteten CSS-Variablen und die Utility-Klassen kann ich sehr schnell stimmige und dynamische Layouts aufbauen, ohne mich in zig unterschiedlichen Farbangaben zu verlieren.

Vor allem in Kombination mit Gutenberg, Kadence und WooCommerce wird aus einer simplen Meta-Farbe ein flexibles Farbsystem, das für jede Seite, jeden Post Type und jede Kategorie eine eigene, visuell erkennbare Identität schafft – und genau das war das Ziel dieses Plugins.