So fügen Sie Breadcrumbs zu Ihrer WordPress-Website hinzu

Der Begriff „Breadcrumbs“ bezieht sich auf ein effizientes Website-Navigationstool, das (wie uns Hänsel und Gretel gelehrt haben) dabei helfen soll, die Schritte zurück zum „Home“ (oder zur Homepage) einer Website zu verfolgen. Sie ermöglichen den Benutzern zu sehen, wie die aktuelle Seite in die gesamte Site-Struktur passt, indem sie eine Inline-Spur von Links (oder Labels) bereitstellen, die bis zurück zur Startseite führen.

Home Depot Produktseite mit Brotkrumen

Breadcrumbs sind für Ihre WordPress-Website tatsächlich wichtiger, als Sie vielleicht denken. Sie verbessern nicht nur die Benutzererfahrung, sondern können Ihrer Website auch einen Schub in den Suchrankings geben. Google mag dieses strukturelle Element einer Website, und Besucher haben eine entscheidende Navigationshilfe, wenn sie organisch auf eine Ihrer Seiten stoßen (was Ihre Absprungrate senkt).

Sie würden denken, dass es schwierig wäre, Ihrer Website ein solches integriertes Nativationssystem hinzuzufügen, aber mit der Verwendung eines Plugins ist es eigentlich ziemlich einfach. Tatsächlich haben Sie einen Vorsprung, wenn Sie das Yoast SEO-Plugin verwenden, da die Breadcrumbs-Funktion bereits in Yoast integriert ist! Und das Hinzufügen von Paniermehl über Yoast ist definitiv eine der bevorzugten Methoden da draußen. Abgesehen von Yoast SEO ist das Plugin Breadcrumb NavXT eine weitere großartige Option, die hochgradig anpassbar ist und auch gut mit unserem eigenen Divi-Theme funktioniert.

Abonnieren Sie unseren Youtube-Kanal

So fügen Sie mit Yoast Breadcrumbs zu Ihrer WordPress-Website hinzu

Um Ihrer WordPress-Website mit Yoast SEO Breadcrumbs hinzuzufügen, müssen Sie drei einfache Schritte ausführen:

• Yoast SEO Plugin installieren und aktivieren
• Hinzufügen des Breadcrumbs-Code-Snippets zu Ihrem WordPress-Theme
• Aktiviere/konfiguriere Breadcrumbs die Yoast Breadcrumbs in den Plugin-Einstellungen

Installieren und aktivieren Sie das Yoast SEO Plugin

Um das Yoast SEO-Plugin zu installieren, gehe zu deinem WordPress-Dashboard und navigiere zu Plugins > Neu hinzufügen. Suchen Sie dann nach dem WordPress-Repository nach „yoast“. Wenn Sie das Yoast SEO-Plugin sehen, klicken Sie auf , um das Plugin zu installieren und zu aktivieren.

Füge das Breadcrumbs-Code-Snippet zu deinem WordPress Child Theme hinzu

Als nächstes müssen wir Ihren WordPress-Themedateien ein kurzes Code-Snippet hinzufügen. Wenn Sie dies noch nicht getan haben, ist es eine gute Idee, ein untergeordnetes Thema zu erstellen. In diesem Beispiel zeige ich Ihnen, wie Sie das Breadcrumbs-Code-Snippet zu einem standardmäßigen TwentyNineteen WordPress-Theme hinzufügen. Sie können den Code zu jeder Theme-Datei/Vorlage hinzufügen, aber meistens möchten Sie ihn zu Ihrer single.php-Datei (um in allen Beiträgen angezeigt zu werden), page.php-Datei (um auf allen Seiten angezeigt zu werden) hinzufügen ) oder in Ihre header.php-Datei (um auf der gesamten Site angezeigt zu werden).

In diesem Beispiel füge ich den Breadcrumbs-Code der Datei header.php meines Child-Themes hinzu. Nachdem Sie die Datei header.php aus dem übergeordneten Thema kopiert haben, öffnen Sie die Datei in einem Code-Editor Ihrer Wahl, um sie zu bearbeiten.

Fügen Sie dann ganz unten in der Datei header.php das folgende von Yoast bereitgestellte PHP-Snippet hinzu, um die Breadcrumbs-Funktionalität zu aktivieren:

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

Dadurch werden Breadcrumbs direkt unter der Kopfzeile aller Seiten angezeigt, eine übliche Platzierung für Breadcrumbs.

Aktivieren und konfigurieren Sie die Yoast Breadcrumbs in den Plugin-Einstellungen

Sobald das Code-Snippet zu deinem WordPress Child-Theme hinzugefügt wurde, musst du nur noch die Breadcrumbs in den Yoast SEO-Plugin-Einstellungen aktivieren. Gehen Sie dazu zu Ihrem WordPress-Dashboard und navigieren Sie zu SEO > Suchdarstellung und klicken Sie dann auf die Registerkarte Breadcrumbs. Stellen Sie in den Breadcrumbs-Einstellungen sicher, dass Breadcrumbs aktiviert sind, indem Sie die Option auf "aktiviert" umschalten. Anschließend können Sie die Breadcrumb-Einstellungen nach Ihren Bedürfnissen konfigurieren. Sie können auch eine Taxonomie auswählen, die in Breadcrumbs für Ihren Beitrag angezeigt wird. In diesem Beispiel werde ich meine Beiträge so einstellen, dass Kategorien in den Breadcrumbs angezeigt werden.

Schauen wir uns nun an, wie die Breadcrumbs in einem der Beiträge aussehen, die ich im TwentyNineteen-Theme erstellt habe.

So sieht der Beitrag aus, bevor Breadcrumbs aktiviert werden.

So sieht der Beitrag aus, nachdem Breadcrumbs aktiviert wurden. Dieses spezielle Beitragsbeispiel hat eine Kategorie („WordPress“) und eine übergeordnete Kategorie („Webdesign“), um Ihnen die Kategorie-Taxonomie der Breadcrumbs zu zeigen, die ich in den Breadcrumbs-Einstellungen ausgewählt habe.

Möglicherweise müssen Sie den Stil Ihrer Breadcrumbs mithilfe von externem CSS anpassen. Dazu können Sie die CSS-ID „breadcrumbs“ verwenden, die im PHP-Code enthalten war. Öffnen Sie die Datei style.css Ihres Child-Themes (oder Sie können sie im Theme Customizer unter Additional CSS hinzufügen) und fügen Sie Folgendes hinzu:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

Für das TwentyNineteen-Theme möchte ich vielleicht den Rand meines Kopfzeilentextes anpassen, indem ich das folgende benutzerdefinierte CSS hinzufüge:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Wenn Sie mehr Kontrolle über die spezifische Position Ihrer Breadcrumbs haben möchten, können Sie den folgenden Shortcode auch für einzelne Beiträge oder Seiten verwenden.

[wpseo_breadcrumb]

Hinzufügen von Breadcrumbs zu Ihrer WordPress-Website mit Breadcrumb NavXT

Wenn Sie Yoast SEO aus irgendeinem Grund nicht installieren möchten oder nach einer anderen einfachen Option suchen, ist das Breadcrumb NavXT-Plugin eine ausgezeichnete Wahl.

Um das Plugin zu installieren, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins > Neu hinzufügen. Dann durchsuchen Sie das WordPress-Repository nach „breadcrumb navxt“. Sobald Sie das Plugin sehen, klicken Sie auf , um es zu installieren und zu aktivieren.

Um die Breadcrumbs aufzurufen, damit sie auf Ihrer Website angezeigt werden, können Sie das integrierte Breadcrumb NavXT-Widget verwenden, das auf der Widgets-Seite bereitgestellt wird. Auf diese Weise können Sie das Widget in die verschiedenen Widget-Bereiche ziehen, die von Ihrem Thema bereitgestellt werden. Gehen Sie dazu zu Ihrem WordPress-Dashboard und navigieren Sie zu Darstellung > Widgets. Ziehen Sie dann das Widget in den Widget-Bereich Ihrer Wahl und aktualisieren Sie die Widget-Einstellungen.

In diesem Beispiel verwende ich das Divi-Design, um die Brotkrümel oben in meiner Seitenleiste anzuzeigen. So sieht es in einem Beitrag aus.

Ähnlich wie im Yoast Breadcrumb-Beispiel können Sie auch den Breadcrumb-Trail zu Ihrer Site aufrufen, indem Sie Ihrem Child-Theme den erforderlichen Code hinzufügen. Hier ist der Code, den sie bereitstellen und der schema.org-Breadcrumblist-kompatibel ist:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Da ich für dieses Beispiel das Divi-Theme verwende, füge ich den Code der Single.php-Datei meines Divi-Child-Themes direkt über dem Artikel-Tag hinzu. Dadurch werden die Breadcrumbs oben in allen meinen Beiträgen angezeigt.

So sieht ein Beitrag nach dem Hinzufügen des Codes aus.

Konfigurieren der Breadcrumbs über die Plugin-Einstellungen

Das Breadcrumb NavXT-Plugin bietet einige leistungsstarke Optionen zum Konfigurieren Ihrer Breadcrumbs. Sie können die gesamte Vorlage Ihrer Breadcrumbs für verschiedene Taxonomien und vieles mehr anpassen. Sie können über Ihr WordPress-Dashboard auf diese Einstellungen zugreifen, indem Sie zu Einstellungen > Breadcrumb NavXT navigieren.

Die Semmelbrösel stylen

Wenn Sie die Breadcrumbs formatieren möchten, können Sie die im Code enthaltene Klasse "Breadcrumbs" als Ziel verwenden.

Fügen Sie einfach das folgende CSS zur style.css-Datei Ihres Child-Themes oder zum zusätzlichen CSS des Theme-Anpassers hinzu:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Wenn Sie das Breadcrumb-Widget mit dem Divi-Thema verwenden möchten, können Sie auch das Seitenleistenmodul von Divi verwenden, um dem Breadcrumb im Divi Builder ein Styling hinzuzufügen.

Abschließende Gedanken

Breadcrumbs sind ein wichtiger Bestandteil einer Website, sowohl für die Benutzerfreundlichkeit als auch für die SEO. Wenn Sie also erwägen, Ihrer WordPress-Site Breadcrumbs hinzuzufügen, empfehle ich Ihnen, mit den Methoden zu beginnen, die von den in diesem Artikel erwähnten Plugins bereitgestellt werden (Yoast SEO und Breadcrumb NavXT). Es ist am sinnvollsten, Yoast-Breadcrumbs zu verwenden, wenn Sie bereits das SEO-Plugin nutzen, da es Ihnen bereits zur Verfügung steht. Breadcrumb NavXT ist jedoch auch eine hochgradig anpassbare Option. Sicher, Sie müssen möglicherweise auf Ihre Designdateien zugreifen, aber alles in allem ist der Vorgang einfach. Wenn überhaupt, hoffe ich, dass dies dazu beiträgt, den Schmerz zu lindern, Breadcrumbs auf Ihrer eigenen WordPress-Site zu erhalten.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!