Breadcrumb-Navigation mit WordPress
Breadcrumbs (Brotkrumen) sind eine gute Möglichkeit, um Besuchern einer Webseite zu zeigen, wo sie sich gerade innerhalb einer Webseite und deren Struktur befinden. Auch in WordPress braucht man das immer mal wieder, deshalb gibt es im Folgenden einen möglichen Lösungsweg für eine entsprechende Navigation.
Grundsätzlich will man mit einer solchen Brotkrümelnavigation den Besuchern zeigen, auf welchem Weg sie sich gerade befinden und ihnen dazu die Möglichkeit geben, immer zur letzten „Kreuzung“ zurück zu gehen. Deshalb sind die Schritte vor der jetzigen Seite meist verlinkt, was natürlich alles nichts Neues mehr ist. Für WordPress gibt es dazu auch einige Plugins, wer das allerdings in ein Theme integrieren möchte, dem kann der folgende Quellcode vielleicht etwas helfen.
//[breadcrumbs]
// Erzeugt eine Liste mit Breadcrumbs bis hoch zur Startseite
function flo_breadcrumbs() {
$divider = ' → ';
$home = get_option('page_on_front');
$child = $post->ID;
$ancestors = get_post_ancestors($child);
$path = '';
$output .= '<a href="'.get_option('home').'">'.get_bloginfo('name').'</a>'.$divider;
foreach($ancestors as $parent) { $path = '<a href="'.get_permalink($parent).'">'.get_the_title($parent).'</a>'.$divider.$path; }
$output .= $path.get_the_title($child);
return $output;
}
add_shortcode('breadcrumbs', 'flo_breadcrumbs');
Zur Erklärung: Zunächst wird ein Divider, also ein Trennsymbol für die einzelnen Punkte festgelegt. Ich habe mich in diesem Fall für einen Pfeil nach rechts entschieden, das kann aber natürlich alles mögliche sein.
Dann werden Start- und aktuelle Seite ermittelt und, das ist eine mögliche Lösung, über die Funktion get_post_ancestors() (siehe WordPress Codex), die Hierarchie von der aktuellen Seite aufwärts ermittelt. Denkbar wäre auch ein rekursiver Ansatz, bei dem solang das Elternelement ermittelt wird, bis man bei $home angekommen ist, diese Mühe wird uns hier allerdings abgenommen.
Über die Variablen $path und $output wird in einer foreach-Schleife die Navigationsstruktur aufgebaut, get_permalink() und get_the_title() liefern die notwendigen Namen und Pfade dafür.
Zu beachten ist, dass get_post_ancestors() die Hierarchie „verkehrt herum“, d.h. von der aktuellen Seite Richtung Startseite, ausgibt, deshalb werden neue Angaben hier vor den bereits existierenden $path gesetzt.
In diesem Beispiel wird dann breadcrumbs auch als Shortcode hinterlegt und ist damit über [breadcrumbs] seitenweit verfügbar und kann an beliebiger Stelle eingesetzt werden. In einem Theme könnte man das natürlich auch fest integrieren und würde dann den Shortcode weglassen.
Wer so etwas mal braucht, kann sich hier also gerne bedienen. Und es wäre natürlich schön zu erfahren, wo der Code dann überall im Einsatz ist.
Über mich
Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.
Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.
Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.
Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.