Une bannière d’accueil avec un fond et un bouton
La première chose que voit le visiteur, et ce que le client met régulièrement à jour : une nouvelle offre, une autre photo, un autre texte sur le bouton. Une fois la section balisée, tout cela se modifie dans l’administration, et la mise en page reste la vôtre.
Ce que vous obtenez
<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span>
</a>
</section>
</body>Open every day
Coffee for slow morningsSingle-origin espresso, fresh pastries and a table by the window.
See the menuSix champs dans un seul groupe : le client les trouve sur la page « Home ».
Étape par étape
Nommez le groupe de champs
L’attribut wp-fields-group sur
<body>donne aux champs de la page un titre commun dans l’administration. Sans lui, les champs n’apparaissent pas.<body wp-fields-group="Home">
Faites du fond un champ
fld-bg-image se place sur le bloc qui porte le fond. Dans l’administration, c’est un champ image ; sur le site, c’est le fond de la section.
<section class="hero" fld-bg-image="Hero background">
Balisez les textes
Les lignes courtes sont des fld-text, le paragraphe un fld-area : le client peut y aller à la ligne. Chaque champ a son propre nom, facile à comprendre.
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p> <h1 fld-text="Hero title">Coffee for slow mornings</h1> <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
Un bouton, deux champs
fld-link sur le lien fait de l’adresse un champ ; le texte se balise à part, à l’intérieur du lien, sous un autre nom.
<a class="button" href="/menu" fld-link="Hero button"> <span fld-text="Hero button text">See the menu</span> </a>
À retenir
- Nommez les champs de façon que le client les comprenne sans vous : « Hero title », pas « Text 1 ».
- Les textes de votre balisage passent dans les champs avec « Charger les données » : le client n’a pas à les ressaisir.
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.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button">See the menu</span></a>Lien et texte sous un même nom : un seul champ pour deux rôles, et le bouton ne fonctionne plus. La génération signale une collision.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span></a>Le texte a son propre nom, par exemple « Hero button text ».