250 lines
8.1 KiB
Markdown
250 lines
8.1 KiB
Markdown
# 🚨 PROBLEMAS CRÍTICOS DEL CUSTOMIZER - GKACHELE™
|
|
|
|
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
|
|
|
**Fecha:** 15 Enero 2025
|
|
**Hash:** `gkachele-problemas-customizer-20250115-001`
|
|
**Prioridad:** 🔴 **CRÍTICA - REHACER COMPLETAMENTE**
|
|
|
|
---
|
|
|
|
## 📋 PROBLEMAS IDENTIFICADOS
|
|
|
|
### 1. 🎨 **DISEÑO Y UI/UX HORRIBLE**
|
|
|
|
**Problemas:**
|
|
- ❌ Formulario horrible - No se parece a WordPress
|
|
- ❌ Colores horribles - No usa la paleta de WordPress
|
|
- ❌ No hay scroll suave en sidebar
|
|
- ❌ Falta espaciado y padding adecuado
|
|
- ❌ Tipografía incorrecta
|
|
- ❌ Botones mal diseñados
|
|
- ❌ No hay iconos a elegir (solo emojis)
|
|
|
|
**Solución:**
|
|
- ✅ Copiar EXACTAMENTE el diseño de WordPress Customizer
|
|
- ✅ Usar colores oficiales de WordPress (#2271b1, #f0f0f1, etc.)
|
|
- ✅ Implementar scroll suave
|
|
- ✅ Usar iconos Dashicons o Font Awesome
|
|
- ✅ Mejorar tipografía y espaciado
|
|
|
|
---
|
|
|
|
### 2. 💾 **GUARDADO INCONSISTENTE**
|
|
|
|
**Problemas:**
|
|
- ❌ Algunas cosas guardan automáticamente
|
|
- ❌ Otras cosas NO guardan automáticamente
|
|
- ❌ No hay botón "Cancelar" - hay que refrescar o salir
|
|
- ❌ No hay botón "Descartar cambios"
|
|
- ❌ No hay indicador de cambios sin guardar
|
|
- ❌ No hay confirmación antes de salir con cambios sin guardar
|
|
|
|
**Solución (copiar WordPress):**
|
|
- ✅ **Botón "Guardar y Publicar"** (siempre visible en footer)
|
|
- ✅ **Botón "Descartar cambios"** (solo visible si hay cambios)
|
|
- ✅ **Indicador de cambios sin guardar** (punto rojo o badge)
|
|
- ✅ **Confirmación antes de salir** si hay cambios sin guardar
|
|
- ✅ **Auto-guardado** solo para preview, NO para guardar definitivamente
|
|
- ✅ **Estado de guardado** visible (guardado, guardando, error)
|
|
|
|
---
|
|
|
|
### 3. 🗺️ **MAPA NO FUNCIONA**
|
|
|
|
**Problemas:**
|
|
- ❌ Mapa no se muestra
|
|
- ❌ No genera automáticamente desde dirección
|
|
- ❌ Requiere URL manual (muy complicado)
|
|
|
|
**Solución:**
|
|
- ✅ Generar mapa automáticamente desde campo "Dirección"
|
|
- ✅ Usar Google Maps Embed sin API key
|
|
- ✅ Mostrar preview del mapa en tiempo real
|
|
- ✅ Permitir editar posición manualmente si es necesario
|
|
|
|
---
|
|
|
|
### 4. 📱 **WHATSAPP FLOTANTE NO EXISTE**
|
|
|
|
**Problemas:**
|
|
- ❌ No hay botón flotante de WhatsApp
|
|
- ❌ No se puede configurar número
|
|
- ❌ No aparece en el sitio
|
|
|
|
**Solución:**
|
|
- ✅ Añadir opción en sidebar: "Activar WhatsApp flotante"
|
|
- ✅ Campo para número de WhatsApp
|
|
- ✅ Botón flotante en esquina inferior derecha
|
|
- ✅ Icono de WhatsApp
|
|
- ✅ Mensaje predefinido editable
|
|
|
|
---
|
|
|
|
### 5. 🧩 **FUNCIONALIDADES FALTANTES**
|
|
|
|
**Problemas:**
|
|
- ❌ No hay iconos a elegir (solo emojis)
|
|
- ❌ No hay selector de iconos
|
|
- ❌ No hay biblioteca de iconos
|
|
|
|
**Solución:**
|
|
- ✅ Integrar Dashicons (como WordPress)
|
|
- ✅ O Font Awesome
|
|
- ✅ Selector visual de iconos
|
|
- ✅ Búsqueda de iconos
|
|
- ✅ Preview del icono seleccionado
|
|
|
|
---
|
|
|
|
### 6. 📜 **SCROLL Y NAVEGACIÓN**
|
|
|
|
**Problemas:**
|
|
- ❌ No hay scroll suave
|
|
- ❌ Sidebar no tiene scroll independiente
|
|
- ❌ No hay navegación entre secciones
|
|
- ❌ No hay menú lateral de secciones (como WordPress)
|
|
|
|
**Solución:**
|
|
- ✅ Scroll suave en sidebar
|
|
- ✅ Menú lateral de secciones (como WordPress)
|
|
- ✅ Navegación rápida entre secciones
|
|
- ✅ Scroll independiente para sidebar y preview
|
|
|
|
---
|
|
|
|
## 🎯 CÓMO FUNCIONA WORDPRESS CUSTOMIZER (ANÁLISIS)
|
|
|
|
### Estructura Visual:
|
|
```
|
|
┌─────────────────────────────────────────────────┐
|
|
│ Header: Logo + "Personalizar" + X (cerrar) │
|
|
├──────────┬───────────────────────────────────────┤
|
|
│ │ │
|
|
│ SIDEBAR │ PREVIEW IFRAME │
|
|
│ (350px) │ (flex: 1) │
|
|
│ │ │
|
|
│ ┌──────┐ │ │
|
|
│ │Menú │ │ │
|
|
│ │Sec. │ │ │
|
|
│ └──────┘ │ │
|
|
│ │ │
|
|
│ Sección │ │
|
|
│ Contenido│ │
|
|
│ │ │
|
|
│ Sección │ │
|
|
│ Colores │ │
|
|
│ │ │
|
|
│ Sección │ │
|
|
│ Media │ │
|
|
│ │ │
|
|
│ ... │ │
|
|
│ │ │
|
|
├──────────┴───────────────────────────────────────┤
|
|
│ Footer: [Descartar] [Guardar y Publicar] │
|
|
└─────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Características Clave de WordPress:
|
|
|
|
1. **Header:**
|
|
- Logo WordPress a la izquierda
|
|
- Título "Personalizar" centrado
|
|
- Botón X para cerrar (arriba derecha)
|
|
- Fondo: #23282d
|
|
|
|
2. **Sidebar:**
|
|
- Ancho fijo: 300px (no 350px)
|
|
- Menú lateral de secciones (colapsable)
|
|
- Scroll independiente
|
|
- Fondo: #fff
|
|
- Borde derecho: 1px solid #ddd
|
|
|
|
3. **Controles:**
|
|
- Cada control tiene label arriba
|
|
- Inputs con bordes suaves
|
|
- Color primario: #2271b1
|
|
- Hover: #135e96
|
|
- Focus: box-shadow azul
|
|
|
|
4. **Footer:**
|
|
- Siempre visible (sticky)
|
|
- Botón "Descartar" (gris, solo si hay cambios)
|
|
- Botón "Guardar y Publicar" (azul, siempre visible)
|
|
- Indicador de estado (guardando...)
|
|
|
|
5. **Preview:**
|
|
- Iframe a pantalla completa
|
|
- Actualización en tiempo real
|
|
- No se recarga completo, solo cambia CSS/HTML
|
|
|
|
6. **Guardado:**
|
|
- **NO guarda automáticamente** (solo preview)
|
|
- **Solo guarda cuando presionas "Guardar y Publicar"**
|
|
- Muestra "Guardando..." mientras guarda
|
|
- Muestra "Guardado" cuando termina
|
|
- Si hay cambios sin guardar, muestra punto rojo
|
|
|
|
---
|
|
|
|
## ✅ PLAN DE REHACER CUSTOMIZER
|
|
|
|
### Fase 1: Diseño Visual (Copiar WordPress)
|
|
- [ ] Cambiar colores a paleta WordPress
|
|
- [ ] Rediseñar header (logo + título + cerrar)
|
|
- [ ] Rediseñar sidebar (300px, scroll suave)
|
|
- [ ] Rediseñar controles (inputs, labels, botones)
|
|
- [ ] Rediseñar footer (sticky, botones correctos)
|
|
- [ ] Añadir menú lateral de secciones
|
|
|
|
### Fase 2: Sistema de Guardado (Copiar WordPress)
|
|
- [ ] Eliminar auto-guardado (solo preview)
|
|
- [ ] Implementar botón "Guardar y Publicar"
|
|
- [ ] Implementar botón "Descartar cambios"
|
|
- [ ] Indicador de cambios sin guardar
|
|
- [ ] Confirmación antes de salir
|
|
- [ ] Estado de guardado visible
|
|
|
|
### Fase 3: Funcionalidades Faltantes
|
|
- [ ] Mapa automático desde dirección
|
|
- [ ] WhatsApp flotante configurable
|
|
- [ ] Selector de iconos (Dashicons/Font Awesome)
|
|
- [ ] Scroll suave
|
|
- [ ] Navegación entre secciones
|
|
|
|
### Fase 4: Testing y Pulido
|
|
- [ ] Probar todo el flujo
|
|
- [ ] Verificar que guarda correctamente
|
|
- [ ] Verificar que descarta correctamente
|
|
- [ ] Verificar preview en tiempo real
|
|
- [ ] Verificar todas las funcionalidades
|
|
|
|
---
|
|
|
|
## 📝 NOTAS IMPORTANTES
|
|
|
|
1. **NO inventar nada nuevo** - Copiar EXACTAMENTE WordPress
|
|
2. **Colores oficiales WordPress:**
|
|
- Azul primario: #2271b1
|
|
- Azul hover: #135e96
|
|
- Gris fondo: #f0f0f1
|
|
- Gris borde: #c3c4c7
|
|
- Texto: #1d2327
|
|
- Header: #23282d
|
|
|
|
3. **Comportamiento de guardado:**
|
|
- Preview = Cambios visibles pero NO guardados
|
|
- Guardar = Cambios guardados en base de datos
|
|
- Descartar = Volver al último estado guardado
|
|
|
|
4. **Referencias:**
|
|
- WordPress Customizer: `/wp-admin/customize.php`
|
|
- Código fuente: `wp-content/themes/*/inc/customizer/`
|
|
- JavaScript: `wp.customize` API
|
|
|
|
---
|
|
|
|
**Última actualización:** 2025-01-15
|
|
**Prioridad:** 🔴 **CRÍTICA - REHACER COMPLETAMENTE**
|
|
**Próxima acción:** Rehacer customizer copiando EXACTAMENTE WordPress
|