So bearbeiten Sie Breadcrumbs in WordPress

Suchen Sie nach der einfachsten Möglichkeit, Ihre Breadcrumbs anzupassen? Sie sind genau an der richtigen Stelle. In diesem Leitfaden erfahren Sie, wie Sie Breadcrumbs in WordPress einfach bearbeiten können . Egal, ob Sie den Starttext ersetzen oder die Trennzeichen ändern möchten, wir sind für Sie da!

Was sind Semmelbrösel und wozu braucht man sie?

Breadcrumbs sind Navigationslinks, die normalerweise oben auf Ihren Seiten/Beiträgen angezeigt werden und Benutzern helfen, die Pfade von Links auf Ihrer Website zu erkunden. Auf diese Weise können sie herausfinden, welchen Teil Ihrer Website sie gerade anzeigen, und mit wenigen Klicks zu den Abzweigseiten oder sogar zur Startseite zurückkehren. Wenn Sie einen WooCommerce-Shop oder einen großen Blog betreiben, ist das Einrichten von Breadcrumbs für Ihre Navigationsanforderungen von entscheidender Bedeutung.

Die gute Nachricht ist, dass Sie diese Breadcrumbs ganz einfach auf verschiedene Arten integrieren können, je nach den Anforderungen Ihrer Website. Normalerweise richten die meisten Benutzer Breadcrumbs basierend auf der Hierarchie ein, sodass Breadcrumbs die Kategorien und Unterkategorien basierend auf der Struktur der Website anzeigen. Dazu gehört, anzuzeigen, welche Kategorie von Produkten oder Seiten Benutzer durchlaufen oder welche untergeordneten Inhalte sie anzeigen, sodass sie jederzeit mit einem Klick zur höheren Hierarchie zurückkehren können.

Alternativ können Sie Breadcrumbs basierend auf Attributen einrichten, sodass Breadcrumbs entsprechend den Attributen angezeigt werden, nach denen der Betrachter sucht. Sie können auch den Verlaufspfad verwenden und Breadcrumbs basierend auf den vergangenen Seiten anzeigen, die Benutzer auf Ihrer Website durchlaufen haben.

Das ist natürlich noch nicht alles, wenn es darum geht, Ihre Breadcrumbs anzupassen. Sie können benutzerdefinierte Breadcrumbs zu verschiedenen Seiten hinzufügen, wie zum Beispiel:

• Rubrik Archiv
• Tag-Archiv
• Seite/Beiträge unter der Website
• Seitennavigation von der Startseite aus
• Suchergebnisse
• 404-Fehlerseite
• Und mehr

Wie Sie sehen können, gibt es eine große Auswahl an Anpassungsmöglichkeiten für Breadcrumbs, um sicherzustellen, dass sie auf eine Weise angezeigt werden, die für die Struktur Ihrer Website sinnvoll ist und wie Sie möchten, dass Ihre Kunden durch Ihre Website navigieren.

Wenn Sie dedizierte Breadcrumbs-Plugins verwenden, stehen die Chancen gut, dass sie über eigene Optionen verfügen, um Ihre Breadcrumbs so weit anzupassen, wie Sie möchten. Wenn Sie jedoch die Breadcrumbs-Option von Yoast SEO oder WooCommerce verwenden, müssen Sie möglicherweise ein wenig Codierung verwenden, um sie weiter anzupassen.

Im nächsten Abschnitt zeigen wir Ihnen, wie Sie Breadcrumbs in WordPress bearbeiten und verschiedene Navigationselemente aktivieren können.

So bearbeiten Sie BreadCrumbs in WordPress

Zunächst müssen wir klarstellen, dass der Prozess zum Anpassen Ihrer Breadcrumbs unterschiedlich sein kann, je nachdem, ob Sie Yoast SEO, ein dediziertes WordPress-Plugin oder WooCommerce-Breadcrumbs verwenden.

Bevor Sie beginnen, empfehlen wir Ihnen auch, sich diese Anleitung anzusehen, um sicherzustellen, dass Sie Ihre Breadcrumbs von Grund auf richtig eingerichtet haben.

In diesem Abschnitt lernen Sie verschiedene Methoden zum Bearbeiten von Breadcrumbs in WordPress kennen .

1. Passen Sie Breadcrumbs mit Yoast SEO an
2. Bearbeiten Sie WooCommerce-Breadcrumbs programmgesteuert

Werfen wir einen Blick auf jede Methode.

1) So bearbeiten Sie BreadCrumbs in WooCommerce mit Yoast SEO

Sobald Sie Breadcrumbs auf Yoast SEO aktiviert haben, können Sie sie mit den dedizierten Einstellungen konfigurieren. Gehen Sie dazu in Ihrem WordPress-Admin-Dashboard zu Yoast SEO > Search Appearance und gehen Sie zur Registerkarte Breadcrumbs .

Hier können Sie Ihre Breadcrumbs bearbeiten. Beginnen wir mit den wichtigsten Schritten:

Ändern des Trennzeichens

Mit der Option Trennzeichen zwischen Breadcrumbs können Sie Ihr Breadcrumbs-Trennzeichen ändern.

Geben Sie einfach das gewünschte Trennzeichen ein. Die häufigsten sind „ | " oder "/".

Bearbeiten des Textes der Startseite

Sie können den Text der Homepage mit der Option Anchor Text for the Homepage ersetzen.

Geben Sie einfach Ihren neuen Homepage-Text in dieses Feld ein und er sieht so aus:

Präfixe für Archiv, Suchseite und 404-Seiten ändern

Mit Yoast SEO können Sie auch Breadcrumbs bearbeiten, indem Sie die Präfixe für Ihr Archiv, Suchergebnisse und Fehler-404-Seiten individuell ändern.

Fügen Sie einfach den gewünschten Text in die entsprechenden Felder ein und speichern Sie die Änderungen.

Hier erfahren Sie mehr über zusätzliche Optionen zu Taxonomien für Inhaltstypen und Taxonomien sowie über zusätzliche SEO-Optionen von Yoast.

Hinzufügen von Shop-Seiten-Breadcrumbs zu Ihrem WooCommerce-Shop in Yoast SEO

Eine weitere interessante Alternative besteht darin, die Datei functions.php zu bearbeiten und Ihren Breadcrumbs einen Shop-Link hinzuzufügen. Dieser Link wird angezeigt, wenn Ihre Kunden Ihre WooCommerce-Shop-Seiten durchsuchen. Wenn Sie also einen Online-Shop haben, empfehlen wir Ihnen dringend, ihn auszuprobieren.

Um Ihre Datei functions.php zu öffnen, gehen Sie in Ihrer Seitenleiste zu Darstellung > Themen-Editor und drücken Sie in der rechten Seitenleiste auf functions.php , in der Ihre Themendateien angezeigt werden.

Kopieren Sie dann einfach dieses Skript und fügen Sie es ein:

 add_filter( 'wpseo_breadcrumb_links', 'wpseo_breadcrumb_add_woo_shop_link' );

Funktion wpseo_breadcrumb_add_woo_shop_link( $links ) {
globaler $post;

if ( is_woocommerce() ) {
$breadcrumb[] = array(
'url' => get_permalink( woocommerce_get_page_id( 'shop' ) ),
'text' => 'Shop',
);

array_splice($links, 1, -2, $breadcrumb);
}

$links zurückgeben;
} 

Drücken Sie dann auf Aktualisieren und das war's. Wie Sie sehen können, haben wir den Breadcrumbs einen Link zu einem Produkt hinzugefügt.

Wenn Sie Filter und Funktionen verwenden können, können Sie außerdem den Filter wpseo_breadcrumb_single_link verwenden, um die Breadcrumb-Pfade noch weiter anzupassen. Hier erfahren Sie mehr darüber.

2) So bearbeiten Sie WooCommerce-Breadcrumbs programmgesteuert

Wenn Sie einen WooCommerce-Shop betreiben, können Sie auch Breadcrumbs aktivieren und bearbeiten, die speziell für WooCommerce-Sites entwickelt wurden . Diese Breadcrumbs werden nur auf Ihren WooCommerce-Seiten aktiviert, daher ist dies die perfekte Option für jeden E-Commerce-Shop.

Beginnen wir mit den Grundlagen und aktivieren die Breadcrumbs in WooCommerce. Dazu verwenden wir ein einfaches WooCommerce-Breadcrumbs-Code-Snippet.

Fügen Sie einfach den folgenden PHP-Code in Ihre Designdateien ein (wir persönlich empfehlen, ihn Ihrer Header-Datei hinzuzufügen) . Gehen Sie in Ihrem Dashboard zu Aussehen > Design-Editor und wählen Sie Header.php in der rechten Seitenleiste aus, um die Datei im Design-Editor zu öffnen .

Fügen Sie dann einfach das folgende Snippet ein:

 <?php if (class_exists('WooCommerce') && is_woocommerce()) : ?>

<?php woocommerce_breadcrumb(); ?>

<?php endif; ?> 

Dadurch wird Ihr WooCommerce-Breadcrumb auf Ihren Shop-Seiten aktiviert. Sie können die Elemente jedoch auch mit ein paar raffinierten Funktionen noch weiter anpassen.

Denken Sie daran, diese Code-Snippets zu Ihrer Datei functions.php hinzuzufügen, die Sie unter Darstellung > Design-Editor > functions.php finden.

Bearbeiten Sie den WooCommerce BreadCrumbs-Starttext

Beginnen wir mit einem einfachen Beispiel und sehen, wie Sie den Home-Text Ihrer WooCommerce-Breadcrumbs ändern können. Ändern Sie einfach den Text in Zeile $defaults['Home'] = 'Home Page Text' von 'Home Page Text' in Ihren gewünschten Text.

 add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
Funktion wcc_change_breadcrumb_home_text( $defaults ) {
// Ändern Sie den Breadcrumb-Home-Text von 'Home' in 'Apartment'
$defaults['home'] = 'Homepage-Text';
$Standardwerte zurückgeben;
} 

Bearbeiten Sie WooCommerce BreadCrumbs Home Text-Links

Ebenso können Sie den Homepage-Link von Ihren WooCommerce-Breadcrumbs mit einem ähnlichen Snippet ändern. Denken Sie daran, den URL-Link nach dem Rückgabetext zu ändern. Beispielsweise müssen Sie für Ihr Code-Snippet http://quadlayers.com/blog durch Ihren erforderlichen neuen Link zwischen den beiden Anführungszeichen „.

 add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
Funktion woo_custom_breadrumb_home_url() {
geben Sie „http://quadlayers.com/blog“ zurück;
} 

Bearbeiten von WooCommerce Breadcrumbs-Trennzeichen, vor und nach Text und mehr

Sie können auch die Standard-Array- Funktion verwenden, um mehrere Elemente Ihrer WooCommerce-Breadcrumbs wie Trennzeichen, Vor- und Nachtext und mehr zu ändern.

Ersetzen Sie im Snippet einfach den Text zwischen dem Abschnitt „ “ im Array durch Ihren erforderlichen Text im folgenden Snippet:

 add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
Funktion jk_woocommerce_breadcrumbs() {
Rückgabe-Array (
'Trennzeichen' => ' > ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'vor' => ' ',
'after' => 'Nach Text',
'home' => _x( 'Home text ', 'breadcrumb', 'woocommerce' ),
);
} 

Dadurch ändern sich die Trennzeichen und der Vor- und Nachtext.

Sie können sich zusätzliche Code-Snippets ansehen, um die Breadcrumbs Ihres WooCommerce in der Dokumentation hier anzupassen.

Bonus: Fügen Sie Ihre eigenen Brotkrümel hinzu und gestalten Sie sie

Was ist, wenn Sie sich weder auf WooCommerce noch auf Yoast SEO verlassen wollen? Gibt es andere Möglichkeiten, Breadcrumbs in WordPress zu bearbeiten? Ja, die gibt es! Sie können Ihre eigene benutzerdefinierte Funktion für Ihre Breadcrumbs erstellen. Auf diese Weise können Sie benutzerdefinierte Breadcrumbs erstellen, die Sie mit benutzerdefiniertem CSS gestalten können.

Dies ist die perfekte Option für erfahrenere Benutzer, die sich mit CSS und PHP auskennen. Wenn Sie eher ein Anfänger sind und sich nicht sicher sind, ob Sie Ihre eigenen Codes und Funktionen einrichten möchten, empfehlen wir Ihnen dringend, entweder eines dieser Breadcrumbs-Plugins zu verwenden oder die oben genannten Methoden zu verwenden, um Ihre Breadcrumbs anzupassen.

Wenn Sie erfahren genug sind, um Ihre eigenen Funktionen zu verwenden, empfehlen wir Ihnen, vor dem Start ein vollständiges Backup Ihrer Website zu erstellen und ein untergeordnetes Thema zu installieren. Danach können Sie loslegen.

Gehen Sie zuerst zu Appearance > Theme Editor und fügen Sie die folgende Funktion zu Ihrer functions.php -Datei hinzu.

 Funktion get_breadcrumb() {
echo '<a href='.home_url().' rel="nofollow">Startseite</a>';
if (is_category() || is_single()) {
echo "&nbsp;/&nbsp;";
the_category(' &bull; ');
if (is_single()) {
echo " &nbsp;/ &nbsp; ";
der Titel();
}
} elseif (is_page()) {
echo "&nbsp;/ ";
echo the_title();
} elseif (is_search()) {
echo "&nbsp;/ $nbsp Suchergebnisse für...";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
} 

Bearbeiten des Codes Ihrer benutzerdefinierten Breadcrumbs für eine bessere Anpassung

Denken Sie daran, dass Sie einen bestimmten Abschnitt des Codes verwenden können, um den Text Ihrer Startseite und das Trennzeichen oben in der Funktion zu ändern.

Sie können beispielsweise die folgende Zeile bearbeiten:

 echo '<a href='.home_url().' rel="nofollow">Startseite</a>';

Zu

 echo '<a href= https://quadlayers.com/blog rel="nofollow">Home</a>';

Oder eine beliebige URL, die Sie möchten.

Darüber hinaus können Sie auch das Trennzeichen ändern, indem Sie das / auf der rechten Echo-Anweisung im Code ersetzen.

Beispielsweise können Sie das Trennzeichen von / bis > wie folgt ersetzen:

 echo "  >  ";

Denken Sie daran, dass das &nbsp nur hinzugefügt wird, um ein Leerzeichen zwischen und nach den Trennzeichen einzufügen.

Klicken Sie dann auf Datei aktualisieren, um Ihre Funktion zu speichern, und drücken Sie dann auf die Header.php -Datei in der Datei-Seitenleiste auf der rechten Seite, um zu Ihrer Theme-Header-Datei zu wechseln. Jetzt müssen Sie den Funktionsaufruf zu Ihrer Header-Datei hinzufügen, indem Sie dieses Snippet zu Ihrer Header.php -Datei hinzufügen.

 <?php custom_breadcrumbs(); ?> 

Das ist es! So können Sie Breadcrumbs in WordPress mit einer benutzerdefinierten Funktion bearbeiten.

Gestalten Sie Ihre benutzerdefinierten Breadcrumbs

Sie können Ihre Breadcrumbs auch mit dem zusätzlichen CSS-Abschnitt Ihres Designs gestalten. Gehen Sie dazu einfach zu Darstellungen > Anpassen und gehen Sie zum Abschnitt Zusätzliches CSS , wie unten gezeigt.

Hier können Sie das folgende CSS-Snippet hinzufügen und die erforderlichen Werte ändern, um Ihre Breadcrumbs zu gestalten und anzupassen.

 #Semmelbrösel{
Listenstil: keiner;
Rand: 10px 0;
Überlauf versteckt;
}

#Semmelbrösel {
display:inline-block;
vertikale Ausrichtung: Mitte;
Rand rechts: 15px;
}

#paniermehl .separator{
Schriftgröße: 18px;
Schriftstärke: 100;
Farbe:#ccc;
} 

Natürlich können Sie all diese Werte ändern und herumspielen, um diejenigen zu finden, die am besten zu Ihrem Website-Thema passen. Wenn Sie mit den Änderungen zufrieden sind, denken Sie daran, auf Veröffentlichen zu klicken .

Fazit

Zusammenfassend sind Breadcrumbs sehr nützlich, um Ihren Benutzern bei der Navigation auf Ihrer Website zu helfen. Dies ist besonders wichtig, wenn Sie einen Online-Shop oder eine Website mit vielen Abschnitten haben.

In diesem Leitfaden haben Sie verschiedene Methoden zum Bearbeiten von Breadcrumbs in WordPress kennengelernt . Bevor Sie Ihre Breadcrumbs anpassen, müssen Sie sie mit einer der folgenden Methoden einrichten:

• Mit einem speziellen Breadcrumbs-Plugin
• Mit Yoast SEO
• Mit dem speziellen Breadcrumbs-Hook von WooCommerce
• Indem Sie Ihre eigene Breadcrumbs-Funktion erstellen

Sobald Sie sie konfiguriert haben, können Sie sie anpassen. In diesem Leitfaden haben wir zwei Möglichkeiten gesehen, dies zu tun:

• Bearbeiten Sie Breadcrumbs mit Yoast SEO
• Passen Sie WooCommerce-Breadcrumbs programmgesteuert an

Wenn Sie Yoast SEO verwenden und keine Programmierkenntnisse haben, ist die erste Methode für Sie. Wenn Sie andererseits über Programmierkenntnisse verfügen und mehr Flexibilität wünschen, können Sie die Breadcrumbs programmgesteuert anpassen.

Wenn Sie Hilfe benötigen, teilen Sie uns dies in den Kommentaren unten mit und wir helfen Ihnen so gut wir können.

Wenn Sie schließlich mehr über das Hinzufügen weiterer Navigationsfunktionen zu Ihrer Website erfahren möchten, empfehlen wir Ihnen, einige dieser Artikel zu lesen:

• So passen Sie die 404-Seite in WordPress an
• Verwandte Produkte in WooCommerce ausblenden und entfernen
• So passen Sie die WooCommerce-Kategorieseite an