Sidebar
ein-/ausblenden

Brotkrumen-Navi für WordPress

Plugin für WordPress SEO

Anzeige

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 · 26 Kommentare · Kommentar schreiben
Tags: , , , , ,
read: 11267 · today: 6 · last: 13. März 2010
Kommentar-Feed zum Artikel · TrackBack URL

«
»

25 Kommentare und 1 Trackback zu „Brotkrumen-Navi für WordPress“

  1. 1
    Pingback von Wo bin ich? » Cowboy of Bottrop
    30. Juli 2008 um 12:52
  2. 2
    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!

  3. 3
    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?

  4. 4
    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.

  5. 5
    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. :)

  6. 6
    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() . '';
}
  7. 7
    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!

  8. 8
    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.

  9. 9
    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. ;-)

  10. 10
    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 :(

  11. 11
    Kommentar von Frank Bültge
    8. Oktober 2008 um 19:26

    Ich mache sowas per CSS, dafür ist es da.

  12. 12
    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.

  13. 13
    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.

  14. 14
    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 :)

  15. 15
    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

  16. 16
    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

  17. 17
    Kommentar von Frank Bültge
    7. Januar 2009 um 16:43

    @bob: ich vermute einen Tippfehler, denn hier wird ja PHP bzw. HTML dargestellt.

  18. 18
    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

  19. 19
    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('');
			}
		}
	}
}
  20. 20
    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

  21. 21
    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

  22. 22
    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 ;)

  23. 23
    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

  24. 24
    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.

  25. 25
    Kommentar von hannes
    8. August 2009 um 20:07

    Super Frank, vielen Dank :) Läuft sicher und stabil.

  26. 26
    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?

Überlastung, Kommentare sind vorübergehend geschlossen

Ich bin urlaubsreif, ersticke in Arbeit und damit auch für die Leser des Weblogs nicht zu erreichen. Bitte geduldet euch ein wenig mit Supportanfragen.
Leider muss ich die Kommentarfunktion deaktivieren, ansonsten würde ich weiter in Arbeit ersticken oder die Anfragen nicht nach bestem Gewissen beantworten.

Vielen Dank für das Verständnis!