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

Die Navigation ist ein wesentlicher Bestandteil jeder Website, und es gibt mehr als eine Möglichkeit, sie bereitzustellen. Das Hauptmenü auf Ihrer Website ist das primäre Navigationstool, das Benutzer zu den gewünschten Inhalten führt. Es sagt Ihren Kunden jedoch nicht, wo sie sich gerade auf Ihrer Website befinden.

Ein Breadcrumb-Menü ist ein sekundäres Navigationssystem, das Ihren Kunden mitteilt, wo sie sich in Bezug auf Ihre Homepage befinden. Dies hilft ihnen, mühelos durch die Seiten Ihrer Website zu navigieren und sich nicht zu verirren.

In diesem Artikel werden wir untersuchen, was Breadcrumbs sind und wie sie Ihrer Website zugute kommen. Anschließend zeigen wir Ihnen, wie Sie Ihrer WordPress-Website Breadcrumbs hinzufügen. Lass uns anfangen!

Was sind Breadcrumbs in WordPress?

Breadcrumbs ist der Begriff, der verwendet wird, um ein hierarchisches Navigationsmenü zu beschreiben. Diese Art von Menü beinhaltet eine Spur von Links, ähnlich der Brotkrümelspur, die Hänsel und Gretel hinterlassen haben:

Da viele Benutzer Ihre WordPress-Site nicht über die Startseite aufrufen, hilft ihnen die Breadcrumb-Navigation zu verstehen, wo sie gelandet sind. Suchmaschinen verwenden Breadcrumbs auch, um die Hierarchie Ihrer Webseiten besser zu verstehen.

Vorteile der Zugabe von Paniermehl

Das Hinzufügen von WordPress-Breadcrumb-Menüs zu Ihrer Website bietet mehrere Vorteile. Google liebt zum Beispiel Breadcrumbs, daher kann diese Funktion Ihre Suchmaschinenoptimierung (SEO) verbessern und mehr Besucher auf Ihre Website bringen.

Breadcrumb-Menüs können auch die Absprungraten reduzieren, da sie die User Experience (UX) Ihrer Website verbessern. Wenn Benutzer einfach auf Ihrer Website navigieren können, verbringen sie eher Zeit damit.

So fügen Sie Breadcrumbs in WordPress hinzu

Sie können Breadcrumbs auf zwei Arten zu Ihrer WordPress-Website hinzufügen. Die einfachste Methode ist die Verwendung eines WordPress-Plugins, aber Sie können auch Breadcrumbs in die header.php- Datei Ihrer Website codieren. Bevor Sie eine der beiden Methoden anwenden, sollten Sie ein Backup Ihrer Website erstellen, falls etwas schief geht.

Methode 1: Verwenden eines Plugins

Der einfachste Weg, Breadcrumbs zu WordPress hinzuzufügen, ist mit einem Breadcrumb-Plugin. Es gibt viele Plugins, die Sie verwenden können, einschließlich Breadcrumb NavXT und Yoast SEO:

Yoast SEO ist oft die beste Option, da es sich wahrscheinlich um ein Plugin handelt, das Ihre Website bereits verwendet.

Schritt 1: Laden Sie das Yoast SEO-Plugin herunter

Da Yoast ein SEO-Plugin ist, bietet es eine breite Palette an Funktionen. Dazu gehört die Erstellung und Gestaltung der Breadcrumb-Navigation.

Um dieses Plugin zu verwenden, müssen Sie es aus dem WordPress-Plugin-Verzeichnis herunterladen. Sie können einfach zur Plugin- Seite Ihrer Website gehen, nach „Yoast SEO“ suchen und das Plugin wie jedes andere installieren und aktivieren.

Schritt 2: Fügen Sie Ihrer header.php -Datei eine Funktion hinzu

Nachdem das Plugin aktiviert wurde, müssen Sie der header.php- Datei Ihrer Website eine Funktion hinzufügen. Um auf diese Datei zuzugreifen, navigieren Sie zu Darstellung > Design-Editor und wählen Sie die Datei aus, um sie zu öffnen.

Fügen Sie dann den folgenden Code überall dort hinzu, wo Ihr Breadcrumb-Einstellungsmenü angezeigt werden soll:

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

Im Allgemeinen sollten Sie diesen Code am Ende Ihrer header.php- Datei platzieren. Sie können jedoch mit der Platzierung des Menüs experimentieren und das Frontend Ihrer Website überprüfen, um zu sehen, wie das Ergebnis aussieht.

Sie können die obige Funktion stattdessen sogar zur single.php- oder page.php -Datei Ihres Themes hinzufügen, wenn Sie möchten, dass die Breadcrumb-Funktion an anderer Stelle auf der Seite erscheint. Stellen Sie nur sicher, dass Sie es nur an einer Stelle hinzufügen.

Schritt 3: Aktivieren Sie die Breadcrumb-Unterstützung

Schließlich müssen Sie die Breadcrumb-Unterstützung aktivieren. In Yoast SEO bedeutet dies, zu SEO > Search Appearance > Breadcrumbs zu navigieren:

Stellen Sie den Schalter einfach auf „Aktiviert“ und Sie können loslegen! Ihr WordPress-Breadcrumb-Menü wird eingerichtet und ist einsatzbereit.

Methode 2: Kodieren Sie Ihre eigenen Breadcrumbs

Das Hinzufügen von Website-Breadcrumbs kann auch manuell durch Codierung erfolgen. Wenn Sie kein Breadcrumb-Plugin verwenden möchten, können Sie Breadcrumbs ohne eines hinzufügen. Bevor Sie dies versuchen, sollten Sie sich über Mikrodaten informieren, um das SEO-Potenzial von WordPress-Breadcrumbs voll auszuschöpfen.

Schritt 1: Erstellen Sie eine Skelettfunktion

Um Breadcrumbs manuell zu WordPress hinzuzufügen, müssen Sie eine PHP-Funktion erstellen. Der erste Schritt beim Erstellen dieser Funktion besteht darin, das Skelett zu erstellen. Ihre Skelettfunktion benötigt einen eindeutigen Namen, um Konflikte mit anderen Funktionen zu vermeiden.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

Die obige Funktion ist das Skelett, und der Rest des Breadcrumbs-Codes wird in die geschweiften Klammern gesetzt.

Schritt 2: Grundregeln hinzufügen

Nachdem Sie das Skelett erstellt haben, müssen Sie der Funktion Regeln hinzufügen. Die Regeln sollten im Breadcrumb-Bereich platziert werden:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

Die obigen Regeln verwenden im Allgemeinen Variablen, sodass sie später geändert werden können. Die ersten beiden Variablen verwenden boolesche Werte, wobei „0“ falsch und „1“ wahr ist.

Schritt 3: Fügen Sie die ' if else '-Anweisung hinzu

Unterhalb der Variablen müssen Sie eine „if else“-Anweisung hinzufügen. Diese Anweisung überprüft, ob sich ein Benutzer auf der Startseite Ihrer Website befindet oder nicht. Basierend auf diesen Informationen bestimmt die Anweisung, ob die Breadcrumbs angezeigt werden oder nicht:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Wenn diese Anweisung nicht zur Funktion hinzugefügt wird, werden die Breadcrumbs-Einstellungen möglicherweise angezeigt, wenn Sie dies wünschen.

Schritt 4: Funktion zum Theme-Header hinzufügen

Sobald Ihre Breadcrumbs-Funktion abgeschlossen ist, können Sie sie der header.php- Datei Ihrer Website hinzufügen. Navigieren Sie zu Darstellung > Design-Editor , um die Datei zu öffnen, und fügen Sie die Funktion ganz am Ende hinzu.

Speichern Sie dann Ihre Änderungen und sehen Sie sich das Breadcrumbs-Menü Ihrer neuen Website im Frontend an. Sie können die Funktion und ihre Platzierung weiter optimieren, bis das Menü genau richtig aussieht (oder bei Bedarf Breadcrumb deaktivieren).

Passen Sie Ihre Website mit WP Engine an

Breadcrumb-Navigationsmenüs helfen den Besuchern Ihrer Website, sich zurechtzufinden. Sie erleichtern es Suchmaschinen auch, die Hierarchie Ihrer Website zu verstehen. Ein Plugin wie Yoast SEO ist der einfachste Weg, um Ihrer Website Breadcrumbs hinzuzufügen, aber Sie können sie auch manuell codieren.

Die Verwendung des richtigen Webhosts kann dazu beitragen, die Leistung Ihrer Website zu gewährleisten, sodass Sie Zeit haben, sich auf Entwicklung und UX zu konzentrieren. WP Engine bietet Ihnen die am besten verwalteten WordPress-Hosting-Pläne und die besten Ressourcen, um ein unglaubliches Website-Erlebnis zu schaffen!