Warm Corner: eine Café-Website, von HTML zum WordPress-Adminbereich
Eine kleine Website, die wir selbst geschrieben haben: drei Seiten und eine Einstellungsseite, ausgezeichnet mit ThemeForge-Attributen. Hier siehst du, was hineinging, was herauskam und was uns der erste Build gelehrt hat.
Aus 3 Seiten (Startseite, Speisekarte, Kontakt) und einer Einstellungsseite für Header und Footer wurden 4 Feldgruppen mit 53 Feldern, davon 3 Listen: die hervorgehobenen Karten, die Getränke und die Küche. All das bearbeitet der Kunde im WordPress-Adminbereich; das Design ändert sich dabei nicht.
Welches Attribut wo steht
| Attribut | Wo, und was daraus im Adminbereich wird |
|---|---|
wp-fields-group | Am <body> jeder Seite: der Name der Feldgruppe dieser Seite |
fld-text | Überschriften, Bildunterschriften, Preise: einfache Textfelder |
fld-area | Einleitungsabsätze: mehrzeiliger Text |
fld-editor | Der Block „Über uns“: ein visueller Editor |
fld-image | Das Hero-Bild und die Kartensymbole: Bilder |
fld-loop | Hervorgehobene Karten, Getränke, Küche: Listen, in denen der Kunde Einträge hinzufügt und umsortiert |
fld-link | Buttons: ein Link mit seinem Text |
opt-text, opt-area, opt-image | Header, Footer und theme-options.html: Einstellungen für die ganze Website, ein Satz für alle Seiten |
wp-menu | Die Navigation: ein WordPress-Menü statt einer festen Liste |
Eine Café-Karte, vom Markup bis zum Adminbereich
Zeig auf eine Zeile im Markup und sieh, welches Feld daraus wird.
<body wp-fields-group="Menu"> <h2 fld-text="Title">Menu</h2> <p fld-area="Lead">Espresso runs on our…</p> <div class="cards" fld-loop="Drinks"> <article class="card"> <img fld-image="Image" src="assets/icon-latte.png"> <h3 fld-text="Name">Latte</h3> <p fld-text="Description">Double espresso…</p> <span fld-text="Price">$4.20</span> </article> …drei weitere Karten, genauso markiert </div>
Warm Corner, unsere Demo-Website: 3 Seiten und eine Einstellungsseite → 4 Feldgruppen, 53 Felder, 3 Listen. Dein Kunde fügt Einträge hinzu, entfernt sie und ändert ihre Reihenfolge – das Design bleibt, wie es ist.
Was dein Kunde in WordPress öffnet
Screenshots unserer Testseite nach dem Build und „Daten laden“: Die Felder kommen aus den Attributen, die Werte aus dem HTML. Die Oberfläche ist englisch, wie das Beispiel selbst.
theme-options.html: ein Wert für Kopf- und Fußzeile aller Seiten.Was wir nach dem ersten Build korrigieren mussten
Felder ohne Namen
Zuerst haben wir fld-text ohne Namen geschrieben. Alle unbenannten Felder eines Typs verschmolzen zu einem, und das Build-Protokoll meldete 10 Kollisionen auf der Startseite. Mit Namen: null.
SVG-Bilder in Bildfeldern
WordPress nimmt keine SVG-Dateien in die Mediathek auf, deshalb muss ein an ein Feld gebundenes Bild eine Rastergrafik sein. Wir haben die SVG-Quellen behalten und das Markup auf PNG-Kopien verwiesen.
Eine Gruppe in einer Liste
Ein Listeneintrag ist bereits eine Gruppe von Feldern. Ein zusätzliches fld-group in fld-loop gab jedem Eintrag eine leere Untergruppe, und die Website zeigte leere Karten. Jede Karte der Liste braucht die Attribute, nicht nur die erste.
Mach dasselbe mit deiner Website
- Schritt 1
Auszeichnen
Von Hand, in Webflow oder mit einem Assistenten, der themeforge.pro/ai gelesen hat.
- Schritt 2
Prüfen
Die kostenlose Markup-Prüfung findet unbenannte Felder und die anderen Fehler von oben, bevor du baust.
- Schritt 3
Adminbereich ansehen
Bau das Theme und öffne seinen WordPress-Adminbereich gratis im Browser.