Trotz des banalen Namens sind Breadcrumbs sehr nützliche Werkzeuge zur Verbesserung der User Experience (UX) und der Suchmaschinenoptimierung (SEO) deiner Website. Sie zu aktivieren ist einfach mit Hilfe eines Plugins oder eines kleinen benutzerdefinierten Codes.
In diesem Beitrag stellen wir dir die WordPress-Breadcrumbs vor und erklären, wie sie funktionieren. Dann zeigen wir dir, wie du sie auf deiner Seite hinzufügen, sie stylen und entfernen kannst. Es gibt eine Menge abzudecken, also lasst uns anfangen!
Was sind WordPress Breadcrumbs?
Breadcrumbs, wie sie sich auf WordPress (oder jede andere Website) beziehen, sind Navigationslinks, die oben auf einem Beitrag oder einer Seite erscheinen. Sie zeigen den Benutzern die übergeordneten Kategorien, die sie zu dem Inhalt, den sie gerade ansehen, geführt haben, und ermöglichen außerdem eine einfache Navigation zurück zu den zuvor angesehenen Seiten.
Betrachte zum Beispiel das folgende Beispiel:
Auf der linken Seite, direkt unter der Kopfzeile, sieht man die Worte Home > Resource Center > Kinsta Blog. Jedes ist ein Link zurück zur entsprechenden Seite des aktuellen Beitrags. Dies ermöglicht es den Lesern unseres Blogs, mit einem einzigen Klick zu jedem dieser wichtigen Inhaltsbereiche zu navigieren, anstatt den Zurück-Button, das Menü oder die Suchfunktion verwenden zu müssen.
So haben die Breadcrumbs ihren Namen bekommen: Sie schaffen einen Pfad, der die Nutzer zurück „nach Hause“ führt. Sie sind besonders hilfreich für Websites wie Blogs und Online-Shops, auf denen sich Besucher zwischen einzelnen Beiträgen, Produktseiten und Kategoriearchiven bewegen können, auf denen sie ähnliche Inhalte finden können.
Wie funktionieren WordPress Breadcrumbs?
Es gibt drei verschiedene Arten von WordPress-Breadcrumbs. Alle enthalten Navigationslinks wie oben beschrieben, aber auf leicht unterschiedliche Weise:
- Hierarchie-basiert: Diese Breadcrumbs zeigen den Benutzern, wo sie sich in der Struktur deiner Website befinden, wie im obigen Beispiel.
- Attribut-basiert: Diese Breadcrumbs werden hauptsächlich auf E-Commerce-Sites verwendet und zeigen die Attribute an, nach denen der Benutzer gesucht hat und die ihn zu dem Produkt geführt haben, das er gerade betrachtet.
- Historienbasiert: Wenn sich die Benutzer auf der Webseite von Seite zu Seite bewegen, führen diese Breadcrumbs wieder auf den Weg zurück, den sie gekommen sind.
Jede Sorte von Breadcrumbs ist für verschiedene Zwecke nützlich. Alle können jedoch die Navigation und durch die Erweiterung UX verbessern.
Sie sind auch für SEO-Zwecke von Vorteil. Breadcrumbs zeigen deutlich die Beziehungen zwischen verschiedenen Teilen des Inhalts auf deiner Website. Auf diese Weise machen sie es für Suchmaschinen-Crawler oder ‚Bots‘ einfacher zu verstehen, wie deine Seite strukturiert ist.
Dies ermöglicht diesen Bots, die Seiten deiner Website genauer zu indizieren. Suchmaschinen können auch deine Breadcrumbs in den Ergebnislisten anzeigen, so dass Benutzer zusätzliche Inhalte auf deiner Website sehen können, die mit den gesuchten Informationen zusammenhängen.
Wie man WordPress Breadcrumbs zu deiner Seite hinzufügt (4 Methoden)
Egal ob du ein Programmierer oder ein WordPress-Anfänger bist, du kannst schnell und einfach in wenigen Schritten Breadcrumbs zu deiner Seite hinzufügen. Hier sind vier verschiedene Möglichkeiten, wie du diese Aufgabe erfüllen kannst.
1. Enable Breadcrumbs in Yoast SEO
Yoast SEO ist ein populäres Plugin, das WordPress-Benutzern hilft, sich ihren Suchmaschinen-Rankings anzunähern und ihre Inhalte entsprechend zu optimieren. Es enthält auch einige andere Funktionen zur Steigerung der Sichtbarkeit deiner Website, einschließlich Breadcrumbs.
Wenn du es noch nicht getan hast, installiere und aktiviere das Plugin in deinem WordPress-Dashboard:
Als nächstes musst du diesen Codeausschnitt zu deinem Theme hinzufügen:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Wo genau du es hinzufügst, ist deine Sache. Wenn du Breadcrumbs in deinen Blogeinträgen verwenden möchtest, kannst du sie in deine single.php Vorlagendatei einfügen.
Alternativ kannst du es am Ende deiner header.php Datei einfügen, um Breadcrumbs zu deiner gesamten Website hinzuzufügen:
Denke daran, dass zukünftige Theme-Updates diesen benutzerdefinierten Code überschreiben können. Du musst dich mit deinem Theme-Entwickler in Verbindung setzen, um Informationen darüber zu erhalten, wie du dieses Problem vermeiden oder einfach ein Child-Theme verwenden kannst. Sobald das Snippet installiert ist, navigiere zu SEO > Suchanzeige > Breadcrumbs in deinem Dashboard:
Schalte den Schalter für die Einstellungen von Breadcrumbs auf aktiviert. Dann schau dir deine Seite an:
Du solltest nun die Brotkrümel auf den relevanten Teilen deiner Seite sehen, basierend darauf, wo du den Code-Schnipsel hinzugefügt hast.
2. Aktiviere Breadcrumbs mit einem WordPress Breadcrumbs Plugin
Das Hinzufügen von Breadcrumbs mit Yoast ist besonders praktisch, wenn du dieses Plugin bereits für SEO-Zwecke verwendest. Wenn du jedoch ein anderes Plugin für die Optimierung deiner Inhalte bevorzugst, ist der obige Ansatz weniger hilfreich. Glücklicherweise gibt es verschiedene andere Plugins, die speziell auf das Hinzufügen von Breadcrumbs zu WordPress ausgerichtet sind.
Breadcrumb NavXT
Das beliebteste Plugin zum Hinzufügen von Breadcrumbs zu WordPress ist neben Yoast Breadcrumb NavXT:
Dieses Plugin stellt ein Breadcrumbs-Widget zur Verfügung, das du zu jedem beliebigen Widget Bereich deines Themes hinzufügen kannst, wie z.B. eine Seitenleiste oder eine Fußzeile. Es ist in hohem Maße anpassbar, so dass du wählen kannst, welche Seiten und Kategorien im Trail angezeigt werden sollen. Breadcrumbs NavXT enthält auch Schema-Markup zur Verbesserung der SEO.
Um Breadcrumbs mit diesem Plugin hinzuzufügen, navigiere zu Darstellung > Widgets. Du wirst ein neues Breadcrumb NavXT-Widget sehen, das du in den Bereich des Widgets ziehen möchtest, in dem es erscheinen soll:
Klicke auf den Dropdown-Pfeil, um die Einstellungen des Widgets zu öffnen und fülle dann die erforderlichen Felder aus:
Stelle sicher, dass du die Checkboxen nach Bedarf aktivierst, um Links zu deinen Breadcrumbs hinzuzufügen, ihre Reihenfolge festzulegen, sie auf der Startseite auszublenden und das Caching zu ignorieren. Wenn du fertig bist, klicke auf die Schaltfläche „Speichern“ und überprüfe dann das Frontend deiner Website:
Deine Breadcrumbs sollten nun in dem Bereich des Widgets sichtbar sein, den du für sie ausgewählt hast.
Flexy Breadcrumb
Als Alternative dazu ist Flexy Breadcrumb das am höchsten bewertete Plugin zum Hinzufügen von Breadcrumb zu WordPress:
Wenn dieses Plugin installiert und aktiviert ist, kannst du mit dem Shortcode [flexy_breadcrumb] Breadcrumbs zu deiner Seite hinzufügen. Dies gibt dir ein wenig mehr Flexibilität, wo deine Trails erscheinen werden. Außerdem hast du mehr Kontrolle über Styling-Komponenten wie Schriftgröße, Farbe und Icons.
Nachdem du Flexy Breadcrumbs installiert hast, siehst du ein neues Element in der Sidebar deines Dashboards:
Dann hast du einige Einstellungen zu konfigurieren. Auf der Registerkarte Allgemein kannst du den Text und das Symbol für deine Homepage ändern, die Zeichenbeschränkung festlegen und die Hierarchie bestimmen:
In der Registerkarte Typografie kannst du auch die Schriftfarbe und -größe für deine Breadcrumbs anpassen:
Nachdem du deinen Trail angepasst hast, musst du den Shortcode [flexy_breadcrumb] überall dort hinzufügen, wo deine Breadcrumbs erscheinen sollen. Während es möglich ist, dies in jedem einzelnen Beitrag, den du auf deiner Seite veröffentlichst, zu tun, ist es effizienter, den Shortcode in ein WordPress Widget einzufügen:
Wenn du das Frontend deiner Seite überprüfst, solltest du deine Breadcrumbs überall dort sehen können, wo du den Shortcode hinzugefügt hast.
WooCommerce Breadcrumb
Für Online-Händler ist WooCommerce Breadcrumbs eine einfache Möglichkeit, Navigationslinks zu deinen Produktseiten hinzuzufügen:
Das WooCommerce Breadcrumbs Plugin
Wenn du deinen Onlineshop mit dem beliebten WooCommerce-Plugin betreibst, könnte dies die beste Option für dich sein. Es ermöglicht es dir, Breadcrumbs für deine Produktseiten zu aktivieren, um die Kundennavigation auf deiner Seite zu verbessern.
Nach der Installation und Aktivierung kannst Du zu Einstellungen > WC Breadcrumbs navigieren, um deine Breadcrumbs individuell anzupassen:
Die wichtigste zu beachtende Einstellung ist die Checkbox Breadcrumbs aktivieren. Du musst sicherstellen, dass es ausgewählt ist, damit deine Breadcrumbs angezeigt werden. Überprüfe dann eine deine Produktseiten:
Ihr Breadcrumb-Trail sollte oben auf der Seite sichtbar sein.
Breadcrumb
Schließlich ist Breadcrumb ein leichtgewichtiges Plugin, das es dir ermöglicht, mit Hilfe von Shortcodes überall auf deiner Website Breadcrumb hinzuzufügen:
Dieses Plugin hat die umfangreichsten Einstellungen von allen in diesem Beitrag aufgeführten. Du kannst auf sie zugreifen, indem du auf Breadcrumb in der Sidebar deines WordPress-Dashboards klickst:
Die erste Registerkarte ist mit „Optionen“ beschriftet und enthält einige allgemeine Einstellungen wie z. B. benutzerdefinierten Text, Trennzeichen und Zeichenbeschränkungen:
Es gibt auch einen ganzen Reiter, der den Stylingoptionen gewidmet ist. Es gibt mehrere Pfeilschaltflächen, aus denen du wählen kannst, sowie Schriftgrößen und -farben:
Wenn du über einige Programmierkenntnisse verfügst und mehr Kontrolle über dein Styling haben möchtest, kannst du auch die Registerkarte Custom CSS verwenden:
Schließlich ist es wichtig, die Shortcode-Registerkarte zu besuchen, um deine Breadcrumbs auf deiner Seite hinzuzufügen:
Du kannst den Shortcode überall auf deiner Seite verwenden, genau wie bei den anderen Plugins, die wir abgedeckt haben. Allerdings bietet Breadcrumb auch einen Code-Schnipsel, den du einer deiner Template-Dateien hinzufügen kannst, um deine Trails in deinen Header, Footer oder an anderer Stelle einzubauen.
3. Verwende ein Theme, das Breadcrumbs Enthält
Während sie in der Regel im Zusammenhang mit der Steuerung des Aussehens deiner Website gedacht sind, können WordPress-Themes auch die Funktionalität deiner Website beeinflussen. Eine Möglichkeit ist das Hinzufügen von Breadcrumbs zu deinen Seiten.
Der Nachteil der Verwendung eines WordPress-Themes zum Hinzufügen von Breadcrumbs zu einer bestehenden WordPress-Site ist, dass es auch die Änderung des Erscheinungsbildes deiner Website beinhaltet. Wenn du eine etablierte Marken- und Website-Identität hast, ist dies keine wirklich praktische Lösung, und du bist mit einem Plugin wahrscheinlich besser dran.
Wenn du jedoch eine neue WordPress-Site beginnst oder eine Website-Neugestaltung durchführst, ist die Auswahl eines Themes, das Breadcrumbs enthält, eine Methode mit geringem Aufwand, um diese zu deiner Website hinzuzufügen. Außerdem sind im WordPress Theme Directory mehrere Optionen kostenlos verfügbar.
OceanWP
OceanWP ist eines der beliebtesten Mehrzweck-WordPress-Themes:
Es enthält einen Shortcode, mit dem du einfach Breadcrumbs auf deine Seiten anwenden kannst. Es sind auch mehrere Demos für die Verwendung mit OceanWP verfügbar, die Breadcrumbs enthalten. Um den Shortcode zu verwenden, füge einfach [oceanwp_breadcrumb] zu einem Post-, Seiten- oder Text-Widget hinzu:
Du kannst deine Breadcrumbs mit den folgenden Parametern anpassen:
- Class: Enthält eine benutzerdefinierte CSS-Klasse.
- Color: Ändert die Farbe des Textes.
- Hover Color: Ändert die Farbe des Textes, wenn der Benutzer mit der Maus über Ihre Breadcrumbs fährt.
Füge einfach einen oder alle dieser Parameter direkt in die Shortcode-Klammern ein:
Nun solltest du deine Breadcrumbs auf den entsprechenden Seiten sehen.
Astra
Ebenso macht Astra auch das Hinzufügen von Breadcrumbs auf deiner Website einfach:
Die einfachste Möglichkeit, Breadcrumbs mit Astra zu aktivieren, ist über den Customizer. Wenn das Theme installiert und aktiviert ist, navigiere zu Darstellung > Anpassen:
Dann wähle den Breadcrumb Tab:
Hier siehst du ein Drop-Down-Menü, mit dem du wählen kannst, wo du deine Breadcrumbs auf der Seite anzeigen lassen willst:
Sobald du deine Auswahl getroffen hast, erscheinen auch einige Styling-Optionen:
Stelle sicher, dass du auf den Customizer Publish-Button klickst, um deine Änderungen zu speichern.
4. Breadcrumbs Manuell Hinzufügen
Plugins und Themes sind ein Teil dessen, was WordPress zu einer so benutzerfreundlichen und zugänglichen Plattform macht. Für einige fortgeschrittene Benutzer und Entwickler können sie sich jedoch einschränkend auswirken. Code kann ein sehr kreatives Medium sein, und die Möglichkeit, frei zu schreiben, kann dich ansprechen.
Um Breadcrumbs manuell anzuzeigen, musst du zwei Dinge tun. Erstens musst du eine Funktion zu deiner functions.php Datei hinzufügen, um sie zu aktivieren. Hier ist ein Beispiel für den Code, den du verwenden könntest:
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()){
echo " " ";
the_category (' • ');
if (is_single()) {
echo " " ";
the_title();
}
} elseif (is_page()) {
echo " " ";
echo the_title();
} elseif (is_search()) {
echo " " ";Search Results for…
echo '"';
echo the_search_query();
echo '"';
}
}
Sobald die Funktion hinzugefügt wurde, musst du sie in den Template-Dateien aufrufen, in denen deine Breadcrumbs erscheinen sollen. Der Aufruf der Funktion in der single.php lässt Breadcrumbs in deinen Beiträgen erscheinen, der Aufruf in der header.php zeigt sie überall dort an, wo dein Header erscheint, und so weiter.
Der Code, den du verwenden solltest, sollte ungefähr so aussehen:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Wenn du diese Dateien änderst, werden zwar Breadcrumbs auf deiner Website angezeigt, aber du kannst sie nicht so gestalten, dass sie zu deinem Design passen. Dazu musst du dir auch die Hände mit etwas CSS schmutzig machen.
Wie du Deine WordPress Breadcrumbs Stylen Kannst
Das Styling deiner Breadcrumbs ist notwendig, wenn du sie selbst programmieren willst. Es kann aber auch hilfreich sein, wenn du ein Plugin oder ein Theme verwendest, um sie hinzuzufügen. Das Standard-Styling, das diese Tools bieten, passt möglicherweise nicht gut zu deiner Website. In diesem Fall solltest du sie vielleicht anpassen, um die Konsistenz zu wahren.
Du kannst benutzerdefinierte CSS hinzufügen, um deine Breadcrumbs im Stylesheet deines Designs (style.css) oder im Bereich „Zusätzliche CSS“ des Customizers zu gestalten:
Es gibt viele Möglichkeiten, wie du deine Breadcrumbs an das Design deiner Website anpassen kannst, z.B. indem du die Schriftart, Größe und Farbe anpasst. Du kannst auch Elemente wie Ränder, Füllungen, Rahmen und Symbole in Betracht ziehen.
Hier ist ein Beispiel für einige CSS, die zur Gestaltung deiner Breadcrumbs verwendet werden können:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Es gibt viele Möglichkeiten, wenn es um CSS geht. Es kann also einige Experimente erfordern, um deine Breadcrumbs genau so aussehen zu lassen, wie du sie haben willst.
Wie man WordPress Breadcrumbs von Deiner Seite Entfernt
Obwohl es viele Vorteile gibt, wenn man Breadcrumbs auf deiner Seite hinzufügt, bedeutet das nicht, dass sie für jeden geeignet sind. Manche Leute finden sie vielleicht verwirrend oder haben das Gefühl, dass sie die Seiten der Website zu unübersichtlich machen.
Wenn du Breadcrumbs von deiner WordPress-Site entfernen möchtest, kannst du sie mit jeder Methode entfernen, die auf der Art und Weise, wie du sie ursprünglich hinzugefügt hast, sinnvoll ist. Wenn du z. B. deine Breadcrumbs benutzerdefiniert programmiert hast, kannst du den hinzugefügten Code einfach aus den Dateien deines Themes entfernen.
Das Deaktivieren von Breadcrumbs, die mit einem Plugin hinzugefügt wurden, ist normalerweise so einfach wie das Deaktivieren des Plugins. Im Fall von Yoast SEO kannst du in den Einstellungen für das Aussehen der Suche auf den Reiter Breadcrumbs navigieren und den entsprechenden Schalter auf Deaktivieren setzen.
Dasselbe gilt für Themes, die Breadcrumbs über eine Einstellung oder WordPress-Shortcodes aktivieren. Es gibt jedoch einige Designs, die standardmäßig Breadcrumbs hinzufügen. Diese zu entfernen kann etwas schwieriger sein, besonders wenn du nicht sehr erfahren mit Code bist.
Wenn dies deine Situation ist, musst du zur Datei header.php deiner Website navigieren. Dort führe einen Suchbefehl für „Breadcrumb“ aus. Dies sollte den Code hervorheben, der die Funktion aufruft, die Breadcrumbs zu deiner Seite hinzufügt (falls sie hier existiert):
Lösche diese Codezeile, um Breadcrumbs von deiner Seite zu entfernen. Wenn du nicht den richtigen Code gefunden hast, kannst du diesen Vorgang in deinen single.php und page.php Dateien erneut versuchen, um zu sehen, ob die Funktion stattdessen in einem dieser Templates aufgerufen wird.
Wenn alles andere fehlschlägt, wende dich an den Entwickler deines Themes, um Unterstützung zu erhalten. Beachte, dass die Aktualisierung deines WordPress-Themes alle Änderungen, die du an den Dateien vorgenommen hast, überschreiben kann. Aus diesem Grund wird empfohlen, ein Child-Theme zu verwenden, um die Anpassungen auf unbestimmte Zeit zu erhalten.
Zusammenfassung
Starke UX und SEO sind beide der Schlüssel zu einer erfolgreichen Website. Das Aktivieren von WordPress-Breadcrumbs kann es Besuchern erleichtern, durch deine Website zu navigieren, während es gleichzeitig den Suchmaschinen hilft, die Struktur zu verstehen und deine Seiten genau zu indizieren.
In diesem Beitrag haben wir vier Methoden für das Hinzufügen von Breadcrumbs zu deiner WordPress Website behandelt:
- Schalte Breadcrumbs in Yoast SEO ein.
- Installiere und konfiguriere ein WordPress-Breadcrumbs-Plugin.
- Verwende ein Theme, das Breadcrumbs enthält.
- Füge deine Breadcrumbs manuell mit Hilfe von Code hinzu.
Hast du Fragen zu WordPress Breadcrumbs oder wie man sie verwendet? Lasst es uns in den Kommentaren unten wissen!
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar