Nun hat mich wieder einmal eine Anfrage ereilt, wie ich die unterschiedliche Einfärbung der Kategorien realisiert habe und wie es möglich ist, die Links der Schubladen beim überfahren in unterschiedlichen Farben darzustellen.

Auf letzten Punkt – das Einfärben der Kategorien-Links will ich als erstes eingehen. Dies ist auch gleichzeitig das einfachste an der ganzen Sache. Denn WordPress versorgt von Hause aus über die Funktion wp_list_categories() die Links für jede Kategorie mit entsprechenden <li>-Tags. Jedem Kategorie-Link wird die entsprechende ID im <li>-Tag mitgegeben; z.B.

<li class="cat-item cat-item-9"><a href="http://www.kopflos.eu/category/kopflos/" title="">Kopflos</a></li>

Somit kann in der entsprechenden CSS-Datei (meist die Standard CSS-Datei style.css) dieser Tag mit einer eigenen Formatierung versehen werden

.cat-item-9 a:hover {
	color: #fff;
	background-color: #3366cc;
}

Darstellung Kategorien

Damit nun die einzelnen Seiten der Kategorien-Übersichten und auch die Beiträge entsprechend ihrer Kategorienzugehörigkeit eingefärbt werden, benötigt man eine eigene CSS-Datei für die besondere Formatierung. In meinem Falle habe ich eine CSS-Datei style_blue.css erstellt, in der für alle Elemente die individuell formatiert werden sollen die Klassen vorhanden sind.

Um nun diese CSS-Datei zu laden, wird in der header.php abgefragt, welcher Kategorie der aktuelle Beitrag zugeordnet ist. Dazu nutze ich das WordPress Conditional-Tag in_category(), welches prüft, ob der Beitrag zu entsprechender Kategorie gehört.

<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style.css" />
<?php if ( in_category(11) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_orange.css" />
<?php } else if ( in_category(14) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_green.css" />
<?php } else if ( in_category(9) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_blue.css" />
<?php } else if ( in_category(8) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_red.css" />
<?php } else if ( in_category(7) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_pink.css" />
<?php } else if ( in_category(13) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style_yellow.css" />
<?php } ?>

Wenn alle CSS-Dateien für die einzelnen Kategorien erstellt sind, war’s das auch schon. Auf der Startseite, auf ja Beiträge unterschiedlichster Kategorien auftauchen, ist der erste Beitrag welcher von WordPress gelesen wird ausschlaggebend für die Farbgebung. Da es bei nicht dazu kommt, dass ein Beitrag mehreren Kategorien zugeordnet wird, kommt es auch hier nicht zu Überschneidungen.

Und wie kann ich das auf Seiten anwenden?

Zuerst kümmern wir uns hier auch um die Formatierung der Links für die Seiten.

In der Regel werden die Links bzw. das Menü für Seiten über die WordPress Funktion wp_list_pages() erstellt. Für die unterschiedliche Formatierung der Links (ob nun generell oder für das hover-Event) kann auch hier auf unterschiedliche Klassen in dem <li>-Tag, welcher durch wp_list_pages() generiert wird zurückgegriffen werden.

<li class="page_item page-item-389"><a href="http://www.kopflos.eu/stuff/" title="Downloads">Downloads</a></li>
<li class="page_item page-item-98"><a href="http://www.kopflos.eu/dr-brown-service/" title="Dr. Brown Service">Dr. Brown Service</a></li>
<li class="page_item page-item-113"><a href="http://www.kopflos.eu/impressum/" title="Impressum">Impressum</a></li>
<li class="page_item page-item-591"><a href="http://www.kopflos.eu/tools_d/" title="Tools">Tools</a></li>
<li class="page_item page-item-788"><a href="http://www.kopflos.eu/tutorials/" title="Tutorials">Tutorials</a></li>
<li class="page_item page-item-573"><a href="http://www.kopflos.eu/wallpaper-of-the-month/" title="Wallpaper of the Month">Wallpaper of the Month</a></li>

Hier wird also mit page-item-nummer jeder Link individuell ausgezeichnet und kann entsprechend formatiert werden.

Wem dies ein wenig zu kryptisch ist, der sollte sich einmal das Plugin Classy wp_list_pages anschauen. Damit ist es unter anderem möglich "sprechende" Klassen oder aber auch IDs für die <li>-Tags zu generieren. Das Plugin bietet darüber hinaus auch noch weitere Vorteile beim klassifizieren der Tags.

Nun zu der Formatierung der einzelnen Seiten.

Mit der Abfrage der ID für die Kategorie kommt man für statische Seiten nicht weiter. Also muss man die einzelnen Seiten abfragen. Dazu nutzt man am besten das WordPress Conditional Tag is_page() zu einer Abfrage in der header.php.

<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style.css" />
<?php if ( is_page(389) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/another.css" />
...
<?php } else if ( is_page('impressum') ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/onemore.css" />
<?php } ?>

Wie zu sehen, kann über is_page(‘nummer’) die Seite über die ID der Seite oder mit is_page(‘name’) über den Namen der Seite abgefragt werden. Nun kann auch hier pro Seite ein zusätzliches individuelles Stylesheet geladen werden.

Doch was, wenn viele Subpages oder Sub-Subpages vorhanden sind

Oder im Laufe der Zeit mehrere davon hinzukommen oder wegfallen. Dann müsste für jede Seite eine eigene Abfrage in der header.php eingebaut werden. Keine gute Lösung. Aber es gibt eine Lösung für dieses Problem: Das Plugin is_child.

Dieses Plugin besteht eigentlich nur aus zwei Funktionen, die für den versierten WordPress Nutzer auch einfach in die functions.php des Themes kopiert werden können. Mit diesen Funktionen lässt sich feststellen, ob eine Seite in irgendeiner Ebene zu einer bestimmten anderen Seite im Verhältnis steht – also sehr hilfreich für Sub-Subpages, da WordPress dies von Hause aus nicht kann.

Der Aufruf is_child(389) ergibt true, wenn die entsprechende Seite eine Unterseite (gleich welcher Ebene) der Seite mit der ID 389 ist. Aber auch mit is_child() ist es möglich mit "sprechenden" Seitennamen zu arbeiten, z.B. is_child(‘about’).

So ist es also möglich über die Abfrage in der header.php einem kompletten Menü-Ast eine individuelle Formatierung zuzuweisen.

<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/style.css" />
<?php if ( is_child(389) ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/another.css" />
...
<?php } else if ( is_page('about') ) { ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $templatePath; ?>/onemore.css" />
<?php } ?>

Natürlich können solche Abfragen auch an anderer Stelle vorkommen und individuelle Dateien, wie z.B. Sidebars laden. Gerade mit der Funktion is_child() ist hier einiges möglich.

Ich hoffe der Beitrag ist für den einen oder anderen hilfreich. Bei Fragen oder weiteren Ideen hinterlasst bitte einen Kommentar.

• WordPress sicherer machen
• NetNewsWire und Related Posts
• WordPress Themes im Backend übersetzen
• Subscribe-to-Comments arbeitet wieder
• Auch keine Lust auf Abmahnung
• Kompletter Beitrag nach <more>-tag
• Neuer Versuch
• Altes Theme ein bisschen aufgepeppt
• Das gefällt auch mir besser
• Neue Kleider