Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Anzeige
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.
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>
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>
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.
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>
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;
Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.
händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>
Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.
E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.
bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 892 Beiträge, 16496 Kommentare in 14 Kategorien und 450 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
20. August 2008 um 11:57
Ist leider OT, aber ich hab eben, dass du deinen Feed um einen Zusatz erweitert hast "Danke für das Aboonieren meines Feeds". Diesen finde ich sehr freundlich =)
20. August 2008 um 12:01
@Latita: dieses kleine DANKE ist schon sehr lange drin, danke der Rückmeldung!
20. August 2008 um 12:06
Oh wei ^^ das ist ja fast schon peinlich. Es ist mir aber heute erst aufgefallen und musste gleich lächeln
20. August 2008 um 14:37
sehr guter artikel. ich muss sagen das ich danach schon gesucht habe! und wie immer findet man es bei bueltge
danke sehr!
21. August 2008 um 09:09
Ich überleg ja schon seit einiger zeit, in meinen Blog oben eine horizontale Navi zu machen. Es sollen einfach bestimmte Bereiche so besonderes Augenmerk bekommen, weil sie sich auch inhaltlich-konzeptionell abheben sollen. Weil ich mir vorstellen kann, dass es auch anderen so geht, dachte ich mir, schreib ich direkt mal ein Plug-In dafür. Dank bueltge.de hab ich jetzt schon mal erste Anhaltspunkte. Frank, magst du mir trotzdem helfen, wenn es soweit ist?
21. August 2008 um 09:16
@Bastian: Wenn die Zeit es zulässt, gern.
21. August 2008 um 10:11
Merci im Voraus! Keine Sorge, ich habe den Anspruch, dass möglichst alles selbst zu machen und auch nicht gleich beim ersten Problem hinzuwerfen.
29. August 2008 um 10:29
Cool! Danke! Funktioniert!
Ich hatte Dich vor einiger Zeit (während Deines Urlaubes (ähem)) wegen dieser Frage angeschrieben.
Ich bleibe mal bei den Seiten: Das exclude funktioniert leider nur solange, soweit es keine Subpages gibt, wenn ich nämlich eine Hauptseite mit Unterseiten ausschließe, werden knallhart nur die Subseiten angezeigt, was ja auch nicht gewollt ist.
Ich hab noch keine Lösung gefunden, vielleicht hast Du eine?
mfG Hartmut
29. August 2008 um 14:10
P.S. zu meinem letzten Kommentar
Um Unterseiten von der Navigation auszuschließen:
&& $post->post_parent hinzufügen3. Mai 2009 um 23:41
Danke für diesen tollen Beitrag!
22. Juni 2009 um 14:36
das ist ja wunderbar!:) Danke für diesen Beitrag, er wird mir eigentlich sehr nützlich sein. Tolle Seite, weiter so!
31. Juli 2009 um 12:33
Mal wieder ein sehr schöner und hilfreicher Artikel. Immer wenn ich auf diese Seite stoße finde ich was ich suche.
Nächstes Mal wenns um WordPress Themen geht suche ich gar nicht erst auf Google, sondern gleich hier
Gruß
Roman
2. September 2009 um 16:55
1-A Beitrag! Danke!!
7. Dezember 2009 um 03:30
wirklich nettes tutorial! sowas hab ich gesucht... allerdings würde ich das ganze gerne mit grafiken machen und weiß nicht so recht wie
ich habe 3 seiten=3 grafiken im header:
home,bilder,kontakt
bei active soll bei jeder seite ein anderes bild sein..
4. März 2010 um 17:22
Mal wieder ein sehr interessanter Artikel, vielen Dank!
8. Mai 2010 um 18:52
Moin,
Habe es auch mit grafiken gemacht, leider wird current auch nicht angezeigt..
dachte hier find ich jetz die lösung mit dem current_page_item,
the search goes on...
aber vertikale navi ist gebookmarkt
7. Juni 2010 um 15:52
Ok, nutze dieser version:
<li>Impressumklappt auf den Unterseiten ganz gut nur wird die für die Startseite immer die .current gesetzt, da diese keinen Namen hat sondern einfach die das index.pho geladen wird. Wo kann ich der startseite einen Namen geben - wie z.B. bei der Unterseite 'kontakt' ?
Mercie
felix
7. Juni 2010 um 16:37
@Felix: entweder einen statischen Link hinzufügen, oder die Startseite als Page anlegen und damit im Menu haben, diese Seite setzt du dann in den Einstellungen --> Lesen als Startseite.
27. August 2010 um 12:30
Hallo Frank,
tolle Seite. Oft bin ich hier schon fündig geworden, wenn es um WordPress geht.
Seit WP3.0 arbeite ich viel mit den Custom Post Types. Ein Problem konnte ich bis jetzt nicht bewältigen: die 'wp_list_pages(post_type=xyz)' liefert keine Klasse current_page_item / current o.ä. . Obige Lösung liefert kommt eben nur für die Hauptnavigation in Frage.
Hättest du vielleicht eine Idee?
Vielen Dank schonmal