Des avis que le client complète lui-même
Les avis arrivent sans cesse, et il vaut mieux que le client les ajoute lui-même. Chaque avis est une ligne de la liste : la citation, la photo de l’auteur et une signature.
Ce que vous obtenez
<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
Le client a ajouté le troisième avis dans l’administration.
Étape par étape
La liste sur le bloc des avis
fld-loop sur le conteneur qui regroupe les avis.
<div class="reviews__list" fld-loop="Reviews">
La citation
Un avis tient souvent sur plusieurs lignes : fld-area conserve les retours à la ligne du client.
<blockquote fld-area="Quote">The quietest table in town and the best flat white.</blockquote>
Photo et signature
fld-image sur la balise
<img>et fld-text sur le nom de l’auteur.<img class="review__photo" src="images/guest-1.jpg" alt="" fld-image="Guest photo"> <span fld-text="Guest name">Maria, regular</span>
Chaque avis balisé
Tous les avis portent les mêmes attributs : « Charger les données » les importe alors tous.
<figure class="review"> <blockquote fld-area="Quote">They remember my order after one visit.</blockquote>
À retenir
- Le client change l’ordre des avis en faisant glisser les lignes et supprime ceux qui ne servent plus : le bloc reste intact.
- La description de la photo (
alt) vient de la médiathèque WordPress, et non du balisage.
Erreurs fréquentes
Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Quote">Maria, regular</figcaption>
</figure>Un même nom pour deux champs différents, la citation et la signature : la génération signale une collision, et l’administration ne garde qu’un champ pour deux rôles.
<figure class="review">
<blockquote fld-area="Quote">The best flat white.</blockquote>
<figcaption fld-text="Guest name">Maria, regular</figcaption>
</figure>Chaque champ a son propre nom.