Dynamisches Menü mit Hervorhebung unter WordPress

Immer wieder kommen Fragen, wie man mit WordPress eine Navigation erstellt. Dabei liegt der Fokus oft auf statischen Seiten oder Kategorien.
Für beides möchte ich folgendem Beitrag eine Lösung zeigen und mit wenigen Worten erklären. Die Beispiele sind willkürlich gewählt und die Formatierung via CSS lässt sehr viel Spielraum und Kreativität offen. Darum soll es auch nicht primär gehen, sondern eher um die Möglichkeiten, die WordPress bietet, ohne dass man ein statische Navigation in das Theme baut, die nicht erweiterbar ist, in dem man eine neue Seite oder Kategorie anlegt.
Beides ist bei den folgenden Beispielen möglich und damit ist es den Herausgebern im Blog wesentlich leichter, zu entscheiden, ob sie eine neue Seite/Kategorie in die Navigation aufnehmen. Sie benötigen so keine Arbeit im Template des Themes.
Menu mit WordPress

Navigation mit Seiten

Das folgende dynamische „Highlightmenu“ funktioniert mit statischen Seiten aus der WordPress-Verwaltung. Daher die Abfrage der Seiten is_page(). Wenn die zutrift (TRUE), dann wird die Klasse current_page_item vergeben, worüber man den Listpunkt formatieren kann.

Handlet es sich nicht um eine statische Seite, dann wird der Weblog-Link mit der Klasse versehen und kann damit als Aktiv formatiert werden. Alternativ kann man auch einfacher abfragen: if ( !is_page() ). Um aber das Verständnis zu fördern, habe ich nochmal eine ganze Reihe von Conditional Tags aufgenommen und frage einfach auf TRUE ab.

Als letzten Listpunkt werden alle statischen Seiten, außer (exclude) die mit ID 6, 7, 9, 1234, ausgegeben. Daher wird also jede weitere Seite, die angelegt wird, direkt in das Menu geladen und bekommt die Klasse current_page_item, wenn sie aktiv ist.


<ul id="nav">
	<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Weblog</a></li>
	<li<?php if ( is_page('impressum') ) { echo ' class="current_page_item"'; } ?>><a href="#">Impressum</a></li>
	<li<?php if ( is_page('kontakt') ) { echo ' class="current_page_item"'; } ?>><a href="#">Kontakt</a></li>
	<?php wp_list_pages('exclude=6,7,9,1234&sort_order=ASC&title_li='); ?>
</ul>

Horizontale Navigation der Kategorien

Eine ähnliche Navigation kann man auch mit Kategorien bauen, auch dort vergibt WordPress eine Klasse für die aktive Kategorie. Um dies genauer zu sehen, verweise ich auf meine Experimente-Box, in der ich schon mal ein entsprechendes Beispiel mir Erklärung hinterlegt habe.

Der nachfolgende Beispielsyntax gibt alle Kategorien aus und verhindert die Ausgabe eines Titels. Der Template Tag wp_list_categories() kann wesentlich mehr Parameter, dazu soll aber der Verweis auf die offizielle Dokumentation dienen. So kann man beispielsweise auch Kategorien ausschließen.


<ul id="csstabs">
	<?php wp_list_categories('title_li='); ?>
</ul>

Hinweise

WordPress vergibt für den aktiven Link die Klasse current-cat; damit kann der aktive Link formatiert werden.

Jede einzelne Kategorie kann ebenso formatiert werden; möchte man beispielsweise eine gesonderte Kategorie hervorheben. Dazu steht die Klasse cat-item-ID bereit, das ID ist mit der ID der Kategorie zu ersetzen. Diese erkennt man am einfachsten im Backend, in der Verwaltung der Kategorien, bei einem MouseOver.

Jeder erzeugter Link bekommt die Klasse cat-item, wodurch der Link einfach angesprochen werden kann.

Ausgabe

Ein entstandener Link sieht beispielsweise wie folgt aus:


<li class="cat-item cat-item-3">
	<a href="http://example.de/?cat=3" title="View all posts filed under Cat 2">cat ID 2</a>
</li>

Formatierung via CSS

Um ein horizontales Menu zu erzeugen, muss nun via CSS formatiert werden. Für das Beispiel, welches in der Demo gezeigt wird, nutze ich den folgenden Beispielsyntax.


	#csstabs {
	margin: 0;
	padding: 0 0 25px 10px;
	border-bottom: 1px solid #009900;
	}
	
	#csstabs li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
	font-size: 1em;
	line-height: 1.2em;
	}
		
	#csstabs a:link,
	#csstabs a:visited {
	float: left;
	font-weight: 700;
	margin: 0 10px 4px 10px;
	border-bottom: 4px solid #fff;
	padding-bottom: 2px;
	text-decoration: none;
	color: #9c9;
	}
	
	#csstabs a.current-cat:link,
	#csstabs a.current-cat:visited,
	#csstabs a:hover {
	border-bottom: 4px solid #009900;
	padding-bottom: 2px;
	background: #fff;
	color: #009900;

Comments are closed.