Wichtige Inhalte in WordPress mit Theme-Farben hervorheben
Hinweise, Empfehlungen und zentrale Aussagen können innerhalb eines Beitrags eine eigene visuelle Gewichtung erhalten. Das Plugin «Beitragsauszeichnung» verbindet dafür eine CSS-Klasse im Block-Editor mit den Farben des aktiven WordPress-Themes.
Eine erkennbare visuelle Hierarchie unterstützt die Priorisierung redaktioneller Inhalte. Eine Hervorhebung lenkt die Aufmerksamkeit auf Informationen, die innerhalb eines Beitrags im Mittelpunkt stehen. Die Redaktion steuert diese Auszeichnung direkt am jeweiligen Gutenberg-Block.
Dafür haben wir das WordPress-Plugin «Beitragsauszeichnung» entwickelt. Die CSS-Klasse is-highlighted kennzeichnet ausgewählte Blöcke im Editor und im Frontend. Hintergrund- und Rahmenfarbe folgen dabei den Vorgaben des aktiven Themes.
Hervorhebung im Block-Editor aktivieren
Die Auszeichnung wird über die erweiterten Einstellungen des gewünschten Blocks eingeschaltet. Im Feld für zusätzliche CSS-Klassen trägt die Redaktion is-highlighted ein.
Der Block erhält anschliessend bereits im Editor eine farbliche Kennzeichnung. Dieselbe Klasse gestaltet den Inhalt nach der Veröffentlichung auch im Frontend. Redaktionelle Bearbeitung und sichtbare Ausgabe verwenden damit dieselbe Hervorhebung.
Farben aus dem Theme übernehmen
Die Gestaltung verwendet Farbvariablen des aktiven WordPress-Themes. Die Hervorhebung übernimmt dadurch die vorhandene Farbwelt und fügt sich in die Gestaltung der Website ein.
background-color: var(--wp--preset--color--highlight-100, #CCE2CF);
border-color: var(--wp--preset--color--highlight-500, #4C9C5A);Die erste Variable steuert die Hintergrundfarbe, die zweite den Rahmen. Die angegebenen Farbwerte ergänzen die Darstellung in Themes, deren Farbpalette diese Variablen noch nicht definiert.
Hervorgehobene Inhalte einheitlich ausgeben
Das Plugin stellt die Gestaltung im Editor und im Frontend bereit. Eine einmal vergebene CSS-Klasse führt deshalb an beiden Orten zur selben Auszeichnung.
So bleibt die Pflege kompakt: Die Redaktion wählt den Inhalt aus, trägt die Klasse ein und sieht die Hervorhebung direkt bei der Bearbeitung. Das Theme liefert die Farben, und das Plugin überträgt die Gestaltung auf die markierten Blöcke.
Ergebnis
Redaktionelle Hinweise mit Theme-Farben hervorheben
Das Plugin verbindet eine einfache CSS-Klasse mit der Farbpalette des aktiven Themes. Hervorgehobene Blöcke erhalten im WordPress-Editor und auf der veröffentlichten Website dieselbe Gestaltung.
Klasse im Editor vergeben
Die CSS-Klasse is-highlighted kennzeichnet ausgewählte Gutenberg-Blöcke direkt in den erweiterten Einstellungen.
Theme-Farben übernehmen
Hintergrund und Rahmen verwenden die vorgesehenen Farbvariablen des aktiven WordPress-Themes.
Fallback-Werte verwenden
Definierte Farbwerte ergänzen die Darstellung in Themes, die keine passenden Variablen bereitstellen.