# WordPress — tema Med Toledo Kreator

> Ruta de publicación cuando el proyecto va en WordPress. El criterio de diseño
> es el mismo del resto del skill; aquí sólo cambia el empaque y el despliegue.

---

## 1. La arquitectura en una frase

**Header y footer se definen UNA vez para todo el sitio. Cada página es una
plantilla propia que hereda esos globales.**

```
Sitio
├── header.php          ← GLOBAL. Se define una vez.
├── footer.php          ← GLOBAL. Se define una vez.
└── page-templates/
    ├── pagina-personalizada.php    ← canvas en blanco para landings
    ├── template-home.php           ← una plantilla por página
    ├── template-servicios.php
    └── template-contacto.php
```

Nunca se repite el header ni el footer dentro del contenido de una página. Si el
cliente cambia el teléfono, se toca **un** archivo y cambia en todo el sitio.

---

## 2. El tema

**Med Toledo Kreator** — propio, standalone, sin dependencias de otros temas.

- Archivo: `medtoledo-kreator.zip`
- Instalación: WP Admin → Apariencia → Temas → Subir → Activar
- Panel de colores: WP Admin → Personalizar → Colores del Sitio
  (cambia un color y actualiza todo el sitio en tiempo real)

### Verificar conexión

```
GET https://{sitio}/wp-json/mdk/v1/ping
→ {"status":"ok","site":"Nombre","version":"1.0.0"}
```

Si el ping falla, no seguir. Revisar que el tema esté activo y el plugin instalado.

---

## 3. Secciones globales

### Header (`header.php`)

Se construye **una sola vez** por cliente, con su branding.

- Logo del cliente
- Navegación con `wp_nav_menu()` — menú `primary`
- Para que los enlaces sean flex items directos: `display: contents` en `ul` y `li`
- CSS global aquí dentro para reglas que aplican a todo el sitio
- Altura máxima 80px en escritorio, por defecto 64-72px
- Hamburguesa funcional en móvil
- Una sola línea en escritorio. Si no cabe a 1024px, acortar etiquetas o pasar a hamburguesa

### Footer (`footer.php`)

También una sola vez.

- Logo, mismos colores que el header
- Menú `footer` vía `wp_nav_menu()`
- Columnas de enlaces, contacto, legales
- Dirección de contacto está bien. **Tiras de clima, ciudad u hora no**
  (ver `anti-slop.md` §7)
- Nada de sellos de versión tipo `v1.4.2`

### Menús a registrar

| Slug | Nombre |
|---|---|
| `primary` | Menú Principal |
| `footer` | Menú Footer |

### Subida

WP Admin → Apariencia → Editor de temas. O por FTP si el editor está bloqueado.

---

## 4. Una plantilla por página

Cada página del sitio tiene su propio archivo de plantilla. No se meten varias
páginas en una sola plantilla condicional.

### Landings y páginas de diseño custom

**`page-templates/pagina-personalizada.php`** — el caballito de batalla.

- Canvas en blanco total: sin header ni footer del tema, sin sidebar, cero CSS externo
- Desactiva `wpautop` y todos los filtros que rompen HTML embebido
- **Usar para TODAS las landings y páginas con diseño a medida**

Asignar vía API:

```json
{ "template": "page-templates/pagina-personalizada.php" }
```

### Páginas del sitio corporativo

Plantilla propia por página, heredando header y footer globales:

```php
<?php
/* Template Name: Servicios */
get_header();
?>
<main class="mdk-servicios">
  <!-- secciones -->
</main>
<?php get_footer(); ?>
```

**Regla:** si dos páginas comparten estructura exacta, comparten plantilla. Si
difieren en secciones, cada una lleva la suya.

---

## 5. El problema de `wpautop` — crítico

Cuando el sitio usa el tema standalone **sin** `pagina-personalizada.php`,
WordPress aplica `wpautop` al contenido guardado vía REST API. Eso mete etiquetas
`<p>` **dentro** de los bloques `<style>` y alrededor de elementos como `<main>`,
rompiendo el CSS y creando huecos visuales.

**Síntoma:** ves `<p><main class="..."></p>` en el HTML, o el CSS renderizado como
texto visible en la página.

**Fix obligatorio** — envolver TODO el contenido en un bloque de HTML:

```html
<!-- wp:html -->
<style>...</style>
<div class="mdk-pagina">...</div>
<!-- /wp:html -->
```

Eso le indica a WordPress que use el renderizador de bloques en vez de `wpautop`.

**Alternativa mejor:** usar `pagina-personalizada.php`, que ya desactiva `wpautop`.

---

## 6. Publicar vía REST API

### Credenciales

> **Nunca escribir usuario, contraseña ni token dentro de un archivo del proyecto
> o del skill.**

Leer de variables de entorno:

- `WP_URL` — base del sitio
- `WP_USER` — usuario
- `WP_APP_PASSWORD` — contraseña de aplicación de WordPress

Si no están definidas, **pedirlas al usuario en el momento**. No buscarlas en archivos.

### Crear página

```
POST {WP_URL}/wp-json/wp/v2/pages
Authorization: Basic {base64(user:app_password)}
Content-Type: application/json
```

```json
{
  "title": "",
  "content": "<!-- wp:html -->...<!-- /wp:html -->",
  "status": "draft",
  "template": "page-templates/pagina-personalizada.php"
}
```

**Publicar en `draft` primero.** Revisar, y sólo entonces pasar a `publish`.

### Editar página existente

```
POST {WP_URL}/wp-json/wp/v2/pages/{id}
```

**Nunca** leer `content['rendered']` y guardarlo de vuelta — inyecta etiquetas
`<p>` dentro del CSS y rompe la página. Se reescribe el contenido completo desde
la fuente.

### Después de publicar

- Limpiar caché si hay WP Fastest Cache u otro plugin de caché
- Verificar en móvil real, no sólo en el inspector

---

## 7. CSS sin conflictos

### Prefijo por página

Todo el CSS de una página va bajo un prefijo único:

```css
.mdk-servicios { }
.mdk-servicios__hero { }
.mdk-servicios__cta { }
```

Así dos páginas nunca se pisan, y el bloque se puede mover sin arrastrar estilos.

### Nunca

- **`!important`** — con `pagina-personalizada.php` no hay conflictos que pelear
- Leer `content['rendered']` y guardarlo de vuelta
- `var(--color)` dentro de `background-color` de secciones (falla en algunos contextos)

---

## 8. Design system del tema

Estos son los valores por defecto del tema. **Se reemplazan por los del cliente**
cuando existan — el design system del cliente manda sobre el del tema.

### Tipografías

```
Titulares: 'Bebas Neue', sans-serif
Cuerpo:    'Sora', sans-serif (300, 400, 500, 600, 700, 800)
```

```html
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
```

### Paleta base

| Token | HEX | Uso |
|---|---|---|
| `--blue` | `#006BFF` | primario, botones, enlaces |
| `--cyan` | `#00D4FF` | acento, resaltados |
| `--green` | `#A7FF00` | éxito, palomas |
| oscuro | `#03070F` | fondo de secciones oscuras |
| oscuro medio | `#061B3A` | tiras de credibilidad |
| footer | `#020812` | fondo del footer |

> Recordatorio de `anti-slop.md`: **un solo color de acento por página**, bloqueado.
> Si el cliente trae su paleta, esta se descarta completa, no se mezcla.

---

## 9. SOP de cliente nuevo

1. **Subir y activar** `medtoledo-kreator.zip`
2. **Verificar** el ping de la API
3. **Registrar menús** `primary` y `footer`
4. **Construir `header.php`** con el branding del cliente
5. **Construir `footer.php`** con la misma identidad
6. **Subir ambos** vía editor de temas
7. **Cargar los colores del cliente** en Personalizar → Colores del Sitio
8. **Crear cada página** vía REST API con su plantilla, en `draft`
9. **Revisar en móvil real**
10. **Correr el gate** de `gate-preflight.md`
11. **Pasar a `publish`**
12. **Limpiar caché**

---

## 10. Encadenamiento

Para el detalle de publicación, endpoints avanzados, campos meta de SEO y el
histórico de sitios ya montados, encadenar con **`webkreator-medtoledo`**.

Este archivo cubre lo necesario para construir y publicar bien. Ese skill tiene
el registro operativo de cada sitio del cliente.
