Du bist hier: bueltge.de » test »
Dieses ist lediglich ein Testmarkup zum Darstellen einer horizontalen Navigation der Kategorien mit Hilfe der Webpuplishing-Software WordPress.
Der Beitrag zur dieser Demo ist im Artikel „Dynamisches Menü mit Hervorhebung unter WordPress“ zu finden.
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>
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.
Jeder erzeugter Link bekommt die Klasse cat-item, wodurch der Link einfach angesprochen werden kann.
Ein enstandener 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>
Die Formatierung der Liste in ein horizontales Navihationsmenu sieht exemplarisch wie folgt aus.
#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;
Die Beispieldatei steht als Download zur Verfügung, so dass das Beispiel genutzt und verändert werden kann.
Download: wp_css_tabs.txt
Queryzeit: 2.885E-5 Prozesszeit: 5.579E-5