(Letztes Update: 19.05.2019)

Hallo WordPress Mania Blog-Leser! Wenn Sie, Freunde, auf der Website nicht implementiert sind Semmelbrösel- Kein Problem. Mithilfe dieser Anleitung können Sie den Breadcrumb-Trail (Links) selbst einrichten. Heute zeige ich Ihnen: wie man hinzufügt Semmelbrösel (Semmelbrösel) über die Plugin-Funktion auf eine WordPress-Site hinzufügen Yoast WordPress SEO(Ich hoffe, Sie sind das beste multifunktionale SEO-Plugin).

Und ich verrate dir auch was spezielle Plugins Zu diesem Zweck gibt es Breadcrumbs (WordPress-Breadcrumbs). Und für erfahrene Benutzer Es ist möglich, ohne Plugin Breadcrumbs zur Site hinzuzufügen. Also, meine Damen und Herren, lesen Sie: Wie erstellt man Breadcrumbs in WordPress?

So fügen Sie Breadcrumbs zu einer WP-Site mit und ohne Plugin hinzu

Da dieser Blog für Anfänger gedacht ist, erkläre ich zuerst:

Was sind Semmelbrösel?

Dies ist der Brotkrümelpfad ( Navigationsmenü, „Brotkrumen“, Englisch. Breadcrumbs) ist ein Website-Navigationselement, das einen Pfad durch die Website vom „Stammverzeichnis“ bis zur aktuellen Seite darstellt, auf der sich der Benutzer befindet (Wikipedia). Aber Artem Lebedev nennt es so: doppelte Navigation – eine Zeile mit Links, die der Hierarchie der Site-Struktur entsprechen. Sie können diese Zeile auf den meisten Websites über dem Titel des Artikels sehen. Ungefähr so:

Breadcrumbs auf der WordPress-Website

Einige Leute denken, dass Breadcrumbs nicht unbedingt auf der Website installiert werden müssen, andere sind der Meinung, dass das Gegenteil der Fall ist.

Breadcrumbs sind ein äußerst wichtiger Bestandteil jeder Website. Sie bieten Ihren Benutzern eine einfache Möglichkeit, ihren aktuellen Standort auf der Website herauszufinden.

Breadcrumbs sind auf bekannten Blogs vertreten und daher für uns nicht kontraindiziert. Lass uns anfangen.

Breadcrumbs mit der SEO-Plugin-Funktion von Yoast WordPress

Der Zweck der Navigation besteht darin, Benutzern die Navigation auf der Website zu erleichtern. Dies hilft Benutzern zu verstehen, wo sie sich auf der Website befinden. Es hilft Suchmaschinen auch dabei, die Hierarchie der Links auf einer Webseite zu verstehen. Für .

Die folgenden Schritte sind eine vorübergehende Lösung, da manuelle Änderungen an Theme-Dateien bei zukünftigen Theme-Updates möglicherweise überschrieben werden. Wenn Sie das Theme aktualisieren, müssen Sie diesen Vorgang erneut durchführen.

Yoast SEO bietet eine Funktion zum Abrufen von Navigationslinks auf Ihrer Website. Breadcrumb-Optionen werden in Yoast zunächst nicht angezeigt, Sie müssen dazu zum Admin-Panel gehen SEO-Bereich- „Anzeige in Suchergebnisse" - Registerkarte „Breadcrumbs“. Danach müssen Sie Breadcrumbs aktivieren und konfigurieren:

Breadcrumb-Einstellungen in Yoast SEO

Stellen Sie die Trennlinie zwischen den Elementen nach Ihren Wünschen ein. Schreiben Sie den Text des Links zur Hauptseite. Sie können den Namen Ihres Blogs oder einfach „Home“ eingeben. Als nächstes legen Sie in den „Breadcrumbs“ die Taxonomie für die Kategorie fest. Klicken Sie auf „Änderungen speichern“. Vergessen Sie nicht, den Code an der richtigen Stelle in Ihrer Vorlage (Theme) einzufügen.

So fügen Sie Ihrem Theme Breadcrumbs hinzu

Breadcrumbs werden erst angezeigt, wenn Sie einen kleinen Code in Ihre Website einfügen. Beginnen Sie mit dem Kopieren des folgenden Codes:

Jetzt müssen Sie den Code in das Theme/die Vorlage installieren, wo die Navigationsleiste angezeigt wird. Übliche Orte, an denen Sie Ihre Breadcrumbs platzieren können, befinden sich in der Datei single.php und/oder page.php direkt über dem Seitentitel. Eine weitere Option, die dies in einigen Themes wirklich einfach macht, besteht darin, den Code einfach in header.php einzufügen.

Nehmen wir als Beispiel das Thema „Twenty Eleven“. Lass uns gehen: Aussehen- Theme-Editor. Öffnen Sie die Datei single.php (ein Eintrag) und fügen Sie den Code ein:

Code in eine WP-Vorlage einfügen

Speichern Sie die Datei und sehen Sie, was am Ende herausgekommen ist:

Yoast SEO Breadcrumbs

Darüber hinaus können Sie beliebige Titel für Seiten anzeigen, die beim Bearbeiten oder Erstellen in Breadcrumbs angezeigt werden neuer Eintrag. Yoast SEO-Registerkarte „Erweitert“. Wenn beispielsweise der Titel des Artikels lang ist, kann der Titel kürzer geschrieben werden:

Der Titel dieser Seite, der in Breadcrumbs angezeigt wird

So wird es klappen:

Ihr eigener Titel für Breadcrumbs in einem separaten Beitrag

Breadcrumb-Plugins für die WordPress-Website

Das beliebteste Modul ist heute Breadcrumb NavXT.

WordPress-Plugin Breadcrumb NavXT

Breadcrumb NavXT ist ein Plugin, das mit kompatibel ist WordPress-Versionen 4.0 und höher. Es generiert lokale Ketten für Ihren WordPress-Blog/Ihre WordPress-Site. Da Breadcrumb NavXT die Seitenhierarchie konsistent anzeigt, trägt es dazu bei, SEO-Vorteile zu bieten.

Installieren und aktivieren Sie es auf übliche Weise. Wenn Sie möchten, können Sie es dann individuell anpassen. Einstellungen – Breadcrumb NavXT. Plugin auf Russisch. Ich denke, dass die meisten Benutzer mit den Standardeinstellungen zufrieden sein werden.

Und wieder müssen wir die Datei bearbeiten Separater Eintrag(single.php) und/oder Separate Seite(page.php). Sie können die Header-Datei (header.php) verwenden. Nehmen wir den Code:

Öffnen Sie die Datei, zum Beispiel page.php, und fügen Sie die Breadcrumb-Ausgabe an der gewünschten Stelle ein. Normalerweise müssen Sie sie über dem Titel des Artikels anzeigen.

Installieren des Breadcrumb NavXT-Codes auf einer Website-Seite

Speichern. Öffnen Sie die Blog-Seite und sehen Sie sich das Ergebnis an:

Fügen Sie der Single Entry-Datei (single.php, ) den gleichen Code hinzu, wie für Yoast SEO gezeigt. Gutes Plugin? Oh ja! Ungeeignet? Kein Problem.

Gehen Sie zu Plugins – Neu hinzufügen und geben Sie das Schlüsselwort Breadcrumb in das Plugin-Suchfeld ein. Wähle Freunde:

Breadcrumb-Plugins für WordPress

Bleiben Sie dran für Updates. Achten Sie auf das SEO Breadcrumbs-Plugin:

SEO-Breadcrumbs

WordPress SEO Breadcrumbs-Plugin

SEO Breadcrumbs ist ein leistungsstarkes und benutzerfreundliches Plugin, mit dem Sie Ihrer WordPress-Site fünf verschiedene Breadcrumb-Navigationen hinzufügen können. Es ist vollständig anpassbar und reaktionsfähig. Das Plugin zeigt Breadcrumbs in Beiträgen, Seiten, benutzerdefinierten Taxonomien, Archiven und Anhängen an. Auch in 404-Fehlern, Suchergebnissen.

Mit dem Plugin können Sie jedes verwenden Farbkombinationen, mit verschiedenen Effekten zum Verzieren von Semmelbröseln. Das Plugin unterstützt auch die Schemaspezifikation für Code-Snippet-Markup, die von Google und anderen verwendet wird Suchmaschinen um Breadcrumbs zu identifizieren und sie in Suchergebnissen zu verwenden.

So installieren Sie WordPress Breadcrumbs ohne Plugin

Dieser Hack (über dem Hügel gefunden) ist für diejenigen geeignet, die das Plugin nicht verwenden. Öffnen Sie die Datei „Theme Functions“ (functions.php) und fügen Sie vor dem schließenden Tag (ganz unten) diesen langen Code ein (vergessen Sie nicht, eine Sicherungsdatei zu erstellen):

Funktion dimox_breadcrumbs() ( /* === OPTIONEN === */ $text["home"] = "Home"; // Linktext "Home" $text["category"] = "Archivkategorie "%s" "; // Text für die Kategorieseite $text["search"] = "Suchergebnisse für die Suchanfrage „%s""; // Text für die Suchergebnisseite $text["tag"] = "Beiträge mit Tag " %s" ""; // Text für die Tag-Seite $text["author"] = "Artikel von %s"; // Text für die Seite des Autors $text["404"] = "Fehler 404" // Text für die Seite 404 $ show_current = 1; // 1 – Titel des aktuellen Artikels/Seite/Kategorie anzeigen, 0 – nicht anzeigen $show_on_home = 0; // 1 – Breadcrumbs anzeigen Startseite, 0 – nicht anzeigen $show_home_link = 1; // 1 – Link „Home“ anzeigen, 0 – nicht anzeigen $show_title = 1; // 1 – Hinweis (Titel) für Links anzeigen, 0 – nicht anzeigen $delimiter = " " "; // zwischen „Krümeln“ aufteilen $before = „ "; // Tag vor dem aktuellen „crumb“ $after = „"; // Tag nach dem aktuellen „crumb“ /* === END OF OPTIONS === */ global $post; $home_link = home_url("/"); $link_before = " "; $link_after = ""; $link_attr = " rel="v:url" property="v:title""; $link = $link_before . "%2$s" . $link_after; $parent_id = $parent_id_2 = $post->post_parent; $frontpage_id = get_option("page_on_front"); if (is_home() || is_front_page()) ( if ($show_on_home == 1) echo "

Aktualisieren Sie die Datei. Um die Funktion auf die gleiche Weise wie oben beschrieben aufzurufen, in single.php-Dateien (ein Eintrag); page.php(Seitenvorlage); archive.php(Archive); search.php (Suchergebnisse) Fügen Sie den Code ein:

Alle. Wenn Sie den CSS-Stil für Breadcrumbs festlegen müssen (passend zu Ihrem Theme-Design), schließen Sie die Zeile ein in:

Öffnen Sie die „Style Sheet“-Datei (style.css) und fügen Sie am Ende des Codes Folgendes ein:

Crumbs (Rand unten: 1 Pixel gepunktet #999999; Schriftfamilie: „Georgia“, „Times New Roman“, „Times“, Serife; Schriftgröße: 9 Pixel; Schriftstärke: 600; Zeilenhöhe: 15 Pixel; Farbe : #ccc; ) .crumbs a( Schriftfamilie: „Georgia“, „Times New Roman“, „Times“, Serife; Schriftgröße: 9px; Schriftstärke: 600; Zeilenhöhe: 15px; Farbe: # ccc;Textdekoration: keine)

Passen Sie den Stil an Ihr Blog-/Website-Design an.

Abschließend

Breadcrumbs für eine WordPress-Site sind nicht zwingend erforderlich, können aber das Benutzererlebnis verbessern. Eine Verbesserung der Benutzerfreundlichkeit wirkt sich immer positiv auf Verhaltensfaktoren aus.

Dank Mikro-Markup wird Breadcrumbs (Breadcrumbs) in die Google-Ergebnisse eingebettet. Yandex verfügt nicht über eine solche Funktion, aber die Suchmaschine kann die Site-Struktur selbstständig an die Micro-Markup-Vorlage anpassen.

Das ist alles für mich. Bis zum nächsten Mal. Viel Glück.

Hallo zusammen!

Eine weitere Möglichkeit, die interne Verlinkung und die Benutzerfreundlichkeit der Website zu verbessern, sind Breadcrumbs. Diese Art der Seitennavigation erhielt diesen Namen durch das Märchen der Gebrüder Grimm über Hänsel und Gretel. Erinnern Sie sich: Um den Weg nach Hause zu finden, hinterließen Kinder Brotkrümel auf dem Weg. Ebenso verhindert die gleichnamige Navigationsmethode, dass sich Benutzer auf Ihrer Website verlaufen. Weitere Einzelheiten zum Zweck und zu den Methoden des Hinzufügens von Breadcrumbs zu einem Blog werden im heutigen Artikel besprochen.

Bedeutung und Beispiel von Semmelbröseln

Um Ihnen eine Vorstellung davon zu geben, wie Breadcrumbs auf einer Website aussehen, gebe ich ein Beispiel aus meinem Blog:

Semmelbrösel werden durch einen orangefarbenen Rahmen hervorgehoben. Sie werden auch Semmelbrösel genannt.

Am häufigsten findet man eine solche Kette unter der Kopfzeile der Website, unmittelbar vor dem Titel des Artikels.

So kann der Besucher leicht erkennen, in welcher Rubrik sich der von ihm angezeigte Artikel befindet. Die allgemeine Struktur der Breadcrumb-Navigation ist wie folgt: Startseite -> Abschnitt -> Artikeltitel. Es kann kompliziert sein, wenn zum Beispiel ein Unterabschnitt im Abschnitt erscheint, dann sieht die Struktur so aus: Startseite –> Abschnitt –> Unterabschnitt –> Artikeltitel.

Neben der Seitennavigation spielen Breadcrumbs auch eine wichtige Rolle bei der Suchmaschinenoptimierung. Sie verbessern die Benutzerfreundlichkeit der Website, die Verlinkung und manchmal können sie in . Dies erhöht die Klickrate in den Suchergebnissen und hilft Suchmaschinen außerdem dabei, die Struktur Ihrer Ressource schnell zu erkennen. Dies erfordert eine Mikromarkierung der Semmelbrösel. Wir werden weiter unten darüber sprechen, wie es geht.

Breadcrumbs: Wie macht man das auf Ihrem Blog?

Um Breadcrumbs zu WordPress hinzuzufügen, können Sie ein Plugin verwenden oder den notwendigen Code schreiben, um sie anzuzeigen.

Schauen wir uns zunächst an, wie man Breadcrumbs mit PHP-Code anzeigt. Ich sage gleich, dass derselbe Code unten angegeben wird, aber bei Mikro-Markup-Elementen rate ich Ihnen, ihn sofort zu übernehmen.

Hier ist ein Beispielcode zum Einfügen in Ihre Datei „functions.php“:

Russische Namen im Code können durch Ihre eigenen ersetzt werden. Ersetzen Sie beispielsweise anstelle von „Home“ den Namen der Website.

Danach sollte auf Ihrer Website ein Breadcrumb erscheinen. Um jedoch schöne Breadcrumbs zu erhalten, müssen Sie Änderungen an der Styles-Datei vornehmen. Damit es beispielsweise wie auf meinem Blog aussieht, müssen Sie den folgenden Code in die Datei „styles.css“ einfügen:

Breadcrumbs( margin: -5px 0 5px 3px; /* padding */ overflow: versteckt; ) .breadcrumbs a ( color: #34a6d2; /* link color - blue */ text-decoration: underline; ) .breadcrumb > span ( color : #000; /* Endpunktfarbe ist schwarz */ ) .breadcrumb( float:left; )

Hier können Sie die Farbe und Größe von Schriftarten, Einzügen und die Farbe von Links sehen, wenn Sie mit der Maus darüber fahren oder ohne sie. Sie können alle diese Werte durch Ihre eigenen ersetzen und experimentieren.

Breadcrumbs für WordPress: Plugin

Die gängigsten Plugins zur Anzeige von Breadcrumbs: Yoast WordPress Seo, BreadCrumb NavXT. Das WordPress SEO by Yoast-Plugin ist funktionsreich und die Brotkrümel in seinem Arsenal machen nur einen kleinen Teil aus. Wenn Sie dieses Plugin bereits installiert haben, können Sie diese Funktion daher nutzen.

Nach der Installation können Sie in den Einstellungen die Pfadoption (Kategorien, Daten, Tags), die maximale Titellänge und die Zeichen zwischen den Abschnitten festlegen. Darüber hinaus können Sie die Anzeige des Namens der Seite, auf der sich der Besucher befindet, deaktivieren, um den Titel des Artikels nicht zu duplizieren. Damit Breadcrumbs auf der Seite angezeigt werden, müssen Sie den Code erneut in die Datei single.php oder header.php schreiben.

Änderungen an Stilen können Sie auf die gleiche Weise wie oben beschrieben vornehmen.

Mikromarkierung von Semmelbröseln

Wir haben bereits darüber gesprochen, wie wichtig es ist. Die Breadcrumbs in meinem Blog-Snippet sehen so aus:

Dieser Typ ist für den Benutzer verständlicher und angenehmer als nur die Seiten-URL.

Suchmaschinen können die auf Ihrer Website erstellte Breadcrumb-Struktur automatisch akzeptieren und sie entsprechend im Snippet anzeigen. Um dies zu überprüfen, müssen Sie die Validatoren von Google und Yandex verwenden.

Wenn Suchmaschinen Breadcrumbs nicht erkennen, brauchen sie Hilfe. Auf meinem Blog verwende ich den am Anfang des Artikels angegebenen Code. Ich habe Mikro-Markup-Elemente hinzugefügt. Wenn Sie auch Breadcrumbs mit PHP-Code ausgeben, können Sie Ihren Code durch Folgendes ersetzen:

Funktion my_breadcrumb() ( echo "

Ich habe nicht versucht, Mikro-Markup für die mit dem Plugin erstellten Breadcrumbs zu erstellen. Aber ich denke, es ist nicht schwierig. Sie können den Plugin-Code auf ähnliche Weise wie meinen Code ändern. Schauen wir uns den angegebenen Code an.

Mithilfe dieses Codes können Suchmaschinen feststellen, dass es sich um ein Breadcrumb-Element handelt.
Jedes einzelne Element in der Kette ist in ein Div eingeschlossen, das den Code enthält: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .

itemprop="url" – definiert den URL-Wert, er muss zu jedem Tag hinzugefügt werden

itemprop="title – definiert den Titelwert des Kettenelements

Der gesamte Code wird in ein Div mit dem Parameter xmlns:v="https://rdf.data-vocabulary.org/#"> eingeschlossen, um das schema.org-Wörterbuch zu verbinden.

Überprüfen Sie nach dem Hinzufügen des Codes erneut, ob Yandex und Google die Breadcrumbs erkennen.

Wenn Sie weitere Fragen zum Thema dieses Artikels haben, stellen Sie diese unbedingt in den Kommentaren.

Abschließend schlage ich vor, sich ein Video über interne Verlinkung anzusehen.

Dieses Plugin generiert Breadcrumbs für Ihren WordPress-Blog/Ihre WordPress-Site, unterstützt Unterkategorien für die Ausgabe und die automatische Installation!

 Automatische Installation!

 SEO-freundlich! Erstellt auf Basis der SEO-freundlichen „Schema.org Microdata Breadcrumbs“, die bei allen Suchmaschinen (Google, Bing, Yandex usw.) so beliebt sind.

 Einfache Einstellungen! Selbst der unerfahrenste Benutzer kann die Einstellungen vornehmen. Eine benutzerfreundliche Verwaltungsoberfläche macht die Einstellungen sehr einfach.

 Super einfach! Das Plugin verwendet kein JavaScript oder jQuery, sondern nur reines und einfaches CSS, die Dateien enthalten ein Minimum an PHP-Code.

Großartig funktioniert mit AMP (Accelerated Mobile Pages)!

Großartig funktioniert mit Taxonomien!

 Tooltips-Unterstützung! Reines CSS.

Screenshots

Installation

Automatische Installation! Sie müssen keine Codes mehr in die Dateien einfügen, installieren Sie einfach das Plugin und aktivieren Sie es, das ist alles.

Für die manuelle Installation gehen Sie zu Einstellungen >

Öffnen Sie die entsprechende Datei für Ihr Theme (normalerweise header.php). Dies kann über das WordPress-Admin-Panel „Darstellung“ > „Editor“ oder über Ihren bevorzugten Texteditor erfolgen. Platzieren Sie den folgenden Code dort, wo die Breadcrumbs erscheinen sollen:

und fügen Sie diesen Code zu Ihren AMP-Vorlagenseiten (Accelerated Mobile Pages) hinzu:

oder Manuelle Installation per .zip:

1. Laden Sie „yummi-breadcrumb“ in den Ordner „/wp-content/plugins/“ hoch
2. Aktivieren Sie das Plugin im Reiter „Plugins“ Ihrer Website/Ihres Blogs
3. Gehen Sie zu Einstellungen > Yummi Breadcrumbs und stellen Sie den Installationstyp auf Manuell um
4. Platzieren Sie diesen Code in Ihren Vorlagen:

FAQ

1. SEO-freundlich?

2. Unterstützt es RDFa?

   Ja, völlig

3. Gibt es Unterstützung für Schema.org-Mikrodaten?

   Ja, volle Unterstützung

4. Unterstützt es Unterkategorien?

5. Unterstützt es die Inline-Ausgabe von Unterkategorien?

6. Unterstützt es die Anzeige von Unterkategorien als Dropdown-Liste?

7. Unterstützt es Tooltips?

   Ja, in reinem CSS

8. Wird das Ausschließen von Kategorien unterstützt?

   Ja, völlig

9. Unterstützt das Ausschließen von Taxonomien?

   Ja, völlig

10. Ist das Bedienfeld klar?

11. Unterstützt es RDFa?

    Ja, völlig

12. Wie sieht es mit dem Gewicht des Plugins aus?

    Sehr leicht! Das Plugin verwendet kein JavaScript oder jQuery, sondern nur sauberes und einfaches CSS, die Dateien enthalten ein Minimum an PHP-Code.

13. Wie benutzt man es?

    Automatische Installation! Jetzt müssen Sie keine einzige Codezeile mehr in Ihre Dateien einfügen, laden Sie einfach das Plugin herunter und aktivieren Sie es, das ist alles.

14. Wie installiere ich es im manuellen Modus?

    Gehen Sie zu Optionen > Yummi Breadcrumbs und schalten Sie dort von „Installation“ auf „Manuell“ um. Öffnen Sie dann die Vorlagendateien unter „Darstellung“ > „Editor“ oder über Ihren bevorzugten Texteditor (normalerweise header.php). Fügen Sie den folgenden Code an der Stelle ein, an der der Breadcrumb-Trail erscheinen soll.

    und diesen Code zu Ihren AMP-Vorlagen (Accelerated Mobile Pages):

15. Welche Sprachen werden unterstützt?

    Englisch und Russisch vollständig und viele andere im Laufe der Zeit :)

Rezensionen

Teilnehmer und Entwickler

„Yummi Breadcrumbs (With Sub-Category Support)“ ist ein Open-Source-Projekt. Die folgenden Mitwirkenden haben zur Entwicklung des Plugins beigetragen:

Änderungsprotokoll

2.0.1

• URL korrigieren, wenn „1“ angezeigt wird (CPT-UI-Taxonomie)

2.0.0

• Viele Korrekturen
• Unterstützung für WordPress 5 hinzufügen

1.9.19

• Fix für Archivseiten

1.9.18

• Array-Fix ​​für altes WP

1.9.17

• Tab-Home-Taschen

1.9.16

• Tab-CSS-Korrektur

1.9.15

• AMP-Fix

1.9.14

• Korrigieren Sie das Post-Typ-Objekt „Post“ in kurzen Post-Links

1.9.13

• Korrigieren Sie das Subcat-Trennzeichen und die Taxonomiekategorie

1.9.12

• Einige Korrekturen auf der Admin-Optionsseite und viele Änderungen im Code (wurde auch auf den Archivseiten für mehrere Kategorien behoben)

1.9.9

• Einige Verbesserungen hinzugefügt

1.9.8

• Yummi-Plugins-Seite hinzugefügt

1.9.7

• Entfernen Sie „Seite 1“ von der ersten Archivseite und korrigieren Sie das Trennzeichen im ausgelagerten Archiv

1.9.6

• Das Dropdown-Menü und das Trimmen des letzten Kinderkategorietrennzeichens wurden korrigiert

1.9.5

• Für die Hierarchie der zweiten Ebene behoben

1.9.4

• Benutzerdefinierte UI-Korrektur für Beitragstypen

1.9.2

• yummi.club unterstützt jetzt sichere Verbindungen und wechselt zu https://yummi.club/

1.9.1

• Fehler behoben validator.w3.org

1.9

• Unterstützung für AMP (Accelerated Mobile Pages) und benutzerdefiniertes CSS hinzugefügt

1.8.7

• Der Standardtext „Heim“ wurde in das Haussymbol geändert

1.8.6

• Fehler beim Anzeigen der Kategorie „Nicht kategorisiert“ behoben
• Zurückgegeben rdf.data-vocabulary.org

1.8.5

• Mehrere Fehler behoben

1.8.2

• Ein Fehler behoben

1.8.1

• Im Admin-Bereich wurde ein Schatten für die Dropdown-Liste und die entsprechenden Einstellungen hinzugefügt

1.8

• Mehrere Fehler behoben
• Korrigierte Übersetzungen

1.7

• Veraltetes Mikro-Markup rdf.data-vocabulary.org auf schema.org/BreadcrumbList ersetzt
• Getestet mit dem Google Structured Data Testing Tool, alles ist in Ordnung, Link zur Website mit dem Test https://developers.google.com/structured-data/testing-tool/
• Korrigierte Übersetzungen
• Tooltips korrigiert

1.6

• Ausgabe nur der ersten Kategorie hinzugefügt. Link zu HTML-Symbolen hinzugefügt

1.5.9

• Ein Fehler bei der Ausgabe auf Seiten wurde behoben

1.5.7

• Mehrere Fehler behoben

1.5.6

• Listen mit Kategorien und Taxonomien hinzugefügt, die ausgeschlossen werden können

1.5.5

• Mehrere Fehler wurden behoben. Separatoren ersetzt

1.5.4

• Mehrere Fehler wurden behoben. Anzeige von Unterkategorien als Dropdown-Liste hinzugefügt

1.5.1

• Mehrere Fehler behoben

1.5.0

• Der gesamte Code wurde neu geschrieben und gekürzt -> höhere Geschwindigkeit. Viele Fehler wurden behoben. Automatische Installation und viele neue Funktionen wurden hinzugefügt

1.0.2

• Reduzierte Codemenge -> höhere Geschwindigkeit. Mehrere Fehler behoben

Die Breadcrumb-Navigation ermöglicht es einem Website-Besucher zu verstehen, wo auf der Website er sich gerade befindet. Normalerweise besteht eine solche Navigation aus einer Reihe von Links, die in einer Kette unter dem Site-Header angeordnet sind.

Diese Navigation führt von der Hauptseite der Website zu Kategorien, zu Seiten mit Artikeln und zu einzelnen Seiten der Website. Alle Links in den Breadcrumbs sind aktiv, bis auf den letzten, da sich der Besucher gerade dort befindet und ein Link zu dieser Seite der Website nicht benötigt wird.

Die Breadcrumb-Navigation fügt der internen Verlinkung der Website ein weiteres Element hinzu und ermöglicht dem Besucher eine bequeme Navigation durch Seiten und Abschnitte der Website, wodurch die Verhaltensfaktoren erhöht werden.

Der Begriff „Semmelbrösel“ stammt aus einem deutschen Märchen der Gebrüder Grimm. In diesem Märchen markierten Kinder ihren Weg in den Wald und ließen dabei Brotkrümel zurück, damit sie mit den zurückgelassenen Brotkrümeln die Möglichkeit hatten, nach Hause zurückzukehren.

Auf meinem Blog habe ich bereits beschrieben, wie man Breadcrumbs mithilfe des Plugins installiert.

Breadcrumbs können ohne die Hilfe eines speziellen Plugins auf Ihrer Website installiert werden. Dies hat seine Vorteile, da die Auslastung Ihrer Website dadurch nicht erhöht wird. Daher empfiehlt es sich, die auf der Seite verwendeten Plugins nach Möglichkeit durch das Einfügen von Code und diversen Skripten zu ersetzen.

Aufmerksamkeit! Erstellen Sie vor der Installation des Codes Sicherungskopien der Dateien, in die Sie die Codes einfügen, damit Sie bei Problemen die Funktionalität Ihres WordPress-Themes wiederherstellen können.

Um Breadcrumbs zu installieren, müssen Sie einige Codes in die entsprechenden Dateien Ihres Themes einfügen.

Es ist nicht erforderlich, eine Breadcrumb-Navigation auf der Hauptseite des Blogs zu installieren. Ein Besucher, der den Namen einer Website in eine Suche eingibt, wird in den allermeisten Fällen in den Suchergebnissen zur Hauptseite der Website weitergeleitet.

Wenn ein Besucher über eine Suche auf eine bestimmte Seite gelangt ist, wird ihm anhand von Breadcrumbs angezeigt, wo er sich auf der Website befindet. Die Hauptseite ist ein Hyperlink und der Besucher kann zur Hauptseite gelangen, wenn er hierfür die Breadcrumb-Navigation verwendet.

Breadcrumbs auf der Website installieren

Zwei Versionen des Codes müssen in die folgenden Theme-Dateien eingefügt werden: „Theme-Funktionen (functions.php)“, „Einzelner Eintrag (single.php)“, „Seitenvorlage (page.php)“, „Archive (arhvie.php)“. .php)“, „ Suchergebnisse (search.php)“.

Der erste Code muss in die Datei „Theme Functions (functions.php)“ eingefügt werden, die in Ihrem WordPress-Theme-Blog installiert ist.

// Breadcrumbs-Funktion dimox_breadcrumbs() ( $showOnHome = 0; // 1 – Breadcrumbs auf der Hauptseite anzeigen, 0 – nicht anzeigen $delimiter = „““; // zwischen „crumbs“ aufteilen $home = „Home“; // Textlink „Home“ $showCurrent = 1; // 1 – Titel des aktuellen Artikels/der aktuellen Seite anzeigen, 0 – nicht anzeigen $before = „ "; // Tag vor dem aktuellen „crumb“ $after = „"; // Tag nach dem aktuellen „crumb“ globalen $post; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) ( if ($showOnHome == 1) echo "

Um diesen Code in die auf Ihrer Website installierte Theme-Datei einzufügen, müssen Sie das „WordPress Admin Panel“ => „Darstellung“ => „Editor => „Vorlagen“ aufrufen und dort auf den Punkt „Theme-Funktionen“ (Funktionen) klicken. php) "

Im Fenster „Themen bearbeiten“ müssen Sie in der Datei „Themenfunktionen ((functions.php)“ den ersten Code ganz oben in der Datei einfügen

Der Name des Homepage-Eintrags lautet „Home“. Sie können ihn bei Bedarf in den Namen Ihrer Website ändern. Dazu müssen Sie in der entsprechenden Codezeile das Wort „Home“ durch den Namen Ihrer Site ersetzen.

Wenn Sie möchten, dass auf der Site-Seite oder der Breadcrumb-Navigation nicht der Name der Seite angezeigt wird, auf der Sie sich gerade befinden, müssen Sie dazu in der nächsten Zeile die Zahl „1“ in die Zahl „0“ ändern.

Nachdem Sie den Code eingefügt und nach Ihren Wünschen geändert haben, klicken Sie auf die Schaltfläche „Datei aktualisieren“.

Der folgende Code muss in mehrere Dateien Ihres installierten Themes eingefügt werden: „Einzelner Eintrag (single.php)“, „Seitenvorlage (page.php)“, „Archive (arhvie.php)“, „Suchergebnisse (search.php)“. .php)“ „

In der Datei „Single Entry (single.php)“, die für Seiten mit Artikeln zuständig ist, wird der Code an der im Bild gezeigten Stelle eingefügt.

Nachdem Sie diesen Code eingegeben haben, müssen Sie auf die Schaltfläche „Datei aktualisieren“ klicken.

Fügen Sie diesen Code in der Datei „Archives (arhvie.php)“ an der im Bild markierten Stelle ein.

Klicken Sie dann auf die Schaltfläche „Datei aktualisieren“.

Fügen Sie in der Datei „Suchergebnisse (search.php)“, die für die Suche auf der Website verantwortlich ist, den Code an der im Bild angegebenen Stelle ein.

Nachdem Sie den Code eingefügt haben, klicken Sie auf die Schaltfläche „Datei aktualisieren“.

Fügen Sie in der Datei „Page Template (page.php)“, die für statische Seiten zuständig ist, den Code wie im Bild gezeigt ein.

Klicken Sie nach der Installation des Codes auf die Schaltfläche „Datei aktualisieren“.

Das war's, Breadcrumbs sind jetzt auf Ihrer Website installiert. Sie müssen Ihre Website öffnen und sehen, dass die Navigation installiert ist. Wenn Ihre Website zu diesem Zeitpunkt geöffnet war, müssen Sie die Seite aktualisieren, um die vorgenommenen Änderungen zu sehen.

Sie können diesen Code auch zur Datei „Style Sheet (style.ccs)“ hinzufügen:

/* Breadcrumbs */ #crumbs ( padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit- border-radius:0 0 8px 8px;)

Dieser Code wird ganz am Ende der Datei „Style Sheet (style.ccs)“ eingefügt, um das Erscheinungsbild der installierten Breadcrumb-Navigation zu ändern. Der in die Datei „Style Sheet (style.php)“ einzufügende Code kann andere Eigenschaften (Abmessungen, Einrückungen usw.) aufweisen. Es ist nicht erforderlich, diesen oder einen ähnlichen Code in Ihrem Blog einzubetten.

Auf meiner Website habe ich diesen Code in der vorherigen Vorlage nicht installiert. Ohne diese Verbesserungen gefiel mir das Erscheinungsbild der Breadcrumbs besser.

Schlussfolgerungen des Artikels

Jetzt ist Breadcrumbs in Ihrem Blog installiert, ohne dass ein Plugin verwendet werden muss. Der Schöpfer dieser Funktion ist der berühmte Blogger Dimox (Dmitry).

Hallo, liebe Leser! Heute werden wir darüber sprechen, was Breadcrumbs sind, welche Funktionen sie in einem Blog erfüllen und vor allem, wie Sie das Breadcrumb NavXT-Plugin installieren und konfigurieren, mit dem Sie erstellen können WordPress-Breadcrumbs.

Was sind Semmelbrösel?

„Breadcrumbs“ zeigen den Pfad im Blog an, dem Sie von der Hauptseite zur aktuellen Seite folgen müssen. Dabei handelt es sich um eine Art Navigationskette, bei der jeder Link einen Link zu einer übergeordneten Seite darstellt. Die höchste Ebene ist der Hauptblog. Im Idealfall sollte der Pfad von der Hauptseite zu einer beliebigen Blogseite maximal drei Mausklicks dauern. Tatsächlich ist dies der Fall Startseite – Kategorie – Beitrag oder Startseite – Kategorie – Kategorie – Beitrag, aber nicht länger. Dies ist nicht nur für den Komfort der Benutzer, sondern auch für Suchmaschinen notwendig. Suchmaschinen können Beiträge mit tiefergehendem Inhalt mit einiger Verzögerung indizieren. Darüber hinaus nimmt ihre Bedeutung in den Augen der Suchmaschinen mit zunehmendem Verschachtelungsgrad ab. Versuchen Sie daher, auf der Hauptseite Links zu den wichtigsten und interessantesten Artikeln des Blogs zu platzieren.

Eine ähnliche Funktion auf der Website wird anders genannt – Navigator, Breadcrumbs, Pfad auf der Website, aber der beliebteste Name ist „Breadcrumbs“. Dieser Name stammt aus dem Märchen von Hänsel und Greta, in dem die Helden Brotkrümel verstreuten, um den Weg zurück zu finden.

Neben Komfort und Navigation erfüllen sie noch eine weitere wichtige Funktion – sie verbessern die interne Verlinkung von Blogseiten. Zuvor habe ich bereits über drei wichtige und interessante Plugins für die interne Verlinkung gesprochen, deren Installation ich jedem dringend auf seinem Blog empfehlen kann. Breadcrumb NavXT kann problemlos zu dieser Liste hinzugefügt werden.

Wenn Suchmaschinen einen Blog-Artikel indizieren, sehen sie sofort, zu welcher Kategorie er gehört und sehen den vollständigen Pfad zur Hauptkategorie, was ihnen hilft, die Struktur des Blogs zu bestimmen. Vergessen Sie nicht, es sowohl für Suchmaschinen als auch für Benutzer zu Ihrem Blog hinzuzufügen.

Installieren und Konfigurieren des Breadcrumb NavXT-Plugins

Die Installation von Breadcrumb NavXT ist etwas anders, also schauen wir uns das im Detail an:

2. Entpacken Sie das Archiv und laden Sie den Ordner mit den Plugin-Dateien auf den Server im Verzeichnis wp-content/plugins hoch. Verwenden Sie dazu FileZilla.

3. Aktivieren Sie das Plugin über den Abschnitt „Plugins“ des WordPress-Admin-Panels.

4. Jetzt müssen Sie den folgenden Code einfügen:

Der zweitbeliebteste Ort ist der Site-Header. Dazu muss der Code nur in eine Vorlage eingefügt werden – header.php. Den genauen Ort kann ich nicht sagen, es hängt alles vom Thema ab. Hier eignet sich die Methode des wissenschaftlichen Stocherns – Code einfügen, speichern, Ergebnis sehen, wenn es Ihnen nicht gefällt, ändern Sie die Position des Codes in der Vorlage.

Einige erweiterte Themes zeigen standardmäßig Breadcrumbs im Blog an, ich würde jedoch dennoch die Verwendung des Breadcrumb NavXT-Plugins empfehlen, da es über flexiblere Einstellungen verfügt. In solchen Fällen sollten Sie den Standardcode in den Theme-Vorlagen, der für die Anzeige von Breadcrumbs verantwortlich ist, durch den oben angegebenen Plugin-Code ersetzen. Der Standardcode sollte in vielerlei Hinsicht dem angegebenen Plugin-Code ähneln, sodass er nicht schwer zu finden ist (normalerweise ist er in einem div-, ID- oder class-Tag eingeschlossen, das auch denselben Namen hat – Breadcrumb).

Nachdem Sie den Code hinzugefügt haben, können Sie das Erscheinungsbild der WordPress-Breadcrumbs ändern. Fügen Sie dazu Stile zur Breadcrumb-Klasse in der Datei style.css des von Ihnen verwendeten Themes hinzu. Dazu müssen Sie natürlich die Grundlagen von CSS kennen, daher empfehle ich Ihnen, das kostenlose CSS-Tutorial von Vlad Merzhevich zu lesen, das Sie in meinem Blog herunterladen können.

Die Plugin-Einstellungen befinden sich im Abschnitt „Optionen“ – „Breadcrumb NavXT“. Im Internet findet man einen Crack dafür, aber leider funktioniert es mit den neuesten Versionen des Plugins sehr schief – die meisten Einstellungen bleiben auf Englisch. Daher werde ich die Einstellungen auf Englisch betrachten und Übersetzungen und meine Kommentare zu den wichtigsten Punkten geben.

Die erste Registerkarte heißt „Allgemein“.

Breadcrumb Separator – ein Symbol, das als Trennzeichen zwischen den Gliedern der Breadcrumb-Kette verwendet wird.

Breadcrumb Max Title Length – der Seitentitel wird als Glied in der Navigationskette verwendet, diese Option legt die maximale Länge des Titels fest, 0 – der gesamte Titel wird verwendet, ohne ihn abzuschneiden.

Startseite Breadcrumb – ob der Hauptblog in Breadcrumbs angegeben werden soll oder nicht. Ich empfehle Ihnen, es zu aktivieren und es entsprechend dem Namen Ihres Blogs zu benennen.

- Text, der im Hauptblog sichtbar ist, wenn es sich nicht um einen Link handelt.

Gehen Sie zur Registerkarte „Aktueller Artikel“, was „Aktueller Artikel“ oder „Aktueller Standort“ bedeutet.

Aktuelles Element verlinken – Zeigt den Namen der aktuellen Seite als Link dazu an oder nicht.

Paged Breadcrumb – Unterstützung für die Seitennavigation. Sobald die Funktion aktiviert ist, werden die Zahlen in Breadcrumbs angezeigt.

– eine Vorlage, die den Namen der aktuellen Position definiert, wenn die Unterstützung für Seitennavigation aktiviert ist.

Der nächste Abschnitt heißt „Beiträge und Seiten“ – Beiträge und Seiten.

Post-Taxonomie-Anzeige – zeigt alle möglichen Pfade an, die zu einem Beitrag führen.

Post-Taxonomie – kann in den Post-Pfad-Optionen angezeigt werden. Für meinen Blog habe ich die Standardoption „Überschriften“ gewählt.

Seitenvorlage und Seitenvorlage (nicht verknüpft)– ähnlich der oben besprochenen Beitragsvorlage und Beitragsvorlage (nicht verlinkt), nur werden sie für veröffentlichte Artikel angezeigt.

Als nächstes folgt der Abschnitt „Kategorien und Tags“.

In diesem Abschnitt werden Vorlagen zum Erstellen von Breadcrumbs für Kategorien und Tags angegeben. Befolgen Sie einfach die gleichen Schritte wie bei den oben besprochenen Beitragsvorlagen.

Im Abschnitt können Sie Vorlagen für die Autorenseite (Autor), Datum/Archiv (Datum), Suchergebnisse (Suche) und 404-Fehler festlegen.

Die anderen Optionen nutze ich nicht, daher werde ich nicht auf deren Zweck näher eingehen.

Nun, wir haben alles herausgefunden! Glückwunsch! Hiermit beende ich meine Geschichte und verabschiede mich von euch, aber nicht mehr lange, denn bald erscheint ein weiterer interessanter Artikel auf meinem Blog!