Wie erstelle ich eine WordPress Breadcrumb?

Dieser Beitrag ist älter als zwei Jahre. Es kann also sein, dass auch der Inhalt - zumindest in Teilen - bereits veraltet ist.

Breadcrumbs (Brotkrümel) stellen eine zusätzliche Navigation für eine Website oder ein Blog dar und dienen somit Nutzern als Orientierungshilfe. Üblicherweise ist eine Breadcrumb eine Textzeile, die den Pfad von der Startseite zum aktuellen Element anzeigt, also dem aufgerufenen Beitrag oder Archiv. Eine WordPress Breadcrumb befindet sich im Allgemeinen zwischen der Kopfzeile der Website (dem Header) mit der Hauptnavigation und dem Contentbereich, also oberhalb des aktuellen Beitrags oder Archivs.

Der Name Breadcrumb entstand in Anlehnung an das Märchen Hänsel und Gretel, dessen Protagonisten Brotkrümel zum Zwecke verteilten, im tiefen Wald die Orientierung nicht zu verlieren. Leider kreuzten hungrige Vögel ihren Weg und pickten die Krümel auf, sodass sich Hänsel und Gretel doch verliefen und bei der bösen Hexe mit ihrem Lebkuchenhaus landeten.

Der Sinn einer WordPress Breadcrumb

Das Problem mit den hungrigen Vögeln stellt sich nicht bei der Blognavigation, auch böse Hexen sind in diesem Kontext eher selten anzutreffen. Sodass sich die Frage stellt, wie bedeutsam eine WordPress Breadcrumb tatsächlich ist. Nehmen wir einen Beitrag wie diesen: Kategorisiert als Blog, befindet er sich laut Breadcrumb nur einen zusätzlichen Schritt von der Startseite entfernt:

Yoast SEO Breadcrumb im Rahmen des Twenty Sxiteen Themes
Yoast SEO Breadcrumb im Rahmen des Twenty Sxiteen Themes

Es bräuchte schon ein Maximum an Orientierungslosigkeit, hier nicht mehr zurückzufinden. Allerdings landen die meisten Nutzer ja nicht auf der Startseite eines Blogs und suchen sich von dort ausgehend ihren Weg zu ihrem eigentlichen Interesse. Im Allgemeinen hat die Suchmaschine sie zu einem Beitrag einer Website geführt, deren Struktur sie noch gar nicht kennen. Jede Orientierungshilfe, die über die Hauptnavigation hinausgeht, kann also nur sinnvoll sein. Schaden wird sie jedenfalls nicht.

Eine Breadcrumb dem Theme hinzufügen

Es gibt Themes, die von Haus aus eine Breadcrumb mitbringen. Das Standardtheme Twenty Sixteen kennt diese Option allerdings nicht. Nun bleiben Ihnen zwei Möglichkeiten: Sie können die Funktion selbst Ihrem Theme hinzufügen oder Sie benutzen ein Plugin. Ersteres setzt voraus, dass Sie die functions.php Ihres Themes um einige Code-Zeilen erweitern. Die Plugin-Variante ist gerade für Einsteiger dann doch einmal mehr das erheblich leichtere Vorgehen. Allerdings ist es auch hier nötig, etwas Code zu ergänzen – und das wiederum macht es nötig, ein Child Theme einzurichten.

Doch braucht es wirklich schon wieder ein weiteres Plugin, dessen Ersteller Sie vertrauen und dessen Updates Sie regelmäßig ausführen müssen? Tatsächlich ist das gar nicht nötig, denn ein Plugin sollten Sie ohnehin installiert haben, und das bringt die Breadcrumb-Funktion mit: das Yoast SEO-Plugin.

Eine WordPress Breadcrumb mit Yoast SEO erstellen

Wenn Sie das Yoast SEO Plugin bereits installiert haben, ist Ihnen vielleicht aufgefallen, dass es einige Einstellungsoptionen mitbringt. Die finden Sie im Backend Ihrer WordPress Installation in der linken Menüspalte unterhalb der Einstellungen. Eine der Yoast SEO Einstellungsseiten heißt Fortgeschritten, und genau dort befindet sich die Option für die Breadcrumb, die standardgemäß abgeschaltet ist. Denn: Bevor Sie die Option aktivieren, müssen Sie Ihrem Theme dann doch ein kleines bisschen PHP-Code gönnen. Yoast SEO gibt hierfür die Anleitung im Rahmen der Dokumentation heraus, die ich hier auf Deutsch übernehme:

  1. Kopieren Sie den folgenden Code an das Ende der header.php Ihres Themes. Sie können den Code auch in die single.php und/oder page.php Ihres Themes kopieren. Wenn die Breadcrumb zwischen Header und Contentbereich erscheinen soll, ist das Ende der header.php aber eine gute Wahl. Speichern Sie Ihre Änderungen.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
?>
  1. Rufen Sie nun die Seite Fortgeschritten der Yoast SEO Einstellungen auf und klicken Sie auf Aktivieren der Breadcrumb.
  2. Nun können Sie noch Feineinstellungen vornehmen, also zum Beispiel festlegen, wie der Eintrag für Ihre Startseite lauten soll. Statt Home könnte dort auch Startseite oder der Name Ihrer Website/Ihres Blogs stehen. Für sinnvoll halte ich vor allem die Angabe der Kategorie innerhalb des Pfades. Standard ist hier Keine. Dies führt zu der Ausgabe Home >> Beitrag im Gegensatz zu Home >> Kategorie >> Beitrag mit der Angabe der Kategorie. Klicken Sie nun auf Änderungen übernehmen und schauen Sie sich das Ergebnis in Ihrem Frontend an.

Die Breadcrumb mit CSS anpassen

Das Erscheinungsbild der Breadcrumb lässt sich dann auch sehr leicht über die ID breadcrumbs per CSS anpassen.

#breadcrumbs {color:grey;}
#breadcrumbs a {color:red;}
#breadcrumbs a:hover {color:pink;}

Diese Definitionen würde den nicht anklickbaren Text der Breadcrumb grau, den anklickbaren Text rot und den anklickbaren Text beim Überfahren mit der Mouse pink darstellen.

 

Wir selbst haben die Funktion übrigens gar nicht aktiviert. Schaden würde sie sicherlich nicht, aber unser Wald ist wahrlich kein Dickicht. Der Weg nach Hause ist auch so schnell gefunden, und Hexen lauern hier definitiv auch keine.

 


Beitragsbild: Britta Kretschmer

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen