WordPress mit Breadcrumbs inkl. Markup ergänzen

Breadcrumbs machen die Struktur eurer WordPress-Seite deutlich und helfen euren Lesern dabei, sich zurechtzufinden. Neben der einfachen Navigation auf die nächsthöhere Ebene, können die Breadcrumbs auch in den Suchergebnissen angezeigt werden und dort die Klickraten verbessern. Wie genau ihr Breadcrumbs auf eurer Seite verwendet, erfahrt ihr in diesem Artikel.

Breadcrumbs mit Plugin erstellen

Das kostenlose WordPress-Plugin Breadcrumb NavXT findet bereits auf unzähligen Seiten Verwendung und hat sich für die Erstellung von Breadcrumbs bewährt. Dennoch reicht die Aktivierung des Plugins alleine nicht aus, ihr müsst auch kleine Änderungen am Code vornehmen. Insgesamt ist der Aufwand aber überschaubar und ihr habt die Breadcrumbs innerhalb von 5 Minuten in euren Blog eingearbeitet.

Schritt 1: Plugin Aktivieren und „migrieren“

Nach der Aktivierung müssen wir erst „migrieren“, bevor uns das Plugin in die Einstellungen lässt.

Schritt 2: Einstellungen und Trennzeichen überprüfen und bei Bedarf anpassen

Schritt 3: Breadcrumb-Code in die header.php einfügen

In der header.php eures aktiven Themes fügt ihr den untenstehenden Code ein, damit die Breadcrumbs auf allen Seiten angezeigt werden. Dazu ruft ihr im Backend „Design“ > „Editor“ und auf der rechten Seite die header.php auf. Für das Theme Twenty-Fourteen fügen wir den Code in die vorvorletzte Zeile ein, direkt vor </header>.

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>

Leider lässt sich dieser Code nicht mit Plugins wie Insert Headers and Footers einfügen, somit müsst ihr nach jedem Theme-Update den Code erneut einsetzen.

Schritt 4: Aktuelle Darstellung prüfen

Hier werden die Breadcrumbs schon angezeigt, aber sowohl die Trennzeichen als auch die aktuelle Seite sind aufgrund der schwarzen Farbe nicht lesbar.

Schritt 5: Darstellung der Breadcrumbs mit CSS formatieren

Die Breadcrumbs lassen sich mit gleichnamiger CSS-Klasse formatieren. Für das Twenty-Fourteen Theme ändern wir die Schriftfarbe der Trennzeichen und der aktuellen Seite in Weiß und passen die Schriftgröße an, so dass sie der Schriftgröße in der Sidebar entspricht. Zudem rücken wir die Breadcrumbs 30 Pixel vom linken Seitenrand ein, damit sie bündig zum Blogtitel und den Sidebar-Inhalten ist. Für diese Änderungen ruft ihr die Style.css im Backend unter „Design“ > „Editor“ auf und fügt diesen Code am Ende der Datei ein:

.breadcrumbs {
color: #fff;
margin-left: 30px;
font-size: 12px;
font-weight: 400;
}

Breadcrumb Markup für Suchmaschineneinträge

Neben der einfachen Navigation im Frontend eurer Seite sind die Breadcrumb-Elemente dank dem Plugin zusätzlich mit den korrekten Markups im Quelltext vermerkt. Dadurch können eure Seiteneinträge in den Ergebnislisten von Google & Co. mit der Breadcrumb-Navigation als sogenanntes Rich-Snippet dargestellt werden.

Fazit: Mit dem Plugin Breadcrumb NavXT fügt ihr in nur 5 Minuten Breadcrumbs in eure WordPress-Seite ein, die zudem korrekte Markups für Suchmaschinen gebrauchen. Ganz ohne manuelle Eingriffe in den Theme-Code kommt dieses Plugin aber auch nicht aus.