Internetkurse Köln

Dieser Beitrag zur WordPress Breadcrumb Navigation aus dem Jahr 2016 wurde überarbeitet und unter neuem Titel veröffentlicht

Eine Breadcrumb Navigation ist eine zusätzliche Orientierungshilfe für eine WordPress Website oder ein Blog. Zu finden ist diese sogenannte Krümelspur im Allgemeinen zwischen dem Header und dem Inhaltsbereich eines Beitrags oder einer Seite. Wobei so eine WordPress Breadcrumb Navigation üblicherweise einfach nur eine Textzeile ist. Deren anklickbare Elemente zeigen den Pfad von der Startseite zum aufgerufenen Beitrag, der Seite oder einem Archiv.

In diesem Beitrag gehe ich erst einmal auf den Sinn dieser Krümelspur ein. Dann zeige ich, wie Sie für ein Standardtheme wie Twenty Twenty-One und ein Block Theme (Twenty Twenty-Two) eine solche Navigation integrieren können.

Schließlich zeige ich, wie Sie diese Breadcrumb Navigation auch für Ihren eigenen Inhaltstypen (Custom Post Type) sinnvoll einsetzen. Bei einem Kundenprojekt stellten sich mir in diesem Kontext nämlich gleich mehrere Fragen, auf die ich Antworten finden musste. Die Ergebnisse meiner Überlegungen möchte ich hier darstellen.

Der Sinn einer WordPress Breadcrumb Navigation

Die Bezeichnung Breadcrumb Navigation entstand ursprünglich in Anlehnung an das Märchen Hänsel und Gretel. Dessen Protagonisten verteilten Brotkrümel, um 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 dann doch verliefen und bei der bösen Hexe mit ihrem Lebkuchenhaus landeten.

Das Problem mit den hungrigen Vögeln stellt sich bei der WordPress Breadcrumb Navigation eher nicht. Auch böse Hexen sind in diesem Kontext relativ selten anzutreffen. Weshalb man schon hinterfragen könnte, ob es diese zusätzliche Navigation wirklich braucht.

Breadcrumb Navigation im Blog versus im Online-Shop

Nehmen wir einen Beitrag wie diesen. Kategorisiert als Blog, befindet er sich laut Breadcrumb Navigation nur einen Schritt von der Startseite entfernt. Zeigt die Krümelspur auch die Kategorie an, sind es zwei Schritte. Da bräuchte es schon ein Maximum an Orientierungslosigkeit, um von hier nicht mehr zurückzufinden.

Home > Blog > aufgerufener Beitrag

Anders verhält es sich zum Beispiel bei großen Online-Shops. Sagen wir Ikea. Bei der Produktvielfalt kann die zusätzliche Navigation tatsächlich hilfreich sein. Der Weg von einem Regalelement zurück zum ganzen System oder zu anderen Regalsystemen ist so gangbarer als über das Hauptmenü.

Produkte > Aufbewahrung & Organisation > Aufbewahrungssysteme > konkretes System > konkrete Einzelteile

Allerdings landen die meisten Nutzer ja nicht auf der Startseite eines Blogs, um sich von dort den Weg zu einem Beitrag zu suchen. Im Allgemeinen hat die Suchmaschine sie zu dem Beitrag von Interesse geführt. Der könnte zumindest theoretisch in einer tieferen Struktur liegen. Eine Orientierungshilfe, die über die Hauptnavigation hinausgeht, kann also nicht schaden. Auch wenn sie vielleicht nicht immer arg nötig zu sein scheint.

Eine WordPress Breadcrumb Navigation mit Yoast SEO erstellen

Es gibt Themes, die von Haus aus die Möglichkeit der Breadcrumb Navigation mitbringen. Die WordPress Standardthemes bieten diese Option allerdings nicht. Sie lässt sich aber natürlich nachrüsten.

Wenn Sie ohnehin das Yoast SEO Plugin bereits einsetzen, dann bietet es sich an, dies auch für die Breadcrumb Navigation zu nutzen. Denn Yoast SEO kann nicht nur Meta-Beschreibung oder hilft beim Verfassen lesbarer Texte. Yoast SEO kann auch Krümelspur.

Um die Yoast SEO Breadcrumbs nutzen zu können, müssen Sie diese aber erst einmal aktivieren. Dies geschieht über SEO > Darstellung in der Suche > Tab Breadcrumbs. Dort finden Sie ganz unten die passende Option.

… Theme Twenty Twenty-One (Child Theme)

Das allein reicht aber nicht. Nun gilt es, den PHP-Code für die Breadcrumb Navigation im Rahmen Ihres Themes zu veröffentlichen.

Dazu benötigen Sie aber ein Child Theme. Sonst geht Ihre Mühe mit dem nächsten Theme-Update verloren.

Für mein Twenty Twenty-One Child Theme habe ich den Template-Part site-header.php herangezogen. Sie können den Code aber auch an das Ende des Templates header.php kopieren. Im Zweifel funktioniert es auch, die Templates für einzelne Seitenarten wie page.php, single.php et cetera zu nutzen. Der (Site)-Header deckt aber bereits alle unterschiedlichen Seitenarten ab.

Damit sich die Breadcrumb Navigation passend ausrichtet, sollten Sie den PHP-Code mit einem DIV mit passender Klasse umschließen. Der Code lautet dann:

<div class="breadcrumb alignwide">
	<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
</div>

… Twenty Twenty-Two (Full Site Editing)

In der Tat bietet Yoast SEO auch einen Yoast Breadcrumbs Block. Der lässt sich im Rahmen des Full Site Editings, also zum Beispiel für ein Block Theme wie Twenty Twenty-Two einsetzen.

Auch hier können sie den Template-Teil Header benutzen. Allerdings verwenden dann auch die Template-Teile für große und kleine dunkle Header diese Breadcrumb Navigation. Und zwar mitten im großen beziehungsweise im kleinen Header.

Wenn Sie diese dunklen Header niemals einsetzen wollen, veröffentlichen Sie den Yoast Breadcrumbs Block am besten im Header. Denn alle wesentlichen Templates nutzen diesen.

Ansonsten müssen Sie den Block auch hier in nahezu jedem Template veröffentlichen. Zu nennen seien hier vor allem Einzelne Beiträge, Einzelne Seiten, Index und Archive.

Dort fügen Sie den Yoast Breadcrumbs Block vor dem Titel ein. Für die weite Ausrichtung gruppieren Sie den Breadcrumbs Block. Und für mehr Abstand nach unten fügen Sie einen Abstandsblock ein.

Siehe hierzu aber auch den Beitrag über das Arbeiten mit WordPress FSE Template Teilen am Beispiel eben dieses Headers.

WordPress Breadcrumb Navigation für eigene Inhaltstypen anpassen

Kommen wir nun zu den eingangs erwähnten Fragen rund um den sinnvollen Einsatz bei eigenen Inhaltstypen, den Custom Post Types.

Die Voreinstellung von Yoast SEO ist für »Taxonomie, die in Breadcrumbs für Inhaltstypen angezeigt wird« keine.

Home > aufgerufener Beitrag

Einzig Ihre eigenen Inhaltstypen, für die Sie definiert haben, dass sie ein Archiv haben sollen, zeigen dieses auch ohne weiteres Zutun in der Breadcrumb Navigation. Sagen wir, Ihr Inhaltstyp heißt Produkte. Dann sieht die Krümelspur so aus:

Home > Produkte > aufgerufenes Produkt

Über SEO > Darstellung in der Suche > Tab Breadcrumbs können Sie für jeden Inhaltstypen festlegen, welche Taxonomie er anzeigen soll. Für Beiträge sollte dies die Kategorie sein. Für einen Inhaltstypen wie Produkte könnte dies aber auch eine eigene Taxonomie wie zum Beispiel Händler sein.

Und nun das Problem. Zwar können Sie für Ihre Produkte durchaus die Kategorien nutzen. Nur gibt die Kategorieseite Ihre Produkte gar nicht aus!

Entweder landen Sie auf einer leeren Kategorieseite. Oder Sie landen auf einer Kategorieseite, die nur Ihre passend kategorisierten Beiträge auflistet.

Eigene Inhaltstypen in Archive integrieren

WordPress Archive zeigen immer nur den Post Type Beiträge an. Wenn Sie wollen, dass Ihre Kategorie-, Schlagwörter-, Datum- und Autor-Seiten auch Ihre eigenen Inhaltstypen berücksichtigen, braucht es eine passende Funktion:

function namespace_add_custom_types( $query ) {
  if( is_category() || is_tag() && empty( $query->query_vars['suppress_filters'] ) ) {
    $query->set( 'post_type', array(
     'post', 'nav_menu_item', 'YOUR-CUSTOM-POST-TYPE-HERE'
		));
	  return $query;
	}
}
add_filter( 'pre_get_posts', 'namespace_add_custom_types' );

Quelle: CSS-Tricks

Statt ‚YOUR-CUSTOM-POST-TYPE-HERE‘ hieße es für Produkte also 'produkte'. Und kommt noch ein weiterer Inhaltstyp hinzu, sagen wir Obst und Gemüse, heißt es 'produkte', 'obst_und_gemuese'.

Diese Funktion funktioniert übrigens sowohl im Rahmen eines Twenty Twenty-One Child Themes als auch mit einem Block Theme wie Twenty Twenty-Two. Für das bräuchten Sie dann aber auch ein Child Theme. Denn Änderungen der functions.php eines Block Themes überleben ein Theme-Update natürlich nicht.

Mit dieser Funktion macht es dann auch Sinn, in den Yoast SEO Einstellungen für diese beiden Inhaltstypen auch die Taxonomie Kategorie zu wählen.

Home > Obst und Gemüse > heimische Früchte > Äpfel > grüne Äpfel

Mit einer solchen WordPress Breadcrumb Navigation wird nun jedenfalls deutlich, dass es auch andere heimische Früchte gibt. Zum Beispiel Birnen. Und vielleicht verstecken sich hinter Obst und Gemüse ja auch importierte Früchte. Bananen.

Mit anderen Worten: Wie bei Ikea weist die Krümelspur nun auf die große Vielfalt des Sortimentes hin!

WordPress Breadcrumb Navigation: statt Archiv eine Seite anzeigen

Nun stellen wir uns vor, Sie haben eine Seite mit dem passenden Abfrage Loop erstellt. Eine Seite zu Ihrem Angebot in Sachen Obst und Gemüse.

In diesem Fall wäre es natürlich schön, wenn es in der Breadcrumb Navigation statt zum Archiv von Obst und Gemüse zu der Seite Obst und Gemüse ginge.

Dafür sind drei Schritte nötig:

1. Seite und Archiv können und dürfen nicht dieselbe Adresse haben.
2. Sie sollten die Bezeichnung für die Yoast Breadcrumbs anpassen.
3. Es braucht eine Weiterleitung von dem Archiv des Inhaltstypens auf die Seite.

1. Für unterschiedliche Adressen sorgen

Der erste Punkt ist an sich leicht zu erstellen. In meinem Beispiel heißt das Archiv obst_und_gemuese. Daraus entsteht die Adresse /obst_und_gemuese. Die Seite hingegen hat den Titel Obst und Gemüse. Woraus die Adresse /obst-und-gemuese entsteht. Das sind zwei unterschiedliche Adressen.

Aber es gibt auch eine Kategorie mit dieser Bezeichnung, das wirkt verwirrend. Und bei den Produkten würde es so ohnehin nicht funktionieren. Also nenne ich die Seite Obst und Gemüse: unsere Angebote. Der Permalink der Seite lautet sodann /obst-und-gemuese-unsere-angebote.

Entsprechend würde ich auch die Produkte-Seite umbenennen. Sagen wir: Unsere Produkte. Schon ändert sich die Adresse: /unsere-produkte. Im Gegensatz zu /produkte für das Archiv des Inhaltstypens.

2. Bezeichnung in den Yoast Breadcrumbs anpassen

Damit nun auch die Yoast Breadcrumbs diese Bezeichnung nutzen, wählen Sie SEO > Darstellung in der Suche > Tab Inhaltstypen. Dort können Sie für Ihre Inhaltstypen jeweils einen Breadcrumbs-Titel vergeben. In meinem Fall wäre dieser also Obst und Gemüse: unsere Angebote.

3. Für die Weiterleitung sorgen

Für die Weiterleitung sorgt das Plugin Simple 301 Redirects. Die Einstellungen sind hier denkbar einfach: /obst_und_gemuese leitet weiter auf https://ihre-domain.de/obst-und-gemuese-unsere-angebote.

Die WordPress Breadcrumb Navigation mit CSS anpassen

So oder so lässt sich das Erscheinungsbild der Breadcrumb Navigation ü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 Krümelspur grau, den anklickbaren Text rot und den anklickbaren Text beim Überfahren mit der Mouse pink darstellen.

Ich selbst benutze keine Breadcrumb Navigation. Schaden würde sie sicherlich nicht, aber mein Wald ist kein Dickicht. Der Weg nach Hause ist auch so schnell gefunden. Und Hexen lauern hier definitiv keine.

---

Beitragsbild: Britta Kretschmer