Breadcrumb Block (WordPress Plugin)

Dieses Plugin ergänzt den WordPress-Editor um einen einfachen, dynamischen Breadcrumb-Block zur Anzeige von Navigationspfaden. Die Ausgabe erfolgt serverseitig und kann über das Theme oder Plugins angepasst werden.

Was macht das Plugin?

Der Block zeigt eine Breadcrumb-Navigation an – also eine „Sie sind hier“-Struktur, die Nutzer:innen hilft, sich innerhalb einer Website zurechtzufinden. Die Ausgabe ist barrierearm, anpassbar und erfolgt über ein PHP-Render-Template.

Besonderheit:
Im Gegensatz zu vielen anderen Breadcrumb-Plugins wird die aktuelle Seite nicht im Breadcrumb-Pfad angezeigt. Das vermeidet unnötige Wortdopplung – insbesondere dann, wenn der Seitentitel direkt unter dem Breadcrumb erscheint (z. B. als H1). Das sorgt für ein aufgeräumtes und klareres Layout.

Features

• Gutenberg-Block für Breadcrumbs
• Aktuelle Seite wird bewusst nicht im Pfad angezeigt
• Automatische Ausgabe anhand der aktuellen Seitenstruktur
• Ausgabe erfolgt über render.php (PHP-basiert)
• Optional erweiterbar über Filter (breadcrumb_block_get_items)
• Volle Kontrolle über HTML und CSS durch eigene Templates und Styles

Vorschau

Abbildung: Frontend-Darstellung des Breadcrumb-Blocks im Standard-Theme.

Integration

Du kannst das Plugin wie jeden anderen Gutenberg-Block nutzen – einfach in einen Beitrag oder eine Seite einfügen. Anpassungen an der Logik sind über breadcrumb-functions.php möglich.

Installation

1. Plugin-Ordner in wp-content/plugins/ legen
2. Aktivieren
3. Block „Breadcrumb“ im Editor einfügen

Kurze Entwickleranleitung

Kurzanleitung zur lokalen Weiterentwicklung des Plugins.

1. Projekt einrichten

Lade das Plugin herunter: Auf „Code → Download ZIP“ klicken und das Plugin entpacken.

2. WordPress (Docker) starten

Nutze wp-env für eine lokale WordPress-Umgebung. Öffne ein Terminal (macOS, Linux) oder PowerShell / Git Bash (Windows):

npx @wordpress/env start

Das Plugin liegt dabei in wp-content/plugins/.

3. Abhängigkeiten installieren und entwickeln

cd /pfad/zu/deinem/plugin  #navigiere zu deinem Plugin.
npm install                #lädt benötigte Node-Modules
npm start                  # startet den Watch-Modus für /src

Änderungen in src/ werden automatisch nach build/ geschrieben.

4. Build für Live-Einsatz

npm run build

Erzeugt einen optimierten, produktionsfertigen Build im Ordner build/.

5. Welche Dateien werden benötigt?

Für den produktiven Einsatz im WordPress-Plugin-Verzeichnis werden nur die folgenden Bestandteile benötigt:

• build/ (vom Build-Prozess generiert)
• block.json
• PHP-Dateien (z. B. plugin.php, render.php, etc.)
• CSS-Dateien (z. B. style.css, editor.css)
• Optional: assets/ (z. B. für Bilder oder Icons)

Nicht erforderlich (und typischerweise ausgeschlossen):

• node_modules/
• src/
• .git/
• .gitignore
• package.json, package-lock.json
• .editorconfig, .eslintrc.js usw.

Diese Dateien sind nur für die Entwicklung relevant und sollten nicht ins produktive WordPress-Setup kopiert werden.