Bootstrap Markup für die Yoast SEO Breadcrumb

Yoast SEO, auch als WordPress SEO bekannt, bietet eine Vielzahl an Funktionen zur Suchmaschinen Optimierung. In diesem Beitrag zeige ich dir, wie du die Yoast SEO Brotkrümelnavigation (engl. Breadcrumb) für Bootstrap 4 umschreibst.

Breadcrumb im WordPress Template einbinden

Falls noch nicht geschehen, installiere das WordPress SEO Plugin und aktiviere die Breadcrumb im Backend unter SEO > Fortgeschritten > Breadcrumbs.

Mit dem Aufruf der PHP Funktion yoast_breadcrumb() bindest du die Navigation auf deiner Seite ein. Suche dir hierzu eine geeignete Stelle in einem WordPress Theme, z.B. unterhalb der Navigation in der header.php Datei.

if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb(
        '<p id="breadcrumbs">',
        '</p>'
    );
}

Der daraus entstehende HTML Code sieht in etwa so aus.

<p id="breadcrumbs">
    <span xmlns:v="http://rdf.data-vocabulary.org/">
        <span typeof="v:Breadcrumb">
            <a href="/" rel="v:url"property="v:title">Home</a>
            » <span class="breadcrumb_last">Page</span>
        </span>
    </span>
</p>

Breadcrumb auf Bootstrap 3 umschreiben

Die Yoast Breadcrumb ist sowohl für Mensch, als auch Suchmaschine gut lesbar, allerdings basiert die Breadcrumb Komponente des Bootstrap 3 Frameworks auf einer Liste. Mit einem kleinen Trick kann man die span Elemente ganz leicht um li Elemente erweitern.

/* 
 * 1. <ul><li>Link Home » Link Parent » Current Page</li></ul> 
 */
$breadcrumb = yoast_breadcrumb( 
    '<ul class="breadcrumb"><li class="breadcrumb-item">', 
    '</li></ul>', 
    false
);

/*
 * 2. <ul><li>Link Home</li><li>Link Parent</li>...</ul> 
 */
echo str_replace(
    '»',
    '</li><li class="breadcrumb-item">',
    $breadcrumb
);
  1. Der Funktion wird HTML Code für Listen und Listen-Elemente, anstatt für einen einzelnen Paragraphen übergeben.
  2. Danach werden die Trenner (engl. Delimiter) durch schließende und öffnende Listen-Elemente ersetzt.

Wenn du einen anderen Delimiter als den im Beispiel verwendest, musst du den ersten Parameter im str_replace() entsprechend anpassen.

Das fertige WordPress Snippet

Der oben gezeigte Code lässt die Yoast SEO Breadcrumb im besten Bootstrap Markup neu erstrahlen. Damit du keine bösen Überraschungen beim Einbau erlebst, habe ich das Snippet noch etwas abgerundet.

function wps_yoast_breadcrumb_bootstrap() {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
        $breadcrumb = yoast_breadcrumb(
            '<ul class="breadcrumb"><li class="breadcrumb-item">',
            '</li></ul>',
            false
        );

        echo str_replace(
            '»',
            '</li><li class="breadcrumb-item">',
            $breadcrumb
        );
    } else {
        echo '<ul class="breadcrumb"><li>Missing function "yoast_breadcrumb"</li></ul>';
    }
}

wps_yoast_breadcrumb_bootstrap();

Kopiere dieses Snippet in die functions.php Datei deines Themes oder in dein Plugin und führe den Funktionsaufruf wps_yoast_breadcrumb_bootstrap() an der Stelle aus, an der du deine Breadcrumb darstellen möchtest.

Du willst deine Breadcrumb erst in Ruhe testen? So führst du WordPress Tests im Live-Betrieb aus.

Marvin Kronenfeld
Marvin Kronenfeld

Marvin arbeitet als Front End Developer, spricht fließend JavaScript und ist immer für eine BEM-Diskussion zu haben.