Brotkrumen-Navi für WordPress

Inhalt:

WordPress Themes sind sehr flexibel, was unter anderem dem schuldig ist, dass man einfach und unkompliziert PHP nutzen kann. Die functions.php eines Themes kann beliebig bestückt werden und so kann man dieverse Funktionen ohne großen Aufwand ins Boot holen.

In dieser kleinen Serie von Tipps und Hacks zum gestalten von Themes will ich diesmal zeigen, wie man eine einfache Brotkrumennavigation, auch unter dem englischen Begriff Breadcrumb bekannt, in das Theme baut. Diese Form der Navi hat sich in einigen Bereichen bewährt und wird oft als Mehrwert empfunden.

Breadcrump Beispiel

Schon vor weg; wer nicht per Funktionen schrauben will, es gibt auch diverse Plugins, die diese Aufgabe erledigen.

So geht's

Nun aber zur Lösung ohne Plugin, direkt im Theme. Dazu muss die folgende Funktion in die schon angesprochene functions.php kopiert werden; damit steht sie dann im Theme zur Verfügung und kann überall genutzt werden. Der Aufruf findet dann beispielsweise in der header.php statt und wird mit Hilfe von CSS in das rechte Licht gerückt. Zum Ansprechen per CSS habe ich die Klasse breadcrumb vergeben. Ein Beispiel aus meinem Entwicklungsblog seht ihr im obigen Bild.


function fb_breadcrumb_nav() {
	if ( !is_home() ) {
		echo '<p class="breadcrumb">&raquo; <a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> &raquo; ";
		if ( is_category() || is_single() ) {
			the_category('title_li=');
			if ( is_single() ) {
				echo " &raquo; ";
				the_title();
			}
		} elseif ( is_page() ) {
			echo the_title() . '</p>';
		}
	}
}

Die obige Funktion kann natürlich beliebig verändert werden. Es ist lediglich ein einfaches Beispiel und soll die Idee und deren Funktion verdeutlichen. Man kann die Strukturierung und Ausgabe mit Hilfe meiner geliebten Conditional Tags beliebig weit treiben. Die Funktion ist so schon ohne Anpassungen nutzbar und sollte den Nutzer nicht vor große Probleme stellen.
Die Mischung aus HTML und PHP kann sicher für den einen oder anderen Leser unübersichtlich erscheinen, mir war aber die strukturelle Darstellung der Funktion wichtig und so habe ich das HTML nicht ausgelagert. natürlich kann man das tun und beispielsweise die „echos“ an Variablen übergeben.


<?php if (function_exists('fb_breadcrumb_nav')) { fb_breadcrumb_nav(); } ?>

In eigener Sache

Auch mit dieser Lösung wünsche ich viel Spaß beim Experimentieren oder Nutzen; Feedback ist ebenfalls wie immer gern erwünscht.
Bevor es Supportanfragen gibt, bitte erst mal versuchen durch den Code zu steigen, ich ersticke zum Teil in Mails und kann viele kaum noch händeln auf Grund von Zeitmangel. Die wenige Freizeit möchte ich gern mit Ideen, Umsetzungen und Lösungen nutzen.

Artikel #701, 30. Juli 2008 · Themes, Tipps, WordPress · 32 Kommentare
Tags: CSS, PHP, StyleSheet, Theme, WordPress, WP
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

32 Kommentare zu „Brotkrumen-Navi für WordPress“

1
Kommentar von Moritz
30. Juli 2008 um 13:11
Auf jeden Fall gut zu wissen, dass es geht. Bei meinem nächsten Relaunch werde ich dafür sicher Verwendung finden!
2
Kommentar von Markus
30. Juli 2008 um 13:44
Danke für diesen simplen Code, da hätte man auch selber drauf kommen können

Ich habe es bei mir intrgriert, und auch um is_tag(), is_day(), is_month() und is_year() erweitert. Das einzige, was mir Probleme macht, ist die Anzeige von Unterseiten nach dem Schema "Home > Impressum > Kontakt".

Kannst Du mir den Schubs in die richtige Richtung geben?

Kommentar von Frank Bültge
30. Juli 2008 um 15:15

Die Abfrage einer Unterseite:

// Get $post if you're inside a function
global $post;

if (is_page() && $post->post_parent ) {
	// This is a subpage
} else {
	// This is not a subpage
}

Eventuell kannst du damit abfragen, nicht getestet.

4
Kommentar von sebastian
30. Juli 2008 um 16:43
Vielen Dank für den Tip. Da ich gerade (unter anderem) mit deiner Anleitung dabei bin ein eigenes Theme zu erstellen werde ich die Navigation wohl gleich mit einbauen.
5
Kommentar von Markus
30. Juli 2008 um 18:03
Danke Frank, das war der richtige Schubs. Hier der relevante Teil der Funktion, wie sie jetzt bei mir realisiert ist:
```
} elseif (is_page() && $post->post_parent ) {
       echo ''. get_the_title($post->post_parent) . '';
       echo " » ";
       echo the_title() . '';
}
```
6
Kommentar von Florian
31. Juli 2008 um 10:29
Genau das hatte ich gesucht. Vielen Dank für die einfache und ansprechende Lösung! Bliebe zu überlegen, ob man auch noch eine Anzeige der Seitenhierarchie (Elternseite » untergeordnete Seite) mit einbaut. Das dürfte sich aber mit wenigen Handgriffen erledigen lassen.

Noch einmal: Super Tipp! Danke!
7
Kommentar von Frank Bültge
31. Juli 2008 um 11:29
@Florian: ja, schau mal in die Kommentare, da ist die Lösung schon drin, so dass man es nur kopieren muss.
8
Kommentar von Florian
31. Juli 2008 um 11:38
Habs schon gesehen, kurz nachdem ich den Kommentar abgesendet habe… tja, wer lesen kann, ist klar im Vorteil.
9
Kommentar von maarden
8. Oktober 2008 um 16:00
das ist eine schöne lösung. DANKE. kann man das auch in verbindung mit wp_list_pages einsetzten? ich versuche spacer "|"in eine footer navigation zu setzten: eins | zwei | drei und scheitere kläglich
10
Kommentar von Frank Bültge
8. Oktober 2008 um 19:26
Ich mache sowas per CSS, dafür ist es da.
11
Kommentar von maarden
9. Oktober 2008 um 13:34
stimmt, nur das bedeutet man muss den ersten oder letzten punkt css technisch anpassen, oder? sonst hat man – wie bei deinem footer – das trennzeichen auch vor dem ersten punkt.

das finde ich unschön. besser wäre wp_list spuckt das trennzeichen in einem extra listenpunkt aus, nur nicht nach dem letzten, oder eben gar nicht, wenn es nur einen unter menupunkt gibt.
12
Kommentar von Frank Bültge
9. Oktober 2008 um 14:06
@maarden: ja, dazu könnte man ja eine Klasse vergeben; so mache ich es bei anderen Projekten. Vielleicht wissen da aber diverse CSS- und Web-Profis mehr.
13
Kommentar von Jared
9. Oktober 2008 um 14:58
War grade auf der Suche nach einem Brotkrumen Tutorial für WordPress und wen finde ich da? Einfach spitze. Danke

@Mardeen

Poste doch mal deinen xhtml Code. Dann kann ich dir auch die CSS sagen. Es gibt da je nach Quelltext einige Kniffe
14
Kommentar von bob
7. Januar 2009 um 15:32
hallo,
danke für den tollen tip. komischerweise gibt er bei mir dann die navi so aus:

lass ich das 'title_li=' weg, habe ich eine liste (klar) und es passt zwar, ich brauche aber eben die "normale" ausgabe in einer zeile.
was amche ich falsch?
lg
bob
15
Kommentar von bob
7. Januar 2009 um 15:34
ups sorry, ich habe vor lauter aufregung die ausgabe vergessen. also die ausgabe schaut dann so aus:
» Spanien&title_li= Weissweine
was mache ich falsch?
lg
bob
16
Kommentar von Frank Bültge
7. Januar 2009 um 16:43
@bob: ich vermute einen Tippfehler, denn hier wird ja PHP bzw. HTML dargestellt.
17
Kommentar von bob
7. Januar 2009 um 21:53
hmm, habs nomal kontrolliert, steht genau so da wie im beispiel oben.
hmm hmm - was net weiter...
und bin a ka rookie - also noch an tip?
bei mir steht eindeutig:
the_category('title_li=');
lg
bob

Kommentar von Frank Bültge
7. Januar 2009 um 22:41

@bob: gerade getestet und geht:


if (!function_exists('fb_breadcrumb_nav')) {
	function fb_breadcrumb_nav() {
		if ( !is_home() || !is_front_page() ) {
			_e('&raquo; <a href="') . _e( get_option('home') ) . _e('">') . bloginfo('name') . _e('</a> &raquo; ');
			if ( is_category() ) {
				single_cat_title();
				//the_category(', ');
			} elseif ( is_single() ) {
					the_category(', ') . _e(' &raquo; ') . the_title();
			} elseif ( is_page() ) {
				_e( the_title() . '');
			} elseif (is_page() &amp;&amp; $post-&gt;post_parent ) {
				_e( get_the_title($post-&gt;post_parent) );
				_e(' &raquo; ');
				_e( the_title() );
			} elseif ( is_search() ) {
				_e('Suche nach: ') . the_search_query() . _e('');
			}
		}
	}
}

19
Kommentar von Markus
7. Januar 2009 um 23:49
Also ich habe das mit dem title_li= auch, allerdings nur dann, wenn ein Artikel in 2 Kategorien einsortiert ist. Sieht dann z.B. so aus:

Du bist hier: Home » Awardstitle_li= Internes » Blog der Woche
20
Kommentar von bob
8. Januar 2009 um 15:49
genau! ist bei mir auch der fall! dachte nicht, dass das einen einfluss darauf hat!?
lg
bob
21
Kommentar von subminster
9. Mai 2009 um 03:40
hallo frank, ich habe deine navi bei mir eingebaut und es war eigentlich genau was ich gesucht habe. allerdings besteht bei mir das problem, dass sobald ich den code in die functions.php einfüge, mir sämtliche umlaute und sonderzeichen fehlerhaft dargestellt werden. hast du eine ahnung woran das liegen kann oder wird das etwas templatespezifisches sein woraus der fehler resultiert...?
ansonsten mal daumen hoch für deine entwicklungen, bin schwer begeistert
22
Kommentar von Frank Bültge
9. Mai 2009 um 10:20
Das kann verschieden Ursachen haben. Eventuell ist es in der DB anders codiert, dann muss es in der functions.php erst einen Filter durchlaufen um die Zeichen zu konvertieren. Es empfiehlt sich aber, dass man WordPress im Unicode betreibt, UTF-8
23
Kommentar von Dirk
6. Juli 2009 um 12:57
Wiedermal herzlichen Dank für diesen nützlichen Codeschnipsel mit dem man die Anzahl der Widgets und ihres zum Teil abenteuerlichen Codes reduzieren kann.
24
Kommentar von hannes
8. August 2009 um 20:07
Super Frank, vielen Dank Läuft sicher und stabil.
25
Kommentar von BTTV
31. Dezember 2009 um 11:55
Super Script-Code - Danke dafür!

Nur habe ich verschachtelte Subpage-Konstrukte damit leider nicht zur Anzeige gebracht. Ich habe unter http://www.egracecreative.com/2009/07/08/add-breadcrumbs-to-wordpress-without-a-plugin/ Script-Code gefunden, mit dem ich nun auch verschachtelte Unterseiten perfekt anzeigen kann. Allerdings gefällt mir die Anzeige der Kategorien für Artikel mit o.g. Script wesentlich besser, so dass ich beide Scripts unterschiedlich anzeige (o.g. Code für Artikel und den anderen Code für Seiten).

Wie kann man beide Codes kombinieren? Da kenne ich mich mit PHP leider zu schlecht aus. Kann jemand helfen oder weiß Rat?
26
Kommentar von Lars
29. April 2010 um 22:36
Hallo,

ich habe heute diese klasse Lösung für die Brotkrumen gefunden und experimentiere jetzt schon etwas damit herum. Leider zeigt die Funktion in meinem Projekt nur jeweils die Home-Seite und die aktuelle Seite an, auch in der dritten Unterebene, die dazwischen liegenden Parents werden nicht angezeigt (es geht um statische Pages). Bei den Blogposts funktioniert die Kette einwandfrei. Gibt's einen Tipp dazu?

Ansosnten danke für immer mal wieder super Tipps und Lösungen.

Lars
27
Kommentar von Sven
14. März 2011 um 20:32
vielen Dank Frank, Läuft super, Ist ein sehr nützliches plu-in.
28
Kommentar von donald91
27. März 2011 um 22:17
} elseif (is_page() && $post->post_parent ) { echo ''. get_the_title($post->post_parent) . ''; echo " » "; echo the_title() . ''; }

Hallo und vielen Dank für den Code!
Leider hat auch nach vielen Versuchen das Anpassen von Markus Code für die Anzeige von Unterseiten bei mir nicht geklappt. Kannst du mir evtl verraten wie der komplette Code aussieht? Bei mir wird dann z.T. gar nichts mehr angezeigt...
Vielen Dank für deine Hilfe und die Tipps, deine Seite hilft mir immer sehr weiter.
29
Kommentar von Thorsten
19. April 2011 um 17:49
Hallo Frank, vielen Dank für deinen Blog. Er begleitet mich bei so ziemlich jeder Tätigkeit an Themes für WordPress

Zur Zeit habe ich das selbe Problem wie Lars (Kommentar #27 in diesem Artikel). Ich bekomme mit deinem Code immer nur die Home-Seite und die aktuelle Seite angezeigt. Wie muss denn der Code aussehen damit alle untergeordneten Seiten ausgegeben werden?

Home » Seite » Unterseite 1 » Unterseite 2 » ...

Gruß Thorsten
30
Kommentar von Alex
4. Mai 2011 um 14:47
Toller Codeschnipsel danke dafür. Gibt es ne möglichkeit das title_li= bei der kategoriesierung in mehr als eine Kategorie zum umgehen?
31
Kommentar von Monik
11. September 2011 um 20:15
Hallo,

wie kann ich auf der Startseite z.B. Home in der Breadcremb stehen haben? Mit dem Code bleibt es auf der Startseite ja leer, und ich würde es auch gerne auf der Startseite sehen. Ich würde mich freuen wenn jemand mir dabei helfen kann.
32
Kommentar von Monik
12. September 2011 um 11:54
Also wenn ich den Code hier nutze:
if (!function_exists('fb_breadcrumb_nav')) { function fb_breadcrumb_nav() { if ( !is_home() || !is_front_page() ) { _e('» ') . bloginfo('name') . _e(' » '); if ( is_category() ) { single_cat_title(); //the_category(', '); } elseif ( is_single() ) { the_category(', ') . _e(' » ') . the_title(); } elseif ( is_page() ) { _e( the_title() . ''); } elseif (is_page() && $post->post_parent ) { _e( get_the_title($post->post_parent) ); _e(' » '); _e( the_title() ); } elseif ( is_search() ) { _e('Suche nach: ') . the_search_query() . _e(''); } } } }

und ihn mit den oben genannten Befehl einsetze:

Ist mein gesammtes Backup und Frontend nicht mehr erreichbar,
es kommt eine dicker Fehlermeldung.
Könnte das mal jemand testen und evtl. korrigieren??