Heute werde ich einen sehr komfortablen Weg zur Implementierung von Breadcrumbs in WordPress mit dem WordPress-SEO-Plugin von Yoast erläutern. Natürlich müssen wir dieses Plugin in unserem WordPress installiert haben, da es auch das ist, das ich empfehle, um die SEO On-Page unseres Blogs zu machen.
In einem früheren Artikel haben wir bereits besprochen, was Paniermehl ist und wann es verwendet werden soll . Dank dieses Artikels haben wir eine visuelle Vorstellung von den Semmelbröseln und wie sie sich auf die Art und Weise auswirken, in der die Suchergebnisse unserer Website bei Google angezeigt werden .
Brotkrumen auf Codeebene sind nichts anderes als eine Art Mikrodaten von schema.org . Diese Mikrodaten wurden entwickelt, um Suchmaschinen das Verständnis unserer Website zu erleichtern und bestehen aus semantischem Tagging.
Um zu vermeiden, dass wir eine Funktion oder ein Plugin programmieren müssen, mit dem wir diese Art von Mikrodaten zu WordPress hinzufügen können, verwenden wir das Yoast-WordPress-SEO-Plugin, mit dem wir in weniger als fünf Minuten Brotkrumen hinzufügen können . Denken Sie daran, dass Sie anschließend den entsprechenden CSS-Code hinzufügen müssen, damit sich die Brotkrumen unserem Thema anpassen und visuell korrekt sind.
So implementieren Sie Breadcrumbs in WordPress mit Yoast WordPress SEO
Sobald wir das Plugin installiert haben, gehen wir in das Plugin-Menü zur Option „Interne Links“ (interne Links) und aktivieren sie als erstes durch Aktivieren der Option „Breadcrumbs aktivieren“ (Breadcrumbs aktivieren) .
Persönlich füge ich nur Artikel und Kategorien, Tags und Dateien mit Breadcrumbs hinzu . Mit anderen Worten, ich füge nur den Code hinzu, um die Bredcrumbs in den Dateien single.php
, page.php
und archive.php
zu aktivieren, da ich bei Suchvorgängen und 404-Seitenfehlern keine Verwendung sehe.
Nach dem Aktivieren der Breadcrumbs müssen die Dateien single.php, page.php und archive.php bearbeitet und der Code hinzugefügt werden:
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?>
Dieser Code sollte an der Stelle eingefügt werden, an der der Breadcrumb angezeigt werden soll. In der Regel werden die Breadcrumbs über der Inhaltsüberschrift des Artikels angezeigt, wie im folgenden Beispiel dargestellt:
Nachdem wir den Code im Breadcrumbs-Menü des Yoast-Plugins hinzugefügt haben, konfigurieren wir die Separator-Option „Separator between breadcrumbs“ (Trennzeichen zwischen den Breadcrumb-Elementen). Wir können dasjenige verwenden, das uns am besten gefällt Zum Beispiel: /
, >
, ?
Diese Option des Trennzeichens kann auch HTML-Code enthalten, was sehr nützlich ist, um den CSS-Stil des Trennzeichens zu ändern, und wir verwenden in dieser Option so etwas wie:
<span>?</span>
Schließlich konfigurieren wir die Option “Ankertext für die Homepage” , die nichts anderes als der Ankertext des ersten Breadcrumb-Elements ist, das immer die Startseite sein wird. Ich setze ihn daher als Ankertext “Start” oder “Home”, wenn Der Blog ist in englischer Sprache.
Es wäre nur notwendig, dem Breadcrumb mit CSS-Code den passenden Stil zu geben, aber dieser Teil ist nicht mehr Gegenstand dieses Tutorials, sondern der Benutzer sollte über Grundkenntnisse in CSS und HTML verfügen.
Ich hoffe, diese Schritt-für-Schritt-Anleitung zum Hinzufügen von Breadcrumbs in WordPress war hilfreich, und wenn Sie Zweifel haben oder einen Kommentar hinterlassen möchten, sind Sie herzlich willkommen.