Eine Produktkarte aus strukturierten WordPress-Daten erzeugen
Eine Produktkarte verbindet Modellbilder, technische Angaben, Varianten, Verfügbarkeit und Preis in einer kompakten Darstellung. Strukturierte WordPress-Daten, ein eigener Redaktionsblock und eine serverseitige Ausgabe führen diese Inhalte verlässlich zusammen.
Eine Produktkarte führt Bild, Modellbezeichnung, technische Merkmale, Farbvariante, Verfügbarkeit, Preis und Verlinkung in einer kompakten Darstellung zusammen. Damit diese Angaben zuverlässig zusammenspielen, benötigt jedes Fahrzeugmodell eine gemeinsame Inhaltsstruktur.
Dafür haben wir das Plugin «UD Fahrzeuge FSE» entwickelt. Es speichert die benötigten Fahrzeugdaten mit nativen WordPress-Funktionen, stellt der Redaktion eine darauf abgestimmte Eingabe bereit und erzeugt die Produktkarte als dynamischen Gutenberg-Block. Die WordPress Interactivity API verbindet auswählbare Farben mit den zugehörigen Modellbildern.
Den Inhalt einer Produktkarte als Datensatz modellieren
Der Inhaltstyp neufahrzeug bildet jedes Fahrzeugmodell als eigenen WordPress-Beitrag ab. Technische Einzelwerte werden als registrierte Post-Metadaten gespeichert. Dazu gehören Modellbezeichnung, Hubraum, Leistung, gedrosselte Leistung, Mindestalter, Garantie, Preis und Aktionspreis.
Marke, Fahrzeugkategorie, Ausweiskategorie, Farbe und Zustand werden als native Taxonomien geführt. Diese Begriffe lassen sich über mehrere Fahrzeuge hinweg konsistent verwenden. Die Produktkarte erhält dadurch sowohl individuelle Modellwerte als auch gemeinsam gepflegte Klassifikationen.
Modellvarianten ergänzen den Datensatz um Fahrzeugbild, Farbbezeichnung und Lagerstatus. Sie bilden eine zusammengehörige Einheit: Das Bild zeigt die konkrete Ausführung, die Farbe benennt sie und der Lagerstatus beschreibt ihre aktuelle Verfügbarkeit.
| Inhalt | WordPress-Struktur | Ausgabe in der Produktkarte |
|---|---|---|
| Modell, Leistung und Preis | Post Meta | Bezeichnung, Merkmale und Preis |
| Marke, Kategorie und Ausweis | Taxonomien | Einordnung und Auswahlmerkmale |
| Bild, Farbe und Lagerstatus | Strukturierte Modellvarianten | Bildwechsel und Verfügbarkeit |
Fahrzeugdaten in einer gemeinsamen Editoroberfläche pflegen
Der Gutenberg-Block «Fahrzeugdaten» bündelt die redaktionelle Eingabe. Seine Oberfläche gliedert die Angaben in Modell, technische Daten, Ausweis und Nutzung, Preis sowie Modellvarianten. Redakteurinnen und Redakteure bearbeiten damit den vollständigen Datensatz an einer Stelle.
Auswahlfelder laden Marken, Kategorien und Ausweiskategorien direkt aus den registrierten Taxonomien. Zahlenfelder schreiben technische Werte und Preise in die REST-fähigen Metadaten. In der Variantenverwaltung wird ein Bild aus der Mediathek mit Farbe und Verfügbarkeit verbunden und unmittelbar als Vorschau angezeigt.
Farben und Verfügbarkeit aus Varianten ableiten
Beim Speichern wertet das Plugin die gepflegten Modellvarianten aus. Die Farbbezeichnungen werden mit der nativen Farbtaxonomie synchronisiert. Besitzt mindestens eine Variante den Status «an Lager», übernimmt der Fahrzeugdatensatz diese Verfügbarkeit.
Diese Ableitung verbindet die detaillierte Variantenpflege mit den kompakten Angaben der Produktkarte. Die Redaktion pflegt jede Information bei ihrer fachlichen Quelle; das Plugin bereitet daraus die gemeinsam benötigten Werte auf.
Die Produktkarte serverseitig zusammensetzen
Der dynamische Block «Neufahrzeug Short Card» liest den aktuellen Fahrzeugdatensatz aus und erzeugt daraus die vollständige HTML-Ausgabe. Modellname, Bild, Ausweiskategorie, Hubraum, Leistung, Mindestalter, Verfügbarkeit, Farbe und Preis stammen damit bei jedem Aufruf aus der zentralen Datenquelle.
Ein gepflegter Aktionspreis erhält in der Ausgabe Vorrang vor dem regulären Preis. Die Modellvarianten liefern die verfügbaren Fahrzeugbilder; das Beitragsbild dient bis zur ersten Bildvariante als visuelle Grundlage. Der Produktlink führt direkt zur ausführlichen Modellseite.
Auch der Block-Editor lädt die serverseitige Ausgabe als Vorschau. Redaktion und Frontend greifen dadurch auf dieselbe Renderlogik zurück. Eine Anpassung am Render-Template aktualisiert jede eingesetzte Produktkarte.
Modellvarianten direkt in der Produktkarte wechseln
Enthält ein Fahrzeug mehrere bebilderte Varianten, erscheinen ihre Farbbezeichnungen als auswählbare Schaltflächen. Die WordPress Interactivity API verknüpft jede Auswahl mit dem zugehörigen Modellbild. Beim Wechsel blendet die Produktkarte das gewählte Bild ein und kennzeichnet die aktive Farbe mit dem Zustand aria-pressed.
WordPress liefert die vollständige Produktkarte serverseitig aus. Das Frontend-Modul übernimmt den Variantenwechsel. Datenmodell, HTML-Ausgabe und Interaktion erhalten damit jeweils eine eindeutig zugeordnete Aufgabe. Wie sich mehrere Modelle anhand dieser Daten eingrenzen lassen, zeigt der Beitrag Produktkarten in WordPress dynamisch filtern.
Ergebnis
Eine Produktkarte
aus einer gemeinsamen Datenquelle
Das Plugin verbindet strukturierte Fahrzeugdaten, eine fachlich gegliederte Redaktion und eine dynamische Frontend-Ausgabe.
Modellinformationen werden einmal gepflegt und fliessen anschliessend in Bild, Merkmale, Varianten, Verfügbarkeit, Preis und Verlinkung der Produktkarte ein.
Gemeinsamer Datensatz
Metadaten, Taxonomien und Modellvarianten ordnen alle Inhalte, die eine vollständige Produktkarte benötigt.
Dynamische Ausgabe
Der Server-Block erzeugt Modellbild, Merkmale, Preis und Verlinkung bei jedem Aufruf aus den aktuellen Fahrzeugdaten.
Interaktive Varianten
Die Interactivity API verbindet auswählbare Farben mit ihren Modellbildern und kennzeichnet den aktiven Zustand zugänglich.