Construcción de un sitio WordPress, de principio a fin
Por qué existe este método
Un agente diseña mal cuando su bucle de retroalimentación es lento. Maquetar una página dentro de WordPress cuesta de tres a cinco minutos por iteración — componer, guardar, serializar, purgar, recargar, mirar. En HTML local con un servidor de desarrollo el mismo bucle toma cinco segundos, y la calidad del diseño depende del número de iteraciones de forma mucho más fiable que de cualquier instrucción estética.
La segunda mitad es una restricción de entrega: el cliente edita el sitio sin escribir código. Eso es lo que prohíbe los bloques HTML en bruto y el contenido propiedad de las plantillas — y restringe la conversión, nunca el dibujo.
En una línea: el diseño vive en archivos, no en el contenido de la página. WordPress recibe un tema terminado, no instrucciones de maquetación.
Las dos reglas que vienen primero
Regla 0 — dibuja la fase 2 como si la fase 4 no existiera. Ninguna restricción de conversión entra en la maqueta. Anticipar «no core/html» mientras se dibuja elimina silenciosamente la profundidad, las superposiciones y el objeto central; el resultado se convierte perfectamente y no complace a nadie.
Regla 0′ — ninguna libertad estética sale de la referencia. Con una referencia, un modelo deriva hacia su propio estilo personal: beige cálido donde la referencia es blanco frío, una serifa con carácter donde tiene una sans, un acento que nunca tuvo. Se leen siete invariantes de registro de la referencia y se reproducen; cambiar uno es una pregunta para el cliente, hecha antes de codificar. Los invariantes, la puerta de registro y el script de medición están en references/register.md.
Las diez reglas
Cada una proviene de un error que realmente se cometió.
- Exige una referencia visual. Sin una, la salida regresa al centro estadístico: fuente neutra, degradado púrpura, página blanca.
- Ninguna maqueta sin fotos reales. Una caja gris se lee como una imagen rota.
- Nada llega a producción de WordPress antes de dos aprobaciones del cliente: la maqueta, luego el plan de despliegue.
- La página de inicio es una página, nunca una plantilla —
front-page.htmlcontiene cabecera,post-content, pie de página. - Cero bloques
core/html. Compón con grupos, encabezados, párrafos, imágenes. - Las imágenes viven en la biblioteca de medios, con un
iden cadacore/image. - Todas las variantes interactivas viven en la página; el script alterna una clase.
- Ningún tema de terceros debajo del diseño.
- Acepta en el editor, no en el front-end — una página puede renderizarse perfectamente y ser inutilizable en Gutenberg.
- La fidelidad de píxeles se mide, no se estima a ojo: estilos computados y geometría, selector por selector.
Fases y sus puertas
No comiences una fase hasta que la puerta anterior esté superada.
| Fase | Quién | Puerta de salida |
|---|---|---|
| 0 · Espacio de trabajo | Agente | Proyecto en la carpeta de trabajo del usuario, acceso de escritura verificado |
| 1 · Brief | Cliente | Encuesta de referencia, paleta y tipo tomados de la referencia, lista de «lo que añado» |
| 2 · Maqueta | Iterativo | Página de inicio en HTML, puerta de registro superada, aprobación del cliente |
| 3 · Conjunto de páginas | Agente | Cada página ensamblada a partir de una fuente común de cabecera/pie de página |
| 4 · Tema de bloques + staging | Agente | Tema construido; WordPress local configurado con herramientas repetibles; puertas 1–5 superadas en staging |
| 5 · Despliegue | Agente, tras aprobación del cliente del plan | Copia de seguridad fuera de la raíz web, luego las mismas herramientas ejecutadas en producción |
| 6 · Aceptación | Agente | Puertas 1–5 superadas en producción, o de vuelta a la fase 4 |
Fases 0–3 y el plan de despliegue: references/phases.md. Conversión HTML a bloques: references/block-conversion.md. Las cinco puertas con su código: references/acceptance.md.
El staging es local, y cada cambio es una herramienta. El contenido y la configuración se escriben mediante scripts PHP idempotentes (tools/install-site.php, tools/configure-*.php) ejecutados con el CLI de PHP contra una copia local, nunca escritos en wp-admin. Los mismos scripts se repiten en producción durante el despliegue, y repetir uno dos veces no cambia nada — eso se verifica, no se asume.
Elige la rama
El método es el mismo para cada sitio; lo que difiere es la fase 4 en adelante.
| Sitio | Qué cambia | Lee |
|---|---|---|
| Showcase | Páginas, formularios (Contact Form 7 + Flamingo), páginas legales | este archivo y las fases |
| Tienda | Plantillas de bloques de WooCommerce, importación de catálogo, filtros de producto, bloques de carrito/finalizar compra, consentimiento, pagos, newsletter, confirmación de pedido | references/store.md |
| App web | Tipos de contenido personalizados, roles, REST, bloques dinámicos, flujos de cuenta — la maqueta sigue impulsando cada pantalla pública | references/web-app.md |
references/store.md está medido en una construcción real (WooCommerce 11.2.2, finalizar compra con bloques, tema de bloques). references/web-app.md no lo está: lo dice, y redirige a las habilidades que sí lo están.
Los hechos pertenecen al cliente
La maqueta inventa texto a partir del brief; nunca inventa hechos. Reseñas, valoraciones, recuentos de clientes, logotipos de prensa, tiempos de entrega, precios de servicios, cláusulas legales e identidad de la empresa se quedan como marcadores de posición visibles — à compléter para lo que solo el cliente puede proporcionar, à vérifier para lo que se leyó en el sitio antiguo y puede estar desactualizado. Una reseña inventada pasa todas las puertas y es el único defecto que puede costarle al cliente un problema legal.
En comentarios, mensajes de commit e informes, indica qué afirmaciones fueron medidas (con la fecha) y cuáles fueron leídas (con la fuente).
Herramientas
| Archivo | Cuándo |
|---|---|
scripts/serve.mjs | Fase 2 — servidor estático sin dependencias, prueba el siguiente puerto cuando uno está ocupado |
scripts/assemble.mjs | Fase 3 — construye cada página a partir de una fuente común de <head>, cabecera y pie de página |
scripts/fetch-fonts.mjs | Fase 4 — autoalberga Google Fonts: ninguna solicitud a Google desde los visitantes, nada que declarar bajo GDPR |
scripts/novamira.mjs | Fase 5 — llama a una habilidad de Novamira a través de HTTP sin registrar un servidor MCP |
assets/theme-skeleton/ | Fase 4 — tema de bloques mínimo: theme.json con blockGap: 0px, editor.css, fuentes en el editor |
Referencias
| Archivo | Léelo |
|---|---|
references/register.md | Antes de la fase 1, y antes de mostrar cualquier maqueta |
references/phases.md | Fases 0–3, luego la secuencia de despliegue de la fase 5 |
references/block-conversion.md | Durante la fase 4, cada vez |
references/acceptance.md | Fases 4 y 6 — las cinco puertas y la higiene de medición |
references/store.md | Cualquier sitio WooCommerce |
references/web-app.md | Membresía, reservas, paneles de control, cualquier cosa con usuarios registrados haciendo trabajo |
references/pitfalls.md | Tan pronto como un síntoma te sorprenda |
Habilidades relacionadas: wp-theme-block-fse para theme.json y plantillas, wp-design-system para tokens, wp-woocommerce para hooks y HPOS, wp-deploy para migraciones, wp-plugin-architecture y wp-blocks-gutenberg para código de aplicación, wp-accessibility y wp-performance antes de la aceptación.