Une liste où le client ajoute des lignes
fld-loop="Nom de la liste" Boissons, avis, équipe, questions et réponses : tout ce qui se présente comme une suite de cartes identiques. Le client ajoute, supprime et réordonne les lignes ; le design de chaque carte reste.
Où le placer
Sur le bloc qui contient les cartes répétées. La première carte qui porte des champs devient le modèle d’une ligne ; les autres sont les lignes que « Charger les données » importe.
Les champs à l’intérieur d’une carte se balisent comme d’habitude : fld-text pour un texte, fld-image pour une image.
Le champ n’apparaît dans l’administration que si la page a un nom de groupe : wp-fields-group sur son <body>.
Exemple : la carte des boissons
<div class="cards" fld-loop="Drinks">
<article class="card">
<h3 fld-text="Name">Latte</h3>
<span fld-text="Price">$4.20</span>
</article>
<article class="card">
<h3 fld-text="Name">Cappuccino</h3>
<span fld-text="Price">$3.90</span>
</article>
</div>Le client a ajouté la troisième ligne dans l’administration ; elle n’était pas dans le balisage.
À retenir
- Balisez chaque carte, pas seulement la première. Une carte sans attributs n’est pas reprise dans l’administration.
- Le nom de la liste est son titre dans l’administration : écrivez-le de façon que le client le comprenne.
- Des noms différents pour les champs d’une même ligne.
- Sans aucune ligne dans l’administration, tout le bloc disparaît de la page.
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.
<div fld-loop="Drinks">
<div class="deco"></div>
<article class="card">
<h3 fld-text="Name">Latte</h3>
</article>
</div>Un élément décoratif avant les cartes : la génération l’ignore, le signale dans le journal, et l’élément n’est pas affiché.
<div class="deco"></div>
<div fld-loop="Drinks">
<article class="card">
<h3 fld-text="Name">Latte</h3>
</article>
</div>La décoration se place hors de la liste.
<section fld-loop="Drinks">
<div fld-loop="Drinks">…</div>
</section>Une liste dans une liste du même nom : la génération renomme la liste intérieure en « Drinks 2 » et signale une collision.
<section fld-loop="Menu sections">
<div fld-loop="Drinks">…</div>
</section>Chaque liste a son propre nom.
Le même dans les réglages du site ou sur une catégorie
fld-loop | sur une page ou un article, comme ci-dessus |
|---|---|
opt-loop | dans les réglages du site : une seule liste pour toutes les pages, comme les liens vers les réseaux sociaux |
tax-loop | sur une catégorie ou une étiquette |
Format alternatif
f_loop, o_loop, t_loop fonctionne de la même façon : la génération donne un thème identique.