Warm Corner: la web de una cafetería, del HTML al panel de WordPress
Un sitio pequeño que escribimos nosotros mismos: tres páginas y una página de ajustes, marcadas con atributos de ThemeForge. Aquí verás qué entró, qué salió y qué nos enseñó la primera generación.
3 páginas (inicio, carta y contacto) y una página de ajustes para la cabecera y el pie se convirtieron en 4 grupos con 53 campos, 3 de ellos listas: las tarjetas destacadas, las bebidas y la cocina. El cliente lo edita todo en el panel de WordPress; el diseño no cambia.
Qué atributo fue a cada sitio
| Atributo | Dónde va y en qué se convierte en el panel |
|---|---|
wp-fields-group | En el <body> de cada página: el nombre del grupo de campos de la página |
fld-text | Títulos, leyendas y precios: campos de texto simple |
fld-area | Párrafos de entrada: texto de varias líneas |
fld-editor | El bloque «Sobre nosotros»: un editor visual |
fld-image | La imagen de cabecera y los iconos de las tarjetas: imágenes |
fld-loop | Tarjetas destacadas, bebidas y cocina: listas en las que el cliente agrega y reordena filas |
fld-link | Botones: un enlace con su texto |
opt-text, opt-area, opt-image | Cabecera, pie y theme-options.html: ajustes de todo el sitio, un solo juego para todas las páginas |
wp-menu | La navegación: un menú de WordPress en lugar de una lista fija |
La carta de una cafetería, del marcado al panel
Señala una línea del marcado para ver el campo en que se convierte.
<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> …tres tarjetas más, marcadas igual </div>
Warm Corner, nuestro sitio de demostración: 3 páginas y una página de ajustes → 4 grupos de campos, 53 campos, 3 listas. El cliente agrega, quita y reordena filas; el diseño no cambia.
Lo que tu cliente abre en WordPress
Pantallas de nuestro sitio de prueba después de generar y pulsar «Cargar datos»: los campos salen de los atributos y los valores, del HTML. El panel está en inglés, como el propio ejemplo.
theme-options.html: un solo valor para la cabecera y el pie de todas las páginas.Qué nos obligó a corregir la primera generación
Campos sin nombre
Al principio escribimos fld-text sin nombre. Todos los campos sin nombre del mismo tipo se fusionaron en uno, y el registro de la generación informó de 10 colisiones en la página de inicio. Con nombres, ninguna.
Imágenes SVG en campos de imagen
WordPress no admite SVG en la biblioteca de medios, así que una imagen vinculada a un campo tiene que ser un mapa de bits. Conservamos los SVG de origen y apuntamos el marcado a copias en PNG.
Un grupo dentro de una lista
Una fila de una lista ya es un grupo de campos. Un fld-group de más dentro de fld-loop dio a cada fila un subgrupo vacío, y el sitio mostró tarjetas vacías. Todas las tarjetas de la lista necesitan los atributos, no solo la primera.
Haz lo mismo con tu sitio
- Paso 1
Márcalo
A mano, en Webflow o con un asistente que haya leído themeforge.pro/ai.
- Paso 2
Compruébalo
La comprobación gratuita del marcado detecta los campos sin nombre y los demás errores de arriba antes de generar.
- Paso 3
Mira el panel
Genera el tema y abre su panel de WordPress en el navegador, gratis.