Die WooCommerce-Breadcrumb ersetzen durch Yoasts Breadcrumb-Funktion

Gegenüber der einfachen Breadcrumb-Navigation von WooCommerce bietet die im SEO-Plugin von Yoast enthaltene einige Vorteile: Zum einen lassen sich über das WordPress-Backend bequem Einstellungen für die Gestaltung des Brotkrumenpfades vornehmen. Änderungen zum Beispiel des Trennzeichens zwischen den Brotkrümeln oder die Angabe eines Präfix für den Brotkrümelpfad sind möglich. Zudem lässt sich auswählen, ob Kategorien in der Pfadnavigation für Beiträge angezeigt werden sollen – bei installiertem WooCommerce interessanterweise auch für Produkte, Produkt-Kategorien und Produkt-Schlagwörter.

Zum anderen ist Yoasts Breadcrumb-Navigation bereits semantisch bzw. strukturiert ausgezeichnet, also mit bestimmten Meta-Angaben versehen, die von Suchmaschinen ‚verstanden‘ werden können. Als kleines Dankeschön reichern Google und Co. dann (häufig) ihre Snippets auf den Suchergebnisseiten mit diesen Breadcrumbs an. (Es ist allerdings auch möglich und nicht schwierig, die WooCommerce-Navigation mit ’structured data markup‘ auszustatten.)

Und außerdem macht es aus gestalterischer Sicht und auch unter dem Aspekt der Usability Sinn, auf den allgemeinen Beitrags- und Archivseiten und den speziellen WooCommerce-Seiten für Produkte und Produkt-Archive gleichförmige Breadcrumbs anzubieten. Gründe genug, um einen Austausch vorzunehmen, auf geht’s.

Zwingend nötig ist das Entfernen der Original-Breadcrumb von WooCommerce nicht – jedenfalls nicht aus technischer Sicht. Und auch Google hat nichts gegen die Einbindung mehrerer (unterschiedlicher) Breadcrumb-Pfade (siehe die Beispiele mit „multiple breadcrumb trails“ bei: Google Developers).

In der Regel aber wird das Entfernen der WooCommerce-Breadcrumb sinnvoll sein. Per remove_action ist das ganz einfach:

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

Nach Eintrag dieser Zeile in die functions.php des eigenen Child-Themes sollte die Brotkrumen-Navigation auf den Shopseiten verschwunden sein. Das klappt allerdings in dieser Form nur, wenn nicht bereits das aktive Theme oder ein anderes Plugin die Breadcrumb entfernt hat, um sie durch eine eigene zu ersetzen. Vor allem bei speziell für WooCommerce entwickelten Themes wird das häufig gemacht.

Bei den kostenpflichtigen WooThemes könnte dann stattdessen dieser Remove-Befehl funktionieren (muss aber nicht):

remove_action( 'woo_main_before', 'woo_display_breadcrumbs', 10 );

Beim kostenlosen WooCommerce-Theme Storefront muss er hingegen so lauten:

remove_action( 'storefront_content_top', 'woocommerce_breadcrumb', 10 );

2. Yoast-Breadcrumb aktivieren

Yoast-Breadcrumb aktivieren
Innerhalb des Yoast-Plugins Breadcrumb auf „enabled“ schalten

Selbstredend ist die Installation und Aktivierung des kostenlos erhältlichen WordPress-SEO-Plugins von Yoast (bzw. von Joost de Valk) Voraussetzung für den Austausch der Brotkrumen-Anzeige. Außerdem muss über die Plugin-Einstellungen unter „Erweitert“ Yoasts Breadcrumb-Funktion aktiviert werden.

Und schließlich muss die zugehörige PHP-Funktion yoast_breadcrumb() noch in das aktive Theme eingebunden werden. Hierfür gibt es mindestens zwei Möglichkeiten.

2.a Breadcrumb-Funktion in Theme-Templates einbauen

Innerhalb des WooCommerce-Plugin-Ordners befindet sich ein Ordner namens „templates“, in dem alle zur Bearbeitung bzw. Umgestaltung vorgesehenen Dateien liegen (teilweise in weiteren Unterordnern). Um einzelne dieser Vorlagen zu ändern, sollten sie ins eigene Child-Theme und dort in einen Unterordner „woocommerce“ (kleingeschrieben) kopiert werden. Um Yoasts Breadcrumb-Funktion einzubauen, bieten sich vor allem die Dateien archive-product.php und single-product.php an, in denen sich auch der Action-Hook für die ursprüngliche WooCommerce-Breadcrumb befindet.

In beiden Dateien sieht der entsprechend bearbeitete Abschnitt dann so aus:

<?php
     /**
     * woocommerce_before_main_content hook.
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     */
   do_action( 'woocommerce_before_main_content' );
?>

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

Nun sollten die Breadcrumbs von Yoast innerhalb der Shopseiten sichtbar sein. Falls diese Navigation auch in den allgemeinen Blogseiten angezeigt werden soll, muss die Funktion yoast_breadcrumb('<p id="breadcrumbs">','</p>'); in ähnlicher Weise in weitere PHP-Dateien des aktiven Themes eingearbeitet werden.

2.b Breadcrumb-Funktion über functions.php einbinden

Es geht auch ganz ohne die Template-Dateien. Nachdem die Original-Breadcrumb mittels der functions.php ‚removed‘ wurde (siehe Punkt 1), kann dort die Yoast-Breadcrumb mittels einer add_action einem Action-Hook von WooCommerce hinzugefügt werden.

Der komplette Code (inklusive des oben beschriebenen Deaktivierens der WooCommerce-Breadcrumb) sieht dann so aus:

// Replace WooCommerce Breadcrumbs with Yoast breadcrumbs
	
add_action( 'init', 'lz_replace_breadcrumbs' );

function lz_replace_breadcrumbs() {

   remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

   add_action( 'woocommerce_before_main_content', 'lz_yoast_breadcrumb', 20, 0);

     function lz_yoast_breadcrumb() {

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

Die gesamte Funktionalität ist hier an den Init-Hook von WordPress angehängt, um gewisse Laufzeit-Probleme zu vermeiden. Die Remove-Action muss eventuell an bestimmte Themes angepasst werden, wie oben in Punkt 1 beschrieben.

Nun dürfte die Breadcrumb-Navigation von Yoast auf den Shopseiten für Produkte und Produktauflistungen sichtbar sein. Und mit den Einstellungsmöglichkeiten, die das SEO-Plugin unter dem Menüpunkt „Erweitert“ für die Breadcrumb bietet, sollte die Darstellung der Brotkrumen nun auch beeinflussbar sein.

Yoast-Plugin Breadcrumb-Einstellungen
Wenn WooCommerce installiert ist, bietet das SEO-Plugin von Yoast zusätzliche Einstellmöglichkeiten an für die Breadcrumbs auf den Shopseiten

3 Kommentare zu “Die WooCommerce-Breadcrumb ersetzen durch Yoasts Breadcrumb-Funktion

  1. Vielen Dank für diesen tollen Post!!

    Ich hätte zwei Fragen, die hier evtl. beantwortet werden können.
    Frage 1:
    Mein Yoast Breadcrumb sieht wie folt aus:
    Home > Produkte > Mode > Socken > Grand Hotel
    Woher kommt der > Produkte? Kann ich diesen Teil irgendwie anpassen oder eliminieren?

    Frage 2:
    Breadcrumb wird auf Pages nicht angezeigt. Beispiel „Kontakt“ hätte ich gerne
    Home > Kontakt

    Vielen Dank
    Serge

  2. Hi Serge,
    um die Yoast-Breadcrumb auch auf ’normalen‘ Seiten einzubinden, musst Du dies

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

    in die page.php Deines Themes packen (das hängt allerdings vom verwendeten Theme ab) – siehe Anleitung bei Yoast: https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/

    „Produkte“ dürfte der Titel Deiner Shop-Seite sein – beim Installieren von WooCommerce wird ja eine Seite/Page in WordPress angelegt, die eigentlich „Shop“ heißt. Die scheinst Du umbenannt zu haben in „Produkte“. Wenn Du den Titel änderst, müsste das entsprechend auch in der Yoast-Breadcrumb angezeigt werden.

Schreibe einen Kommentar

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