Warm Corner : un site de café, du HTML à l’administration WordPress
Un petit site que nous avons écrit nous-mêmes : trois pages et une page de réglages, balisées avec les attributs ThemeForge. Voici ce qui est entré, ce qui en est sorti et ce que la première génération nous a appris.
3 pages (accueil, menu, contacts) et une page de réglages pour l’en-tête et le pied de page sont devenues 4 groupes de champs avec 53 champs, dont 3 listes : les cartes mises en avant, les boissons et la cuisine. Le client modifie tout cela dans l’administration WordPress ; le design ne change pas.
Quel attribut est allé où
| Attribut | Où, et ce qu’il devient dans l’administration |
|---|---|
wp-fields-group | Sur le <body> de chaque page : le nom du groupe de champs de la page |
fld-text | Titres, légendes, prix : des champs de texte simple |
fld-area | Paragraphes d’introduction : du texte sur plusieurs lignes |
fld-editor | Le bloc « About us » : un éditeur visuel |
fld-image | L’image principale et les icônes des cartes : des images |
fld-loop | Cartes mises en avant, boissons, cuisine : des listes où le client ajoute des lignes et les réordonne |
fld-link | Boutons : un lien avec son texte |
opt-text, opt-area, opt-image | En-tête, pied de page et theme-options.html : des réglages communs à tout le site, un seul jeu pour toutes les pages |
wp-menu | La navigation : un menu WordPress au lieu d’une liste figée |
La carte d’un café, du balisage à l’administration
Survolez une ligne du balisage pour voir le champ qu’elle devient.
<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> …trois autres cartes, balisées de la même façon </div>
Warm Corner, notre site de démonstration : 3 pages et une page de réglages → 4 groupes de champs, 53 champs, 3 listes. Le client ajoute, supprime et réordonne les lignes ; le design ne change pas.
Ce que votre client ouvre dans WordPress
Captures de notre site de test après la génération et « Charger les données » : les champs viennent des attributs, les valeurs du HTML. L’administration est en anglais, comme l’exemple lui-même.
theme-options.html : une seule valeur pour l’en-tête et le pied de page de toutes les pages.Ce que la première génération nous a fait corriger
Des champs sans nom
Nous avions d’abord écrit fld-text sans nom. Tous les champs sans nom d’un même type ont fusionné en un seul, et le journal de génération signalait 10 collisions sur la page d’accueil. Avec des noms, zéro.
Des images SVG dans les champs image
WordPress n’accepte pas les SVG dans la médiathèque : une image liée à un champ doit donc être une image matricielle. Nous avons gardé les sources SVG et fait pointer le balisage vers des copies PNG.
Un groupe dans une liste
Une ligne de liste est déjà un groupe de champs. Un fld-group en trop dans fld-loop donnait à chaque ligne un sous-groupe vide, et le site affichait des cartes vides. Chaque carte de la liste a besoin des attributs, pas seulement la première.
Faites de même avec votre site
- Étape 1
Balisez-le
À la main, dans Webflow, ou avec un assistant qui a lu themeforge.pro/ai.
- Étape 2
Vérifiez-le
La vérification gratuite du balisage repère les champs sans nom et les autres erreurs ci-dessus avant la génération.
- Étape 3
Prévisualisez l’administration
Générez le thème et ouvrez gratuitement son administration WordPress dans le navigateur.