News & Rumors: 17. June 2012,

WordPress: Kategorien unterschiedliche Farben via CSS zuweisen

Wir wollen Kategorien in WordPress unterschiedliche Farben zuordnen. Mit einem sogenannten Conditional Tag namens has_category();, den es seit WordPress Version 3.1 gibt, besteht die Möglichkeit abzufragen, ob ein Beitrag einer Kategorie zugeordnet wurde.

Die Zuordnung der Farbe zu Elementen geschieht normaler per CSS. Doch müssen wir eben in WordPress abfragen, ob eine Kategorie X zutrifft und entsprechend eine CSS-Klasse ausgeben.

Funktion „return_category_color()“

Damit der Quellcode in den Template-Dateien nicht überquillt, und wir die farbliche Markierung an anderen Stellen wiederholen können, haben wir zu diesem Zweck eine Funktion in unsere functions.php integriert, die die Kategorien abfragt und am Ende eine CSS-Klasse ausgibt. Entsprechend rufen wir die Funktion an der Stelle im HTML-Code auf, an der die Klassen-Angabe erscheinen soll.

Functions.php um Abfrage erweitern

WordPress bietet eine Funktion namens has_category();. Mit dieser lässt sich abfragen, ob ein Element einer Kategorie zugewiesen ist oder nicht. Die Funktion liefert immer nur einen boolschen Wert – wahr oder falsch – zurück. Wie viele Kategorien man abfragt ist egal. Natürlich sollte man sich eine Zuteilung vorab überlegen, damit nicht allzu viele Abfragen entstehen. Jede unnötige Abfrage hält den Webserver auf, vor allem wenn man vorhat, Webseiten zu erstellen, auf denen sich viele Besucher tummeln.

Unser Code schaute zwischendrin wie folgt aus:

function return_category_color() {
    if ( has_category( 'Tech' )) {
	  return "color-tech";
	} elseif ( has_category( 'Games' )) {
	  return "color-games";
	} elseif ( has_category( 'Gossip' )) {
	  return "color-gossip";
	} else {
	  return "color-tech";
	}
}

Reihenfolge nicht unwichtig

Wenn man nicht auf andere Weise entscheiden kann, welche Situation vorliegt, sondern auf diese Wenn-Dann-Entscheidungen zurückgreifen muss, bietet es sich an, in der Reihenfolge im Quelltext eine Priorisierung vorzunehmen. Man entscheidet sich dafür, den Fall zuoberst abzufragen, der am häufigsten vorkommt. Das hat den Vorteil, dass die Funktion danach beendet wird, und die Ressourcen nicht weiter behelligt werden.

Am Ende der Funktion, bei der letzten else-Abfrage gebe ich dieselbe Ausgabe zurück wie für die Tech-Kategorie. Für den Fall, dass wir mal eine neue Kategorie einführen, erhält diese zunächst automatisch einen schwarzen Hintergrund mit einer hellen Textfarbe.

Der CSS-Code

Der Vollständigkeit halber, obwohl er vielen Leuten bereits einleuchten könnte, will ich noch die CSS-Stilanweisungen an dieser Stelle veröffentlichen. Die Klassen, die wir ausgeben, erhalten über CSS jeweils eine andere Hintergrund- und Vordergrundfarbe.

.color-tech {background:#000000;color:#fafafa;}
.color-games {background:#ffcc00;color:#000000;}
.color-gossip {background:#ccccff;color:#000000;}

Um nun die Ausgabe der Kategorie-Klasse an der Stelle im Quelltext zu erzeugen, nutzt man unsere neue Funktion in Verbindung mit echo. Das könnte wie folgt ausschauen:

<h3 class="<?php echo return_category_color();?>">Technik</h3>



WordPress: Kategorien unterschiedliche Farben via CSS zuweisen
4 (80%) 3 Bewertungen

Keine News mehr verpassen! Unsere App für iOS und Android mit praktischer Push-Funktion.

Zuletzt kommentiert