Bewertungen, die dein Kunde selbst ergänzt
Bewertungen kommen ständig dazu, und am besten fügt dein Kunde sie selbst hinzu. Jede Bewertung ist ein Eintrag der Liste: Zitat, Foto des Gastes und eine Zeile mit seinem Namen.
Das Ergebnis
<section class="reviews">
<h2 fld-text="Reviews title">What guests say</h2>
<div class="reviews__list" fld-loop="Reviews">
<figure class="review">
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Maria, regular</span>
</figcaption>
</figure>
<figure class="review">
<blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
<figcaption>
<img class="review__photo" src="images/guest-2.jpg" alt="" fld-image="Guest photo">
<span fld-text="Guest name">Leo, works next door</span>
</figcaption>
</figure>
</div>
</section>“The quietest table in town and the best flat white.” — Maria
“They remember my order after one visit.” — Leo
“Cardamom bun every Friday.” — Ines
Die dritte Bewertung hat der Kunde im Adminbereich hinzugefügt.
Schritt für Schritt
Die Liste kommt an den Block mit den Bewertungen
fld-loop an der Hülle, in der die Bewertungen stehen.
<div class="reviews__list" fld-loop="Reviews">
Das Zitat
Eine Bewertung kann mehrere Zeilen lang sein, deshalb fld-area: Die Zeilenumbrüche deines Kunden bleiben erhalten.
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
Foto und Namenszeile
fld-image am
<img>und fld-text am Namen des Gastes.<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo"> <span fld-text="Guest name">Maria, regular</span>
Jede Bewertung ist markiert
Alle Bewertungen tragen dieselben Attribute. Dann bringt „Daten laden“ jede davon in den Adminbereich.
<figure class="review"> <blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
Worauf es ankommt
- Die Reihenfolge ändert dein Kunde, indem er die Einträge per Drag-and-drop verschiebt, und überflüssige löscht er einfach: Der Block geht dabei nicht kaputt.
- Die Beschreibung des Fotos (
alt) kommt aus der WordPress-Mediathek, nicht aus dem Markup.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Quote">Maria, regular</figcaption>
</figure>Ein Name für zwei verschiedene Felder, Zitat und Namenszeile: Der Build meldet eine Kollision, und im Adminbereich bleibt ein Feld für zwei Aufgaben.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Guest name">Maria, regular</figcaption>
</figure>Jedes Feld bekommt einen eigenen Namen.