Breadcrumb-Navigation ohne Plugin

Geschrieben von am 26. Okt 2009 in Tipps & Tricks - 20 Kommentare

Ein jeder wird sie kennen: Die sogenannte Breadcrumb-Navigation.

Diese Form der Navigation ist auf fast jeder wichtigen Seite zu finden und sie bietet dem Besucher einen echten Mehrwert: Da sie fast immer direkt über der Artikel-Überschrift zu finden ist, weiß der Besucher ganz genau, wo er sich gerade befindet.

In welcher Kategorie, in welchem Artikel. Und er kann ohne Probleme direkt wieder in die Kategorie wechseln. Und seien wir doch mal ehrlich: Cool sieht das Ganze auch noch aus.

Stellt sich die Frage: Warum keine solche Breadcrumb-Navigation auch in WordPress nutzen?! Das dachten sich auch schon andere und deshalb gibt es Plugins für WordPress, die eine solche Navigation schaffen zu Genüge.

Aber warum ein Plugin benutzen (das den eigenen Blog vielleicht noch lahmer macht), wenn man sich das auch selbst bauen kann?! Wie das geht, will ich hier kurz mal vorführen.

Schritt 1: functions.php aufrufen

In der functions.php bietet WordPress von Haus aus die Möglichkeit, eigene Funktionen anzulegen.Diese Möglichkeit wollen wir hier nutzen.

Wer noch keine functions.php der legt sich einfach eine an! Eine neue Datei (beschreibbar, um sie live ändern zu können) reicht vollkommen aus.

PHP-Funktion anlegen

Da wir das Ganze (wie auch WordPress eh schon) mit PHP machen werden, lege bitte als ersten Schritt das äußere Gerüst für die Funktion an.

Das ist ganz leicht:
<?php steht am Anfang und
?> steht am Ende.

Dem Kind einen Namen geben

Damit wir uns gleich leicht merken können, legen wir jetzt die Funktion als solches an:
function brotkrumen() {

Unsere Funktion heißt jetzt „brotkrumen“, die geschweifte Klammer öffnet die Funktion.

Blog-Informationen bereitstellen

Aus SEO-Sicht und für die Navigation selbst macht es total viel Sinn, dass wir in der Breadcrumb-Navigation unsere Blog-Informationen bereitstellen. Das ist der nächste Schritt:

$Blogheimat = get_bloginfo('url');
$Blogname = get_bloginfo('name');

Die Variable „Blogheimat“ gibt die URL deines WordPress-Blogs an, die Variable „Blogname“ hingegen den Titel deines Blogs.

Ausgabe festlegen

Die Breadcrumb-Navigation soll ja nicht auf jeder Seite auftauchen. Das musst du der Funktion (und damit WordPress) aber auch sagen.

In unserem Fall wird die Navigation nur auftauchen in:

  • jeder Kategorie (category)
  • jedem einzelnen Artikel (single)
  • jeder Seite (page)

Damit das geschieht, müssen wir die Funktion um diesen Schnippsel erweitern:
if(is_category() || is_single() || is_page()) {
Dieser Schnippsel prüft vor Ausgabe der Funktion, ob es sich bei der ausgegebenen „Datei“ um eine Kategorie, einen einzelnen Artikel oder eine Seite handelt. Ist das nicht der Fall, so wird die Funktion auch nicht weiter aktiv.

Navigation anzeigen

Das war es schon fast, jetzt müssen wir nur noch dafür sorgen, dass die Navigation auch angezeigt wird.

echo "<p>";
echo "<a href=\"$Blogheimat\" title=\"$Blogname\">$Blogname</a>";
echo " &raquo; ";

In diesem ersten Schritt geben wir als ersten Teil der Navigation den Namen des Blogs aus und verweisen auf die Stamm-URL der WordPress-Installation.
Dafür brauchen wir die eben festgelegten Variablen „Blogheimat“ und „Blogname“.

Im zweiten Schritt wird jetzt festgelegt, was wann angezeigt wird.

Befindet sich der Besucher gerade in einer Kategorie, so soll er ja auch nur sehen, dass er in der Kategorie ist. Das passiert so:

if(is_category()) { echo single_cat_title(); }
Damit wird abgefragt, ob es sich bei der ausgegebenen Seite um eine Kategorie handelt. Und wenn das so ist, dann wird der Titel/Name dieser Kategorie angezeigt.

Wenn der Besucher aber in einem Einzelartikel ist, dann soll er ja den Titel des Artikels sehen und dazu die Kategorie, in der der Artikel abgelegt ist:
if(is_single()) { echo the_category(', '); echo " &raquo; "; echo the_title(); }

Und wenn er sich auf einer statischen Seite befindet, so soll er auch nur den Titel dieser Seite sehen:
if(is_page()) { echo the_title(); }

Fertig

Wenn das alles gemacht ist, dann müssen wir nur noch den geöffnet Absatz schließen, die Funktion beenden und (wie oben bereits erwähnt) PHP „beenden“.

Geht so:
echo "</p>";
}
}
?>

Navigation einbauen

Alles was jetzt noch fehlt, ist die Navigation auch einzubauen. Das macht am meisten Sinn direkt über der Artikel-Überschrift.

Dafür müssen wir dann auch nur unsere Funktion in der entsprechenden Template-Datei (single.php etwa) aufrufen:
<?php brotkrumen(); ?>

Und schon läuft alles wunderbar!

Noch Fragen?

Wenn nicht alles wunderbar läuft, so schreib hier doch einfach einen Kommentar! 😉

Downloaden

Wer keine Lust hat, sich das alles selbst zu erarbeiten, der kann sich den Quelltext hier anzeigen lassen oder eine functions.php mit dem Inhalt der Breadcrumb-Navigation herunterladen.

Quelltext anzeigen Quelltext anzeigen.

Funktion herunterladen Funktion herunterladen.

Bild: Horia Varlan (Lizenz, 22.04.2011)

Bitte sozial teilen

Wenn dir dieser Beitrag gefallen hat, dann teile ihn doch bitte in den verschiedenen sozialen Netzwerken! Du würdest mir damit sehr helfen!

Über den Autoren

Mein Name ist Christian. Ich blogge bereits seit 5 Jahren - manchmal mehr, manchmal weniger erfolgreich. Weil ich in der Anfangszeit meiner Erfahrungen mit den von WordPress gebotenen Möglichkeiten unzufrieden war, habe ich mir einiges Wissen zu dieser tollen Software selbst beigebracht. Aus diesen Erfahrungen ist das Projekt wpLove.de geboren. Neben WordPress bringe ich mir aber auch das Thema SEO selbst etwas näher.

20 Kommentare zu "Breadcrumb-Navigation ohne Plugin"

  1. Daniel 28. November 2009 um 19:39 · Antworten

    Okay,
    das teste ich mal an!
    Danke!

  2. Cornelius 10. Mai 2010 um 19:42 · Antworten

    Ein guter Beitrag, der mich beeinflusst hat das sinnvoll zu nutzen und gleichzeitig eine recht komplexe Funktion daraus zu bauen, mit mehrschichtiger rekursiver Breadcrumb. Kann man sogar auch sinnvoll im Title einsetzen!

    Besten Dank!

  3. Bernd 14. September 2010 um 15:31 · Antworten

    Moin, wie kann ich es ralisieren, dass der Blogname auch auf der Startseite angezeigt wird?

    Hab es jetzt mit „if(is_home()) { echo get_bloginfo(’name‘); }“ probiert, klappt nicht!

    Danke und beste Grüße
    Bernd

  4. Bernd 14. September 2010 um 15:34 · Antworten

    Habe es selbst hin bekommen.

    In die Zeile:
    if(is_category() || is_single() || is_page()) {

    Einfach ein:
    is_home()

    einfügen…

    beste Grüße

  5. Bernd 14. September 2010 um 15:52 · Antworten

    …and the problems will not stop!

    Wie schaffe ich es nun auch auf den Archiveseiten die Brotkrumen richtig anzuzeigen?

    Ich habe nun „is_archive“ als Ausgabe bestimmt und folgenden Code benutzt, um auf einer Archiveseite die Breadscrumb anzuzeigen:
    if(is_archive()) { echo “ » „; echo the_time(‚F Y‘); }

    Funktioniert soweit auch, nur wird jetzt in jeder Kategorie das Datum mit angehängt…

  6. adkorte 16. September 2010 um 08:05 · Antworten

    Ja, du hast ja auch angegeben, dass das Datum mit angezeigt wird: echo the_time(‘F Y’);

    Oder verstehe ich dich jetzt falsch?

  7. Bernd 16. September 2010 um 10:20 · Antworten

    Jain, das Datum soll angezeigt werden sobald sich der User in einem Monatsarchiv befindet, das wird es perfekt. Aber auch wenn der User sich in einer Kategorie befindet…

    Veranschaulichung
    Der User ist in einer Kategorie:
    Blogname.de » Kategorie » September 2010

    Der User ist in einem Archiv:
    Blogname.de » September 2010

    beste Grüße

  8. Bernd 16. September 2010 um 10:41 · Antworten

    PS: Mir ist gerade ein kleiner Fehler aufgefallen…

    Wenn man sich auf Deiner Seite, in einer Kategorie, in einem Artikel oder sonst wo aufhält und auf den Namen eines Kommentators klickt, der keine URL hinterlegt hat, wird man auf die selbe Seite nochmal geleitet.

    Warum nicht einfach mit einer Sprungmarke zu dem Kommentar verlinken?

  9. NetzBlogR 12. Oktober 2010 um 05:02 · Antworten

    Der Artikel ist schon etwas älter, ich möchte mich aber trotzdem für das Tutorial bedanken, weil es mir gerade sehr viel Denkarbeit abgenommen hat und super funktioniert.

  10. adkorte 12. Oktober 2010 um 10:49 · Antworten

    Vielen Dank für die Blumen! 😉
    Ich freue mich aber als „Gegenleistung“ immer wieder über jeden Link und jede Erwähnung! 😉

  11. Fini 7. November 2010 um 13:28 · Antworten

    Ich bin heute auch auf die Seite gestoßen und es hat mir sehr weiter geholfen. Genau das was ich suchte.

  12. detlef 21. August 2011 um 19:28 · Antworten

    hallo,

    auch sage erstmal „dankeschön!“ für die anleitung.

    ohne das getestet zu haben, gefällt mir die einfachheit, aber es stellen sich mir folgende fragen:
    1. bekomme ich denn, wenn ich ein paar geschachtelte statische seiten habe, auch die übergeordneten „eltern“seiten im pfad aufgeführt?
    2. die jeweils aktuelle seite soll kein link sein, sondern nur genannt werden (stichwort „deppenlink“). ist das hier der fall? wenn nein, wie mache ich das?
    3. funktioniert die angegebene vorgehensweise auch problemlos, wenn ich eine statische seite als startseite vorgebe und die artikelübersichtsseite anders heißt, z. b. „blog“? wenn nein, wo sind selcherart änderungen vorzunehmen?
    4. kann man das auf die gleiche weise auch mit den tags statt mit den kategorien machen?

    weitere fragen fallen mir bestimmt noch ein…
    😉

    vg,
    detlef

    • Adrian 22. August 2011 um 10:36 · Antworten

      Grundsätzlich kann man alles so anpassen, wie du das möchtest. Und die meisten sollten auch schon so funktionieren, wie du das willst. 😉
      Das Einfachste wäre, wenn du die Funktion erst einmal austestest und mir dann sagst, was für dich nicht gut ist. Dann kann ich dir bestimmt bei der Anpassung unter die Arme greifen. 😉

  13. Sandy 13. Dezember 2011 um 18:39 · Antworten

    Hi ihr,

    ist es auch möglich eine Breadcrumb-Navi einzubauen, wenn man Artikel in 2 oder mehreren Oberkategorien aufgeführt hat? Zum Beispiel ein Artikel über eine Studie wird in Reiter Studien aber auch im Reiter Aktuelles aufgeführt.

    Danke un viele Grüße,
    Sandy

    • Adrian 14. Dezember 2011 um 17:03 · Antworten

      Hm, ich bin grad überfragt, habe nur leider aktuell auch nicht die Zeit um das mal zu testen. Ich würde es an deiner Stelle sonst einfach mal ausprobieren. Grundsätzlich sollte es aber schon funktionieren, bzw. umsetzbar sein. Nur bei meiner Lösung hier bin ich selbst gerade unsicher. 😉

  14. Alesandra 21. Dezember 2011 um 17:05 · Antworten

    Danke dafür, das habe ich schon immer versucht und nie hinbekommen und dann ist es auch noch so einfach. Oh man. 🙂

    Daumen hoch für die Erklärung, die so gar ich verstehe, wo ich meistens mit Quellcode auf dem Kriegsfuß stehe.

    LG
    Alesandra

Trackbacks zu diesem Artikel

  1. Hier geht’s lang! – Navigation optimieren » Navigation, Besucher, Seite, Google, Lizenz, Breadcrumb-Navigation » GeldimWWW.de
  2. Hier geht’s lang! – Navigation optimieren » Navigation, Besucher, Seite, Google, Sache, Märchen » wpLove.de
  3. Unendliche Weiten… Anwendungsmöglichkeiten für WordPress » WordPress-Themes, CMS, WordPress als Immobilienseite, Online-Portfolio, Lexikon-WordPress-Theme, Magazin » wpLove.de
  4. Eine richtig leckere Brotkrume gefunden › Netzexil.de

Kommentar hinterlassen

XHTML Du kannst diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>