WordPress: Kategorien unterschiedliche Farben via CSS zuweisen

WordPress
Wordpress - Logo

Mächte man in WordPress Kategorien unterschiedliche Farben zuordnen, dann benötigt man zum einen CSS, zum anderen die sogenannten Conditional Tags. Konkret wird has_category(); genutzt. Wir erklären, wie man unterschiedlichen Kategorien in WordPress verschiedene Farben zuordnet.

Seit WordPress 3.1 gibt es die Möglichkeit abzufragen, ob ein Beitrag einer Kategorie zugeordnet wurde. Die Zuordnung einer Farbe zu Elementen geschieht per CSS.

Also ist die Aufgabe relativ einfach. Wir erstellen unterschiedliche Klassen für Kategorien und weisen diesen Klassen per CSS eine Farbe zu.

Funktion erstellen

Immer wenn man Quellcode wiederholt nutzen möchte und nicht will, dass Template-Dateien überquillen, ist es Zeit eine Funktion zu erstellen. Zu diesem Zweck erstellen wir eine Funktion in der functions.php. Sie fragt die Kategorien ab und gibt am Ende eine CSS-Klasse aus.

Wir rufen später die Funktion an der Stelle im HTML-Code auf, an der die Klassen-Angabe erscheinen soll.

WordPress bietet eine Funktion namens has_category() (vgl. WordPress Codex). Mit dieser lässt sich abfragen, ob ein Beitrag 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.

Man sollte 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.

Ein erstes einfaches Beispiel mit einer IF-Abrage könnte so aussehen:

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";
  }
}

Das ist viel Tipparbeit, je mehr Kategorien es werden. Und was ist, wenn man möchte, dass mehr als eine Kategorie die gleiche Farbe erhalten soll? Statt eine IF-Abfrage wie if ( has_category( 'Tech' ) || has_category( 'Games' ) || has_category( 'Gossip' ) ) kann man sich mit PHP in_array behelfen. Das würde in etwa wie folgt aussehen:

function return_category_color() {
  if ( has_category( in_array('Tech', 'Games', 'Gossip') )) {   
    return "color-black";
  } else { 
    return "color-white";
  }
}

Reihenfolge wichtig

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 fragt den Fall zuoberst ab, der am häufigsten vorkommt. Das hat den Vorteil, dass die Funktion danach beendet wird.

Man muss am Ende der Funktion keine allerletzte else-Anweisung einfügen, sollte es aber. So kann man für den Fall vorsorgen, dass man eine neue Kategorie einfügt, die man in der Funktion aber noch nicht abgefragt hat.

CSS-Code

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 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>
Geschrieben von:
Geschrieben am: 17.06.2012
Zuletzt aktualisiert: 21.02.2016
Zurück zu: Tipps und Tricks
Was sagst Du dazu? Kommentieren!
WordPress 3.4: Update mit Codenamen Green mit Theme-Customizer und Twitter-Embed
OS X 10.8: "Best for Airplay"-Einstellung für MacBook Pro Retina

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Zuletzt kommentiert