Feb 28, 2012

WordPress Breadcrumb Navigation ohne Plugins

Kategorie: web-development

Da ich mittlerweile mehr WordPress Plugins installiert habe als für das Blog gut ist und ich die volle Kontrolle über meine Breadcrumbs in WordPress haben möchte, war ich auf der Suche nach einer geeigneten Möglichkeit die Breadcrumb Navigation ohne ein Plugin in WordPress einzubauen.

WordPress Breadcrumb Grundlösung

Bei wpti.ps habe ich dann letztendlich die perfekte Grundlage für die Plugin-lose Implementierung der WordPress Breadcrumb Navigation gefunden.

Was mir hier gefehlt hat ist, dass die WordPress Breadcrumb nicht in den Kategorien-Seiten erschien und der eigentliche Post selbst nicht in der WordPress Breadcrumb enthalten war. Also habe ich kurzerhand das Skript angepasst und mir die fehlenden Attribute dazugebaut

WordPress Breadcrumb Navigation ohne Rich-Snippets

Das Ergebnis schaut letztendlich später so aus:

wordpress breadcrumb ohne plugin

Dazu muss der folgende Sourcecode am Ende der functions.php im jeweiligen WordPress Theme Verzeichnis hinzugefügt werden und im Template an passender Stelle mit <?php echo write_breadcrumb(); ?> aufgerufen werden

/**
 * Retrieve List of Breadcrubms without Rich-Snippets Option
 */
function write_breadcrumb() {
  $pid = $post->ID;
  $trail = '<a href="/">Home</a>';
 
  if (is_front_page()) {
        // do nothing
  }
  elseif (is_page()) {
   $bcarray = array();
   $pdata = get_post($pid);
   $bcarray[] = ' &raquo; '.$pdata->post_title."\n";
   while ($pdata->post_parent) {
     $pdata = get_post($pdata->post_parent);
     $bcarray[] = ' &raquo; <a   href="'.get_permalink($pdata->ID).'">'.$pdata->post_title.'</a>';
   }
   $bcarray = array_reverse($bcarray);
   foreach ($bcarray AS $listitem) {
     $trail .= $listitem;
   }
  }
  elseif (is_single()) {
   $pdata = get_the_category($pid);
   $adata = get_post($pid);
   if(!empty($pdata)){
     $data = get_category_parents($pdata[0]->cat_ID, TRUE, ' &raquo; ');
     $trail .= " &raquo; ".substr($data,0,-8);
   }
   $trail.= ' &raquo; '.$adata->post_title."\n";
  }
  elseif (is_category()) {
   $pdata = get_the_category($pid);
   $data = get_category_parents($pdata[0]->cat_ID, TRUE, ' &raquo; ');
   if(!empty($pdata)){
     $trail .= " &raquo; ".substr($data,0,-8);
   }
  }
  return $trail;
}

WordPress Breadcrumb Navigation mit Rich-Snippets

Damit nicht nur eure Besucher der Seite etwas von der Breadcrumb Navigation haben, sondern auch der Google Bot diese Navi in die Suchergebnisse einbauen kann gibt es die Möglichkeit die Breadcrumb Leiste mit Rich Snippets auszuzeichnen. Das schaut im Ergebnis dann in der Google Suche so aus:

wordpress breadcrumbs with rich-snippets without a plugin

Quellcode

Der besseren Lesbarkeit halber habe ich den Code für die Rich-Snippets Integration der Breadcrumbs in einer externen Datei hinzugefügt. Hier könnt ihr den Code downloaden.

CSS aktualisieren

Folgende CSS Styles müsst ihr nur noch eurem Stylesheet hinzufügen, fertig!

#breadcrumb .item{
  display: inline;
}

Wordpress Breadcrumb mit Rich Snippet und ohne Plugins

Über den Autor

Ich, Viktor Dite bin Shopadmin, Webdeveloper und ein Geek, der das Auge fürs Alltagstaugliche nicht verlieren möchte. Hier im Blog versuche ich beide Welten unter einen Hut zu bringen, so dass auch nicht “Digital Residents” die Möglichkeit bekommen, das Meiste aus der digitalen Welt herauszuholen.

Gefällt Dir der Beitrag?

Wenn Dir der Beitrag gefällt, freue ich mich über jedes Share oder ein Kommentar!

letztes Breadcrumb Element verlinkt

Breadcrumb letztes Element verlinkt

letztes Breadcrumb Element nicht verlinkt

Breadcrumb letztes Element nicht verlinkt

NichtDieWelt:
Kommentar geschrieben am 04.01.2013

Eine interessante Anleitung, die bei anderen auch zu funktionieren scheint. =)
Ich habe in meinem Skript, das ich fremderworben habe, bereits eine Breadcrumbstruktur, wie es schein. Besteht da eine Möglichkeit, die vorhandene in diese Vorgehensweise zu integrieren – denn im snippet-Tool werden keine Krümel angzeigt.

Vielen Dank.

Viktor Dite:
Kommentar geschrieben am 04.01.2013

kommt drauf an, woher die Breadcrumb bei Dir kommt.
Möglich ist aber alles. Die Frage ist nur, ob das Plugin oder das Theme beim Update dann überschrieben wird, oder man die Funktion auslagern kann.

Ok, vielen Dank. Ich versuche, eine Lösung zu finden.

Ich sehe übrigens gerade, dass Du mehrere Plugins hast, die sich gegenseitig relativieren!
Bsp: Verschiedene Plugins spucken unterschiedliche og:image Meta Informationen aus!
Dann hast Du multiple Descriptions und und und…

Klingt einleuchtend.
Ist schon zu viel verlangt, aber hättest Du einen Tipp, wie ich herausfinde, welche sich überschneiden?

Danke.

Auf jeden Fall “Add-Meta-Tags WordPress plugin” mit “platinum seo pack”
“Add-Meta-Tags WordPress plugin” kannst Du Dir in diesem Fall sparen!

“SHR Open Graph Tags” kollidiert scheinbar mit im Theme manuell gesetzten Open Graph Tags

Vielen lieben Dank, Viktor!
Ich versuche, die Probleme zu eliminieren.

Ein schönes Wochenende wünsche ich.

Paul:
Kommentar geschrieben am 09.02.2013

Danke dir für diesen tollen Beitrag,

Danke dir

Hendrik:
Kommentar geschrieben am 01.03.2013

Hi,

was genau mache ich mit dem Rich Snippets Code? Bringt es mehr, wenn Google die Breadcrumbs “indexiert”?

Grüße,
Hendrik

Dirk:
Kommentar geschrieben am 22.04.2013

Entdeckt, eingebaut und funktioniert. Super Lösung, danke für den Tipp. Schön das man dafür kein Plugin benötigt…

Connie:
Kommentar geschrieben am 25.04.2013

Ich hab das eingebaut, nachdem ich erstmal das Text-Widget PHP-fähig gemacht habe (dank http://www.nerds-first-choice.de/wordpress/tipps-und-tricks/php-innerhalb-von-widgets-in-wordpress-erlauben/ ) und dann die Breadcrumbs in eine Widget-Area einbauen konnte

klappt alles. Ich habe aber ein Problem damit, daß fest “HOME” ausgegeben wird, was muß man anpassen, wenn der Menu-Text der Startseite ausgegeben werden soll?

Ansonsten alles prima! Merci,

Connie

Viktor Dite:
Kommentar geschrieben am 25.04.2013

in der sechsten Zeile das Home ersetzen

$trail = '<_a href="/">Home<_ /a>';

Viktor, das ist eine schnelle Antwort, merci!

Aber: durch was ersetzen? Das ist meine Frage…

ich hab das schon in der Zeile 6 gefunden, aber ich brauch für eine geplant mehrsprachige Seite eine Variable, wie krieg ich den jeweiligen Menu-Text da hinein? Das möchte ich gerne wissen, wäre das Sahnehäubchen ;=)

ah sorry, überlesen. Kann ich Dir jetzt adhoc nicht sagen. Muss ich heute Abend mal schauen.

Wordpress als CMS voll ausreizen » miZine:
Kommentar geschrieben am 01.05.2013

[...] so dass man sich solche etweder selbst basteln oder per Plugin einbinden sollte. Ich rate zur WordPress Breadcrumb ohne Plugin, da ich generell kein Freund von Plugins bin, deren Funktionalität schnell selbst umgesetzt werden [...]

Dominik Horn:
Kommentar geschrieben am 14.06.2013

Ich habe noch eine Abfrage eingebaut, ob die write_breadcrumb-Funktion auch existiert:

Das ersetzt den von dir geposteten Code an der entsprechenden Stelle im Template:

Wenn alles korrekt eingebunden ist, ist aber kein Unterschied zu merken.

Vielen Dank für das Tutorial, Viktor.