MACNOTES

Veröffentlicht am  17.06.12, 23:44 Uhr von  Alexander Trust

WordPress: Kategorien unterschiedliche Farben via CSS zuweisen

WordPress Wordpress - Logo

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>
Weitersagen

App(s) und Produkte zum Artikel

 Und wie ist deine Meinung?  Schreib uns einfach!

 4 Kommentar(e) bisher

  •  Chris sagte am 21. Juni 2013:

    bound_5″>…habei ich nicht kapiert?!

    Antworten 
    •  Alexander Trust sagte am 22. Juni 2013:

      Achso, das ist eine eigene CSS-Klasse, die sorgt lediglich für Abstände. Ich habe mir angewöhnt, für Dinge, die immer wieder genutzt werden, gewisse CSS-Klassen einzuführen. 5 steht für 5 Pixel, aber nur weil ich mit der CSS-Klasse 5 Pixel “Padding” (Innenabstand) zum Rest erziele. Diese Klasse hat absolut nichts mit der Funktionalität zu tun.

      Antworten 
  •  meike sagte am 31. August 2013:

    ich glaube hier stimmt etwas nicht
    nach “Im Quelltext für unsere index.php taucht die Farbattribuierung zum Beispiel im Fall der Artikel-Überschrift im Index-Loop auf:” steht lediglich
    ” bound_5″> ”
    würde das gerne umsetzen, weiß aber mit dieser info nichts anzufangen :D

    Antworten 
    •  Alexander Trust sagte am 1. September 2013:

      Oh sorry, ja. Ich habe das jetzt ausgebessert, das lag daran, das WordPress eigene Code-Erkennung die Winkel-Klammern für die Tags interpretiert hab. Die hab ich jetzt in Form von Sonderzeichen umgeschrieben. Nun müsste es verständlich sein. :)

      Antworten 

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Werbung
© 2006-2015 Macnotes.de.