458 lines
12 KiB
Markdown
458 lines
12 KiB
Markdown
# 🎯 CUSTOMIZER WORDPRESS COMPLETO - DEMO PARA ADAPTAR
|
||
|
||
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
||
|
||
**Fecha:** 15 Enero 2025
|
||
**Hash:** `gkachele-customizer-wordpress-completo-20250115-001`
|
||
**Estado:** ✅ **DEMO COMPLETO CREADO - LISTO PARA ANALIZAR Y ADAPTAR**
|
||
|
||
---
|
||
|
||
## 📋 ARCHIVO DEMO
|
||
|
||
**Ubicación:** `c:\word\demo\templates\customizer-wordpress-COMPLETO.html`
|
||
|
||
**Tipo:** Archivo HTML independiente (no toca código actual)
|
||
|
||
**Para verlo:** Abrir directamente en navegador o usar `file:///C:/word/demo/templates/customizer-wordpress-COMPLETO.html`
|
||
|
||
---
|
||
|
||
## ✅ FUNCIONALIDADES IMPLEMENTADAS (TODO LO DE WORDPRESS)
|
||
|
||
### 1. 🎨 **DISEÑO VISUAL EXACTO WORDPRESS**
|
||
|
||
- ✅ Header: Fondo #23282d, logo "W", título "Personalizar", botón cerrar
|
||
- ✅ Sidebar: 300px de ancho, fondo blanco, borde #ddd
|
||
- ✅ Footer: Sticky, fondo #f6f7f7, botones estilo WordPress
|
||
- ✅ Colores oficiales WordPress: #2271b1 (azul), #f0f0f1 (gris), #23282d (header)
|
||
- ✅ Tipografía: -apple-system, Segoe UI, Roboto
|
||
- ✅ Scroll suave en sidebar
|
||
|
||
---
|
||
|
||
### 2. 📑 **PANELES Y SECCIONES COLAPSABLES**
|
||
|
||
**Panel: General Options** (colapsable)
|
||
- Identidad del sitio
|
||
- Top Bar Setting
|
||
- Menu Bar Setting
|
||
- Page Header Setting
|
||
- Top Scroller Setting
|
||
- Blog Setting
|
||
- Footer Setting
|
||
- Body Typography Setting
|
||
|
||
**Secciones individuales:**
|
||
- Colores
|
||
- Contenido
|
||
- Medios
|
||
- Contacto
|
||
- Redes Sociales
|
||
- Widgets
|
||
- Menús
|
||
|
||
**Funcionalidad:**
|
||
- Paneles se pueden colapsar/expandir
|
||
- Navegación lateral con menú
|
||
- Secciones activas se resaltan con borde azul izquierdo
|
||
|
||
---
|
||
|
||
### 3. 🎛️ **CONTROLES IMPLEMENTADOS**
|
||
|
||
#### **Toggle Switches (Enable/Disable)**
|
||
- Estilo WordPress exacto
|
||
- Slider animado
|
||
- Color azul cuando activo (#2271b1)
|
||
- Usado para: Enable Top Header, Enable Info 1/2/3, WhatsApp flotante
|
||
|
||
#### **Range Sliders**
|
||
- Deslizadores para valores numéricos
|
||
- Muestra valor actual (ej: "150px", "24px", "1.6")
|
||
- Usado para: Logo Size, Font Sizes, Line Height
|
||
- Estilo WordPress: thumb azul, track gris
|
||
|
||
#### **Color Pickers**
|
||
- Input type="color" + input texto sincronizado
|
||
- Muestra hex code
|
||
- Usado para: Color primario, secundario, texto, fondo
|
||
|
||
#### **Media Uploaders**
|
||
- Botón "Seleccionar imagen"
|
||
- Preview de imagen seleccionada
|
||
- Usado para: Logo, Hero Image, Favicon
|
||
- (En WordPress real abre biblioteca de medios)
|
||
|
||
#### **Text Inputs**
|
||
- Inputs de texto estándar
|
||
- Focus: borde azul + box-shadow
|
||
- Usado para: Nombres, títulos, URLs, emails, teléfonos
|
||
|
||
#### **Textareas**
|
||
- Áreas de texto multilínea
|
||
- Resizable verticalmente
|
||
- Usado para: Descripciones, contenido largo
|
||
|
||
#### **Selects (Dropdowns)**
|
||
- Selects estándar
|
||
- Estilo WordPress
|
||
- Usado para: Font Family, tipos de redes sociales
|
||
|
||
#### **Repeater Controls**
|
||
- Añadir/eliminar elementos repetidos
|
||
- Cada elemento tiene sus propios controles
|
||
- Botón "Eliminar" por elemento
|
||
- Botón "+ Añadir" para crear nuevos
|
||
- Usado para: Redes sociales múltiples
|
||
|
||
#### **Icon Pickers**
|
||
- Grid de iconos visual
|
||
- Click para seleccionar
|
||
- Visual feedback (selected state)
|
||
- Usado para: Seleccionar iconos Font Awesome
|
||
|
||
#### **Hidden Controls**
|
||
- Controles ocultos (solo labels)
|
||
- Usado para: Separadores de sección ("Info 1", "Info 2", "Setting")
|
||
|
||
#### **Dividers**
|
||
- Líneas separadoras horizontales
|
||
- Usado para: Separar grupos de controles
|
||
|
||
---
|
||
|
||
### 4. 📱 **SECCIONES ESPECÍFICAS IMPLEMENTADAS**
|
||
|
||
#### **Identidad del sitio**
|
||
- Nombre del sitio (text)
|
||
- Descripción corta (textarea)
|
||
- Logo Size (range slider)
|
||
- Site Title Font Size (range slider)
|
||
- Site Description Font Size (range slider)
|
||
|
||
#### **Top Bar Setting**
|
||
- Enable/Disable toggle
|
||
- Info 1: Enable toggle, Icon picker, Title, Link
|
||
- Info 2: Enable toggle, Icon, Title, Link
|
||
- Info 3: Enable toggle, Icon, Title, Link
|
||
|
||
#### **Colores**
|
||
- Color primario (color picker)
|
||
- Color secundario (color picker)
|
||
- Color de texto (color picker)
|
||
- Color de fondo (color picker)
|
||
|
||
#### **Body Typography Setting**
|
||
- Font Family (select)
|
||
- Font Size (range slider)
|
||
- Line Height (range slider)
|
||
|
||
#### **Medios**
|
||
- Logo (media uploader + preview)
|
||
- Imagen Hero (media uploader + preview)
|
||
- Favicon (media uploader + preview)
|
||
|
||
#### **Redes Sociales**
|
||
- WhatsApp Flotante (toggle)
|
||
- Número de WhatsApp (tel input)
|
||
- Repeater de redes sociales (añadir/eliminar)
|
||
- Tipo (select: Facebook, Instagram, Twitter, YouTube, LinkedIn)
|
||
- URL (url input)
|
||
|
||
#### **Contenido**
|
||
- Título principal (text)
|
||
- Descripción (textarea)
|
||
|
||
#### **Contacto**
|
||
- Dirección (text)
|
||
- Teléfono (tel)
|
||
- Email (email)
|
||
|
||
---
|
||
|
||
### 5. 💾 **SISTEMA DE GUARDADO (ESTILO WORDPRESS)**
|
||
|
||
#### **Botones Footer:**
|
||
- **"Descartar cambios"** (gris, solo visible si hay cambios)
|
||
- **"Guardar y Publicar"** (azul, siempre visible)
|
||
|
||
#### **Estados:**
|
||
- **"Listo"** - Sin cambios
|
||
- **"Guardando..."** - Mientras guarda (azul)
|
||
- **"Guardado"** - Guardado exitoso (verde)
|
||
- **Error** - Si falla (rojo)
|
||
|
||
#### **Indicador de cambios sin guardar:**
|
||
- Punto rojo pequeño junto a estado
|
||
- Solo visible si hay cambios sin guardar
|
||
|
||
#### **Comportamiento:**
|
||
- **NO guarda automáticamente** (solo preview en tiempo real)
|
||
- **Solo guarda cuando presionas "Guardar y Publicar"**
|
||
- **"Descartar"** restaura valores originales
|
||
- **Confirmación antes de salir** si hay cambios sin guardar
|
||
|
||
---
|
||
|
||
### 6. 🔄 **FUNCIONALIDADES JAVASCRIPT**
|
||
|
||
#### **Navegación:**
|
||
- `showSection(sectionId)` - Mostrar sección específica
|
||
- `togglePanel(element)` - Colapsar/expandir panel
|
||
- Navegación lateral actualiza sección activa
|
||
|
||
#### **Detección de cambios:**
|
||
- `markAsChanged()` - Marca que hay cambios sin guardar
|
||
- Detecta cambios en todos los inputs
|
||
- Actualiza indicador visual
|
||
|
||
#### **Guardado:**
|
||
- `saveChanges()` - Guarda cambios y actualiza estado
|
||
- Simula guardado (1 segundo)
|
||
- Actualiza valores originales
|
||
- Muestra "Guardado" temporalmente
|
||
|
||
#### **Descartar:**
|
||
- `discardChanges()` - Restaura valores originales
|
||
- Confirmación antes de descartar
|
||
- Sincroniza todos los controles (colors, ranges, toggles)
|
||
|
||
#### **Preview:**
|
||
- `updatePreview()` - Actualiza preview en tiempo real
|
||
- Se llama automáticamente al cambiar cualquier control
|
||
- (En implementación real, actualizaría iframe)
|
||
|
||
#### **Repeater:**
|
||
- `addRepeaterItem()` - Añade nuevo elemento
|
||
- `removeRepeaterItem(button)` - Elimina elemento
|
||
- Confirmación antes de eliminar
|
||
|
||
#### **Media Uploader:**
|
||
- `openMediaUploader(type)` - Abre selector de medios
|
||
- (En WordPress real, abre biblioteca de medios)
|
||
- Preview de imagen seleccionada
|
||
|
||
#### **Icon Picker:**
|
||
- Click en icono selecciona y actualiza input
|
||
- Visual feedback (selected state)
|
||
- Sincroniza con input de icono
|
||
|
||
---
|
||
|
||
### 7. 🎨 **ESTILOS CSS (COLORES WORDPRESS)**
|
||
|
||
```css
|
||
/* Colores principales */
|
||
Header: #23282d
|
||
Sidebar fondo: #fff
|
||
Sidebar borde: #ddd
|
||
Footer fondo: #f6f7f7
|
||
Botón primario: #2271b1
|
||
Botón primario hover: #135e96
|
||
Botón secundario: #f0f0f1
|
||
Botón secundario hover: #dcdcde
|
||
Texto: #23282d
|
||
Texto secundario: #646970
|
||
Borde inputs: #8c8f94
|
||
Focus inputs: #2271b1 (borde + box-shadow)
|
||
Toggle activo: #2271b1
|
||
Toggle inactivo: #c3c4c7
|
||
Range thumb: #2271b1
|
||
Estado guardado: #00a32a
|
||
Estado error: #d63638
|
||
Indicador cambios: #d63638
|
||
```
|
||
|
||
---
|
||
|
||
### 8. 📐 **ESTRUCTURA HTML**
|
||
|
||
```
|
||
customizer-header (fixed top)
|
||
├─ customizer-header-left
|
||
│ ├─ customizer-logo (W)
|
||
│ └─ customizer-title (Personalizar)
|
||
└─ customizer-close (×)
|
||
|
||
customizer-container (flex)
|
||
├─ customizer-sidebar (300px)
|
||
│ ├─ customizer-nav (menú lateral)
|
||
│ │ ├─ customizer-nav-panel (colapsable)
|
||
│ │ │ ├─ customizer-nav-panel-title
|
||
│ │ │ └─ customizer-nav-panel-items
|
||
│ │ │ └─ customizer-nav-item (secciones)
|
||
│ │ └─ customizer-nav-item-single (secciones individuales)
|
||
│ └─ customizer-sidebar-content
|
||
│ └─ customizer-section (contenido de cada sección)
|
||
│ ├─ customizer-section-title
|
||
│ └─ customizer-control (cada control)
|
||
│ ├─ customizer-control-label
|
||
│ ├─ [tipo de control]
|
||
│ └─ customizer-control-description
|
||
└─ customizer-preview (flex: 1)
|
||
└─ preview-iframe
|
||
|
||
customizer-footer (fixed bottom)
|
||
├─ customizer-footer-left
|
||
│ ├─ customizer-unsaved-indicator
|
||
│ └─ customizer-status
|
||
└─ customizer-footer-right
|
||
├─ btn-discard
|
||
└─ btn-save
|
||
```
|
||
|
||
---
|
||
|
||
### 9. 🔧 **TIPOS DE CONTROLES Y SUS CLASES CSS**
|
||
|
||
| Tipo | Clase CSS | Uso |
|
||
|------|-----------|-----|
|
||
| Toggle Switch | `.customizer-toggle` | Enable/Disable |
|
||
| Range Slider | `.customizer-range` | Valores numéricos |
|
||
| Color Picker | `.customizer-color-picker` | Colores |
|
||
| Text Input | `.customizer-control-input` | Texto |
|
||
| Textarea | `.customizer-control-textarea` | Texto largo |
|
||
| Select | `.customizer-control-select` | Dropdowns |
|
||
| Media Button | `.customizer-media-button` | Subir imágenes |
|
||
| Repeater | `.customizer-repeater` | Elementos repetidos |
|
||
| Icon Picker | `.customizer-icon-picker` | Seleccionar iconos |
|
||
| Hidden | `.customizer-control-hidden` | Separadores |
|
||
|
||
---
|
||
|
||
### 10. 📝 **ATRIBUTOS DATA-SETTING**
|
||
|
||
Todos los controles tienen `data-setting="nombre_setting"` para:
|
||
- Identificar qué control es
|
||
- Guardar/restaurar valores
|
||
- Sincronizar con backend
|
||
|
||
Ejemplos:
|
||
- `data-setting="site_name"`
|
||
- `data-setting="enable_top_header"`
|
||
- `data-setting="color_primary"`
|
||
- `data-setting="logo_size"`
|
||
|
||
---
|
||
|
||
### 11. 🎯 **COMPORTAMIENTO EXACTO WORDPRESS**
|
||
|
||
1. **Preview en tiempo real:**
|
||
- Cambios se ven inmediatamente en preview
|
||
- NO se guardan hasta presionar "Guardar y Publicar"
|
||
|
||
2. **Detección de cambios:**
|
||
- Cualquier cambio marca como "sin guardar"
|
||
- Muestra punto rojo + botón "Descartar"
|
||
|
||
3. **Guardado:**
|
||
- Solo cuando presionas botón
|
||
- Muestra "Guardando..." mientras guarda
|
||
- Muestra "Guardado" cuando termina
|
||
|
||
4. **Descartar:**
|
||
- Restaura TODOS los valores originales
|
||
- Sincroniza todos los controles
|
||
- Oculta indicador de cambios
|
||
|
||
5. **Salir:**
|
||
- Si hay cambios sin guardar, pregunta confirmación
|
||
- Si no hay cambios, sale directamente
|
||
|
||
---
|
||
|
||
### 12. 🔄 **SINCRONIZACIÓN DE CONTROLES**
|
||
|
||
#### **Color Pickers:**
|
||
- Color picker → Input texto (hex)
|
||
- Ambos sincronizados bidireccionalmente
|
||
|
||
#### **Range Sliders:**
|
||
- Range slider → Span con valor
|
||
- Muestra unidad (px, etc.)
|
||
|
||
#### **Toggles:**
|
||
- Checkbox → Slider visual
|
||
- Estado sincronizado
|
||
|
||
---
|
||
|
||
### 13. 📦 **FUNCIONALIDADES ADICIONALES**
|
||
|
||
- ✅ Scroll suave en sidebar
|
||
- ✅ Paneles colapsables
|
||
- ✅ Navegación rápida entre secciones
|
||
- ✅ Preview iframe (preparado)
|
||
- ✅ Responsive (sidebar fijo 300px)
|
||
- ✅ Confirmaciones antes de acciones destructivas
|
||
- ✅ Estados visuales claros
|
||
- ✅ Tooltips y descripciones
|
||
- ✅ Validación de inputs (type="email", "tel", "url")
|
||
|
||
---
|
||
|
||
### 14. 🎨 **DETALLES VISUALES WORDPRESS**
|
||
|
||
- Border radius: 4px (botones, inputs)
|
||
- Transitions: 0.2s (hover, focus)
|
||
- Box shadow en focus: `0 0 0 1px #2271b1`
|
||
- Font sizes: 13px (labels), 14px (inputs), 12px (descriptions)
|
||
- Padding: 8px 12px (inputs), 8px 16px (botones)
|
||
- Gap: 10px (entre elementos)
|
||
|
||
---
|
||
|
||
## 🚀 PRÓXIMOS PASOS PARA ADAPTAR
|
||
|
||
1. **Analizar qué funcionalidades necesitamos:**
|
||
- Revisar demo completo
|
||
- Identificar qué secciones/controles usar
|
||
- Decidir qué adaptar y qué no
|
||
|
||
2. **Adaptar al customizer actual:**
|
||
- Copiar diseño visual
|
||
- Implementar controles necesarios
|
||
- Integrar con backend existente
|
||
- Mantener funcionalidad actual
|
||
|
||
3. **Implementar funcionalidades faltantes:**
|
||
- Mapa automático desde dirección
|
||
- WhatsApp flotante funcional
|
||
- Upload de archivos real
|
||
- Preview iframe funcional
|
||
|
||
4. **Testing:**
|
||
- Probar todos los controles
|
||
- Verificar guardado/descartar
|
||
- Verificar preview en tiempo real
|
||
- Verificar todas las secciones
|
||
|
||
---
|
||
|
||
## 📌 NOTAS IMPORTANTES
|
||
|
||
- **Este es un DEMO independiente** - No toca código actual
|
||
- **Todo está implementado** - Listo para copiar/adaptar
|
||
- **Estilo WordPress exacto** - Colores, tipografía, espaciado
|
||
- **Funcionalidades completas** - Toggles, sliders, repeaters, etc.
|
||
- **Sistema de guardado correcto** - Como WordPress (no auto-guarda)
|
||
|
||
---
|
||
|
||
## 🔗 REFERENCIAS
|
||
|
||
- **Archivo demo:** `customizer-wordpress-COMPLETO.html`
|
||
- **Código WordPress analizado:** `wp-content/themes/abiz/core/customizer/`
|
||
- **Documentación problemas:** `PROBLEMAS_CRITICOS_CUSTOMIZER.md`
|
||
|
||
---
|
||
|
||
**Última actualización:** 2025-01-15
|
||
**Hash:** `gkachele-customizer-wordpress-completo-20250115-001`
|
||
**Estado:** ✅ **DEMO COMPLETO - LISTO PARA ANALIZAR Y ADAPTAR**
|
||
|
||
---
|
||
|
||
**© 2025 GKACHELE™. Todos los derechos reservados.**
|