So fügen Sie Breadcrumbs in WordPress hinzu

Breadcrumbs können Ihnen dabei helfen, die Navigation auf Ihrer Website zu verbessern. Wenn Sie also nach einer einfachen Möglichkeit suchen, sie auf Ihrer Website zu aktivieren, sind Sie hier genau richtig. In dieser Anleitung zeigen wir Ihnen, wie Sie Breadcrumbs in WordPress mithilfe von Plugins und Designoptionen hinzufügen.

Was sind Semmelbrösel?

Breadcrumbs sind Links, die oben auf Ihrer Seite angezeigt werden. Dies sind miteinander verbundene Links , die einen wichtigen Teil Ihrer Site-Navigation darstellen. Diese Links sind hierarchisch angeordnet, sodass Ihre Benutzer nicht nur wissen, auf welcher Seite sie sich befinden, sondern auch erfahren, unter welchen Seitenkategorien sie sich befinden. Auf unserer Website können Sie beispielsweise die Breadcrumbs oben auf dieser Webseite sehen.

Breadcrumbs helfen Ihren Benutzern, die Hierarchie der Seite, die sie auf Ihrer Website durchsuchen, anzuzeigen und verbundene Links zu erhalten, um zu höheren Seiten oder direkt zur Startseite zurückzukehren.

Warum Breadcrumbs in WordPress hinzufügen?

Das Hinzufügen von Breadcrumbs ist eine ausgezeichnete Option für diejenigen, die die Navigation ihrer Website verbessern möchten . Da es im Wesentlichen wie ein Pfad funktioniert, können Ihre Benutzer es leicht verwenden, um zu ihren vorherigen Seiten zurückzukehren und zu verfolgen, auf welcher Seite sie sich befinden. Dies führt zu mehr Engagement und hält die Besucher über die Kategorie der von ihnen aufgerufenen Seiten auf dem Laufenden.

Darüber hinaus ist das Hinzufügen von Breadcrumbs unerlässlich, wenn Sie eine große Website haben. Wenn Sie einen E- Commerce-Shop betreiben oder Ihre Inhalte unter verschiedenen Kategorien verteilen, dann ist es wichtig, Breadcrumbs zu aktivieren. Dadurch wissen Ihre Kunden, welche Produkte unter jeder Kategorie liegen und zu welchen Kategorien sie zurückkehren können, um weitere ähnliche Produkte anzuzeigen.

Darüber hinaus verbessert die Aktivierung von Breadcrumbs auch die SEO Ihrer Website, da es den Suchmaschinen-Crawlern erleichtert wird, Ihre miteinander verbundenen Links zu durchsuchen.

Nachdem wir nun besser verstehen, was sie sind und wie sie Ihnen zugute kommen können, wollen wir sehen, wie Sie Ihrer WordPress-Website Breadcrumbs hinzufügen können und welche verschiedenen Methoden Sie dafür verwenden können.

So fügen Sie Breadcrumbs in WordPress hinzu

Es gibt ein paar verschiedene Methoden, um deiner WordPress-Seite Breadcrumbs hinzuzufügen:

1. Mit Yoast SEO
2. Mit speziellen Breadcrumb-Plugins
3. Aus deinem Thema

Werfen wir einen Blick auf jede Methode.

HINWEIS : Bei einigen dieser Methoden müssen Sie einige Kerndateien ändern. Auch wenn die Snippets sehr einfach sind, empfehlen wir dringend, ein untergeordnetes Thema zu verwenden, um Probleme zu vermeiden. Dies macht den Prozess, Änderungen an Ihrem Design vorzunehmen, viel sicherer und die Änderungen werden nicht rückgängig gemacht, wenn Sie Ihr Design aktualisieren. Sie können entweder ein untergeordnetes Thema erstellen oder eines dieser dedizierten Plugins verwenden.

1) So fügen Sie Breadcrumbs in WordPress mit Yoast SEO hinzu

YoastSEO ist eines der beliebtesten Plugins und eine komplette SEO-Lösung für WordPress. Es kommt auch mit einer dedizierten Option zum Aktivieren von Breadcrumbs und erweiterten Optionen, um es weiter anzupassen. Dazu gehören das Ändern von Linktrennzeichen, Ankertext für die Startseite, Breadcrumbs für die 404-Seite, zusätzliche Personalisierungsoptionen und sogar das Ein- oder Ausblenden von Taxonomien und Archiven von Inhaltstypen in Ihren Breadcrumbs.

Um unter Yoast auf Breadcrumbs-Einstellungen zuzugreifen und diese zu aktivieren, gehen Sie in Ihrem WordPress-Admin-Dashboard zu Yoast SEO > Search Appearance (natürlich vorausgesetzt, dass Sie das Yoast SEO-Plugin bereits installiert und aktiviert haben).

Gehen Sie dann zur Registerkarte Breadcrumbs , und Sie sehen die Breadcrumbs-Optionen unter Yoast SEO. Scrollen Sie nach unten, aktivieren Sie die Option BreadCrumbs für Ihr Design aktivieren und speichern Sie die Änderungen.

Danach müssen Sie Ihrer headers.php -Datei eine kleine Codezeile hinzufügen, damit Ihre Theme-Datei die Yoast SEO-Breadcrumbs im Header Ihrer Website aufruft.

Öffnen Sie dazu Ihren Design-Editor, indem Sie auf Darstellung > Design-Editor klicken. Verwenden Sie dann die Liste der Designdateien auf der rechten Seite und wählen Sie Design-Header aus.

Verwenden Sie nun den Editor und fügen Sie das folgende Snippet am Ende der Datei header.php ein .

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

Dann klicken Sie auf Datei aktualisieren und das war's! Jetzt sollten Sie in der Lage sein, Ihre Yoast SEO-Breadcrumbs zu verwenden.

Denken Sie daran, zusätzliche Optionen auf der Registerkarte Breadcrumbs zu überprüfen, um Ihre Breadcrumbs nach Ihren Wünschen anzupassen. Mit Yoast können Sie alles von dort aus erledigen und es ist mit den meisten WooCommerce-Themes kompatibel.

2) Wie man Breadcrumbs in WordPress mit dedizierten Plugins hinzufügt

Wenn Sie Yoast SEO nicht verwenden möchten, können Sie alternativ Plugins von Drittanbietern verwenden. In diesem Abschnitt sehen wir uns einige hervorragende Plugins an, mit denen Sie Ihrer WordPress-Site Breadcrumbs hinzufügen können. Alle diese Plugins sind kostenlos , sodass Sie sie testen und das richtige für sich auswählen können, ohne einen Cent auszugeben.

1) Flexy Breadcrumb

Flexy BreadCrumb ermöglicht es Ihnen, Breadcrumbs auf Ihrer Website mithilfe des dedizierten Shortcodes einfach zu aktivieren. Installieren und aktivieren Sie einfach das Plugin und verwenden Sie seinen Shortcode auf jedem Teil Ihrer Website: Seiten, Blogs, Widgets, Kopf- oder Fußzeilen. Auf diese Weise können Sie Ihre Breadcrumbs zu jedem Abschnitt Ihrer Website hinzufügen, damit sie zum Rest Ihres Inhalts passen.

Dieses kostenlose Plugin verfügt auch über spezielle Personalisierungsoptionen, sodass Sie Breadcrumb-Trennzeichen, Anfangs- und Endtext, Farben, Farboptionen für Links und vieles mehr ändern können.

Hauptmerkmale

• Spezieller Shortcode zum Hinzufügen von Breadcrumbs zu jedem Teil Ihrer Website
• Tonnenweise Personalisierungsoptionen
• Sehr benutzerfreundlich und einfach zu bedienen

2) Breadcrumb-NavXT

Breadcrumb NavXT ist eine vollständige und robuste Lösung, um voll funktionsfähige Breadcrumbs zu ermöglichen. Es ist eines der beliebtesten Breadcrumb-Plugins und das aus gutem Grund. Sie können Ihre Breadcrumbs einfach aktivieren, indem Sie entweder ein spezielles Widget verwenden oder seine Funktion direkt in Kopfzeilen, Fußzeilen oder bestimmten Seitenvorlagen mithilfe Ihrer WordPress-Dateien aufrufen.

Das Plugin verfügt auch über integrierte Optionen zum Anpassen Ihrer Breadcrumbs, und die schiere Anzahl der bereitgestellten Optionen ist einfach erstaunlich. Sie können separate Vorlagen für Ihre Blogs und Posts einrichten und mit kreativen Möglichkeiten experimentieren, um Ihre Breadcrumbs deutlich in verschiedenen Teilen Ihrer Website anzuzeigen.

Hauptmerkmale

• Umfangreiche Breadcrumbs-Personalisierung und Vorlagenanpassungen
• Spezielle Widgets, um Breadcrumbs überall auf Ihrer Website zu aktivieren
• Zusätzliche Funktionen für Benutzer zum Hinzufügen von Funktionen und Filtern

3) Breadcrumb fangen

Catch BreadCrumb ist ein raffiniertes, leichtes Plugin, mit dem Sie Ihrer Website eine Breadcrumb-Navigation hinzufügen können. Sie können Ihre Breadcrumbs im Handumdrehen aktivieren und weiter vorantreiben, indem Sie die speziellen Shortcode- und Personalisierungsoptionen verwenden.

Catch BreadCrumbs ist nicht besonders vollgepackt, wenn es um Funktionen geht, aber sein gut gestaltetes Optionspaket bietet alle Funktionen, die Sie benötigen, ohne überwältigend zu sein, sodass selbst die meisten Anfänger ihre Breadcrumbs in wenigen Minuten einrichten können . Schließlich können Sie elegante Breadcrumbs hinzufügen und raffinierte Optionen verwenden, z. B. das Verstecken von Breadcrumbs auf Ihrer Startseite.

Hauptmerkmale

• Leicht und einfach zu bedienen
• Responsives Design mit unzähligen Personalisierungsoptionen
• Optionen zum Ausblenden/Anzeigen von Breadcrumbs auf der Startseite oder bestimmten Seiten

Schauen wir uns nun eines dieser Plugins an und sehen, wie Sie sie auf Ihrer Website aktivieren können. Für diese Demo verwenden wir Flexy BreadCrumbs , aber Sie können jedes andere Tool verwenden. Die meisten Tools sind ähnlich, daher sollten Sie diese Schritte für die meisten Plugins ohne Probleme ausführen können. Wir empfehlen Ihnen jedoch, die Dokumentation griffbereit zu haben, um alle Probleme zu lösen, die Sie möglicherweise unterwegs haben.

Fügen Sie BreadCrumbs in WordPress mit Flexy Breadcrumbs hinzu

Beginnen wir mit der Installation des Plugins, gehen Sie also in Ihrem WordPress Admin Dashboard zu Plugins > Neu hinzufügen. Verwenden Sie dann die Suchleiste oben rechts, um nach Flexy BreadCrumbs zu suchen, klicken Sie auf Installieren und aktivieren Sie es dann .

Sehen wir uns nun an, wie Sie das Plugin einrichten und anpassen.

Verwenden von Flexy BreadCrumbs Shortcode und Hinzufügen zu Ihren Designdateien

Der einfachste Weg, Flexy BreadCrumbs zu verwenden, ist die Verwendung seines Shortcodes:

 [flexy_breadcrumb]

Sie können diesen Shortcode zu jedem Blog, jeder Seite oder jedem Widget hinzufügen, um Ihre Breadcrumbs darauf anzuzeigen.

Wenn Sie beispielsweise Breadcrumbs auf einem Blog oder einer Produktseite anzeigen möchten, fügen Sie einfach diesen Shortcode wie unten gezeigt hinzu.

Wenn Sie andererseits möchten, dass Ihre Breadcrumbs auf allen Ihren Seiten und Beiträgen angezeigt werden, ohne sie manuell hinzuzufügen, können Sie diesen Shortcode zu Ihren Designdateien hinzufügen.

Öffnen Sie dazu Ihren Design-Editor, indem Sie auf Darstellung > Design- Editor klicken, verwenden Sie die Seitenleiste der Design-Dateien auf der rechten Seite und wählen Sie Ihre header.php -Datei aus.

Fügen Sie nun am Ende der Datei das folgende Snippet hinzu:

 <?php
echo do_shortcode('[flexy_breadcrumb]');
?> 

Denken Sie daran, dass Sie bei Verwendung eines anderen Shortcode-Plugins den Abschnitt [flexy_breadcrumb] des Plugins stattdessen durch den Shortcode Ihres Plugins ersetzen.

Klicken Sie danach auf Datei aktualisieren und Ihre Breadcrumbs werden auf Ihrer Website angezeigt.

Aber was ist, wenn Sie Ihre Breadcrumbs an Ihre Website anpassen möchten? Sie können dies tun, indem Sie die Optionen des Plugins verwenden. Klicken Sie einfach auf Flexy Breadcrumb in der Seitenleiste Ihres WP Admin Dashboards und Sie sehen alle Anpassungsoptionen, um Ihre Breadcrumbs zu ändern. Dazu gehören das Ändern des Home-Symbols, des Breadcrumb-Trennzeichens, der Post-Type-Hierarchie und sogar der Typografieeinstellungen.

3) So fügen Sie BreadCrumbs in WordPress aus Ihrem Theme hinzu (oder entfernen sie)

Einige Themen haben ihre eigenen dedizierten Breadcrumb-Optionen und Sie können sie normalerweise über ihre Themenoptionen aktivieren/deaktivieren. Zum Beispiel können wir für das Elfenthema zu den Themenoptionen gehen, indem wir auf die Registerkarte Aussehen > Anpassen > Spezielle Themenoptionen gehen, die für uns als Optionen für Feenthemen bezeichnet werden. Dort klicken wir auf Breadcrumbs und aktivieren/deaktivieren sie mit dem bereitgestellten Schalter.

Einige Themes verfügen außerdem über zusätzliche Optionen zum Anpassen von Breadcrumbs, um sie an das Erscheinungsbild Ihrer Website anzupassen.

Bonus: So deaktivieren Sie Breadcrumbs

Bei einigen Designs sind standardmäßig Breadcrumbs aktiviert. Um sie zu deaktivieren, müssen Sie den Designdateien eine Funktion hinzufügen. Zum Beispiel wird Storefront mit seinen dedizierten Breadcrumbs geliefert, und Sie können sie mit dem folgenden Code deaktivieren:

 add_action( 'init', 'ql_remove_storefront_breadcrumbs' );
Funktion ql_remove_storefront_breadcrumbs() {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Fügen Sie dies einfach zu Ihrer Datei functions.php hinzu, indem Sie zu Appearance > Theme Editors > functions.php gehen .

Denken Sie danach daran, die Datei zu aktualisieren, und das war's. Sie haben die Breadcrumbs erfolgreich von Ihrer Website entfernt.

Fazit

Alles in allem können Breadcrumbs Ihnen helfen, die Navigation auf Ihrer Website zu verbessern und das Kundenerlebnis zu verbessern.

In diesem Leitfaden haben wir verschiedene Möglichkeiten gesehen, Breadcrumbs zu Ihrer WordPress-Site hinzuzufügen :

• Verwenden der Breadcrumbs-Optionen von Yoast SEO
• Mit einem speziellen Plugin
• Durch die Optionen Ihres Themas (falls vorhanden)

Außerdem haben wir Ihnen gezeigt, wie Sie Breadcrumbs mit einem einfachen Code-Snippet ganz einfach von Ihrer Website entfernen können. Denken Sie schließlich daran, dass Sie möglicherweise das Code-Snippet erneut hinzufügen müssen, um Breadcrumbs hinzuzufügen, wenn Sie Ihr Design ändern.

Weitere Informationen zum Anpassen Ihrer Website und zum Verbessern der Navigation finden Sie in den folgenden Tutorials:

• So bearbeiten Sie Breadcrumbs in WordPress
• So organisieren Sie WooCommerce-Produkte nach Marke
• So fügen Sie WooCommerce-Produktkategorien zum Menü hinzu

Haben Sie Ihrer Website Breadcrumbs hinzugefügt? Welche Methode hast du verwendet? Lassen Sie es uns im Kommentarbereich unten wissen!