22 KiB
PLAN DE ACCIÓN: CORRECCIÓN DE DEFAULTS HARDCODEADOS
Fecha inicio: [Pendiente] Fecha fin: [Pendiente] Estado: 🔴 NO INICIADO
📋 OBJETIVO
Eliminar defaults hardcodeados del código y establecer tabla wp_apus_theme_components_defaults como única fuente de verdad.
⏱️ TIEMPO ESTIMADO TOTAL
- FASE 1: 2-3 horas (Limpiar código actual)
- FASE 2: 1 hora (Crear tabla defaults)
- FASE 3: 3-4 horas (Corregir algoritmo)
- TOTAL: 6-8 horas
🔄 ESTADO DEL PLAN
FASE 1: Limpiar Código Actual [ ] 0/15 pasos completados
FASE 2: Crear Tabla Defaults [ ] 0/4 pasos completados
FASE 3: Corregir Algoritmo [ ] 0/8 pasos completados
Progreso total: 0/27 pasos (0%)
FASE 1: LIMPIAR CÓDIGO ACTUAL
Objetivo: Eliminar código mal implementado antes de corregir algoritmo
Duración estimada: 2-3 horas
PASO 1.1: Backup de Código Actual
Duración: 5 min
- Crear branch de backup:
git checkout -b backup-antes-limpieza - Hacer commit de estado actual:
git commit -am "backup: estado antes de limpieza de defaults" - Push del backup:
git push origin backup-antes-limpieza - Volver a main:
git checkout main - Crear branch de trabajo:
git checkout -b fix/limpiar-defaults-hardcodeados
Verificación: Branch backup-antes-limpieza existe en GitHub
PASO 1.2: Listar Archivos a Eliminar del Admin Panel
Duración: 10 min
- Ejecutar:
dir admin\assets\js\component-*.js 2>nul(listar JS componentes) - Ejecutar:
dir admin\assets\css\component-*.css 2>nul(listar CSS componentes) - Ejecutar:
dir admin\components\component-*.php 2>nul(listar PHP componentes) - Ejecutar:
dir admin\includes\sanitizers\class-*-sanitizer.php 2>nul(listar sanitizers) - Documentar lista de archivos encontrados abajo
Archivos encontrados:
JS:
-
CSS:
-
PHP Componentes:
-
Sanitizers:
-
PASO 1.3: Eliminar Archivos JS de Componentes
Duración: 5 min
- Eliminar:
admin/assets/js/component-navbar.js(si existe) - Eliminar:
admin/assets/js/component-topbar.js(si existe) - Eliminar:
admin/assets/js/component-hero.js(si existe) - Eliminar: otros archivos
component-*.jslistados arriba - Verificar que NO quedan archivos:
dir admin\assets\js\component-*.js 2>nul
Archivos eliminados: [Anotar aquí]
PASO 1.4: Eliminar Archivos CSS de Componentes
Duración: 5 min
- Eliminar:
admin/assets/css/component-navbar.css(si existe) - Eliminar:
admin/assets/css/component-topbar.css(si existe) - Eliminar:
admin/assets/css/component-hero.css(si existe) - Eliminar: otros archivos
component-*.csslistados arriba - Verificar que NO quedan archivos:
dir admin\assets\css\component-*.css 2>nul
Archivos eliminados: [Anotar aquí]
PASO 1.5: Eliminar Archivos PHP de Componentes
Duración: 5 min
- Eliminar:
admin/components/component-navbar.php(si existe) - Eliminar:
admin/components/component-top-bar.php(si existe) - Eliminar:
admin/components/component-hero.php(si existe) - Eliminar: otros archivos
component-*.phplistados arriba - Verificar que NO quedan archivos:
dir admin\components\component-*.php 2>nul
Archivos eliminados: [Anotar aquí]
PASO 1.6: Eliminar Sanitizers de Componentes
Duración: 5 min
- Eliminar:
admin/includes/sanitizers/class-topbar-sanitizer.php(si existe) - Eliminar:
admin/includes/sanitizers/class-navbar-sanitizer.php(si existe) - Eliminar: otros archivos
class-*-sanitizer.phplistados arriba - Verificar que NO quedan archivos:
dir admin\includes\sanitizers\class-*-sanitizer.php 2>nul
Archivos eliminados: [Anotar aquí]
PASO 1.7: Limpiar class-admin-menu.php
Duración: 10 min
Archivo: admin/includes/class-admin-menu.php
- Leer el archivo completo
- Identificar líneas que encolaron CSS de componentes (wp_enqueue_style para component-*.css)
- Identificar líneas que encolaron JS de componentes (wp_enqueue_script para component-*.js)
- Eliminar todas las líneas encontradas
- Verificar que método
enqueue_assets()solo encola archivos del core (admin-panel.css, admin-app.js)
Líneas eliminadas: [Anotar números de línea]
PASO 1.8: Limpiar admin/pages/main.php (Parte 1: Analizar)
Duración: 15 min
Archivo: admin/pages/main.php
- Leer el archivo completo
- Buscar secciones de tabs de navegación (ej: Top Bar, Navbar, etc.)
- Buscar secciones de tab-pane con formularios de componentes
- Documentar números de línea a eliminar abajo
Secciones encontradas:
Tabs navegación:
Líneas: _____ a _____
Tab-pane Top Bar:
Líneas: _____ a _____
Tab-pane Navbar:
Líneas: _____ a _____
Otros:
Líneas: _____ a _____
PASO 1.9: Limpiar admin/pages/main.php (Parte 2: Eliminar)
Duración: 10 min
Archivo: admin/pages/main.php
Usando los rangos de líneas identificados en PASO 1.8:
- Eliminar sección de tab navegación de componentes
- Eliminar sección tab-pane de Top Bar
- Eliminar sección tab-pane de Navbar
- Eliminar otras secciones documentadas arriba
- Verificar que NO quedan referencias a componentes
- Dejar SOLO estructura base del admin panel
Verificación: Buscar "top_bar", "navbar", "component" en el archivo - NO debe encontrar nada
PASO 1.10: Limpiar admin/assets/js/admin-app.js
Duración: 15 min
Archivo: admin/assets/js/admin-app.js
- Leer el archivo completo
- Buscar métodos
renderTopBar(),renderNavbar(), etc. - Buscar referencias a componentes en método
collectFormData() - Buscar valores hardcodeados tipo:
'Accede a más de 200,000...' - Eliminar todos los métodos y referencias encontradas
- Verificar que NO quedan fallbacks hardcodeados (ej:
|| 'default value')
Líneas eliminadas: [Anotar aquí]
PASO 1.11: Limpiar class-settings-manager.php (Parte 1)
Duración: 10 min
Archivo: admin/includes/class-settings-manager.php
- Leer método
get_defaults()completo - Identificar sección de defaults de componentes (top_bar, navbar, etc.)
- Documentar líneas a eliminar
Defaults encontrados:
top_bar: Líneas _____ a _____
navbar: Líneas _____ a _____
otros: Líneas _____ a _____
PASO 1.12: Limpiar class-settings-manager.php (Parte 2)
Duración: 15 min
Archivo: admin/includes/class-settings-manager.php
- Eliminar método
get_defaults()COMPLETO (se reemplazará después) - Leer método
sanitize_settings() - Eliminar secciones de sanitización de componentes
- Verificar que NO quedan referencias a top_bar, navbar, etc.
Líneas eliminadas: [Anotar aquí]
PASO 1.13: Limpiar Tema (header.php y otros)
Duración: 20 min
- Leer
header.phpcompleto - Buscar código que lea de Settings Manager para componentes
- Buscar valores hardcodeados duplicados (ej: "Accede a más de 200,000...")
- Documentar qué encontraste
Código encontrado en header.php:
Líneas: _____ a _____
Descripción: _______________
- Revisar otros archivos del tema si es necesario
- Documentar archivos revisados
Archivos del tema revisados:
- header.php
- footer.php
- _______
Decisión: ¿Eliminar código configurable del tema o dejarlo? [Decidir con usuario antes de eliminar]
PASO 1.14: Limpiar Base de Datos
Duración: 5 min
- Conectar a base de datos (phpMyAdmin o terminal)
- Ejecutar:
SELECT * FROM wp_apus_theme_components; - Documentar componentes encontrados:
Componentes en DB:
component_name: ___________
component_name: ___________
- Ejecutar:
DELETE FROM wp_apus_theme_components;(vaciar tabla) - Verificar:
SELECT COUNT(*) FROM wp_apus_theme_components;(debe ser 0)
Registros eliminados: _____
PASO 1.15: Commit de Limpieza
Duración: 5 min
- Ejecutar:
git status(ver todos los cambios) - Ejecutar:
git add . - Ejecutar commit:
git commit -m "fix: eliminar implementación incorrecta de componentes
- Eliminar archivos JS/CSS/PHP de componentes mal implementados
- Limpiar class-admin-menu.php de encolamiento de componentes
- Limpiar admin/pages/main.php de secciones de componentes
- Limpiar admin-app.js de métodos y defaults hardcodeados
- Limpiar class-settings-manager.php de get_defaults() y sanitizers
- Vaciar tabla wp_apus_theme_components
Preparación para implementar arquitectura correcta con tabla defaults.
Ref: PROBLEMA-DEFAULTS-HARDCODEADOS-ALGORITMO.md"
- Ejecutar:
git push origin fix/limpiar-defaults-hardcodeados
✅ CHECKLIST FASE 1 COMPLETA
- Backup creado en branch separado
- Archivos de componentes eliminados (JS, CSS, PHP, Sanitizers)
- class-admin-menu.php limpiado
- admin/pages/main.php limpiado
- admin-app.js limpiado
- class-settings-manager.php limpiado
- Tema revisado
- Base de datos vaciada
- Commit y push realizados
Estado FASE 1: ⬜ Pendiente | 🟡 En progreso | ✅ Completada
FASE 2: CREAR TABLA DE DEFAULTS
Objetivo: Implementar tabla wp_apus_theme_components_defaults en base de datos
Duración estimada: 1 hora
PASO 2.1: Crear Script SQL
Duración: 10 min
- Crear archivo:
admin/includes/migrations/create-defaults-table.sql - Copiar SQL de
PROBLEMA-DEFAULTS-HARDCODEADOS-ALGORITMO.md(líneas 418-437) - Verificar sintaxis SQL
Contenido del archivo:
CREATE TABLE IF NOT EXISTS wp_apus_theme_components_defaults (
id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
component_name VARCHAR(50) NOT NULL COMMENT 'Nombre del componente',
config_key VARCHAR(100) NOT NULL COMMENT 'Clave de configuración',
config_value TEXT NOT NULL COMMENT 'Valor por defecto extraído del tema',
data_type ENUM('string','integer','boolean','array','json') NOT NULL,
version VARCHAR(20) DEFAULT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY unique_default_config (component_name, config_key),
INDEX idx_component_name (component_name),
INDEX idx_config_key (config_key)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
PASO 2.2: Ejecutar SQL en Base de Datos
Duración: 5 min
Método 1: phpMyAdmin
- Abrir phpMyAdmin
- Seleccionar base de datos del tema
- Ir a pestaña SQL
- Copiar contenido de
create-defaults-table.sql - Ejecutar SQL
Método 2: Terminal/CMD
- Conectar a MySQL/MariaDB
- Ejecutar:
USE nombre_base_datos; - Copiar y ejecutar SQL
Verificación:
- Ejecutar:
SHOW TABLES LIKE 'wp_apus_theme_components_defaults'; - Debe retornar la tabla
PASO 2.3: Verificar Estructura de Tabla
Duración: 5 min
- Ejecutar:
DESCRIBE wp_apus_theme_components_defaults; - Verificar columnas:
- id (BIGINT)
- component_name (VARCHAR 50)
- config_key (VARCHAR 100)
- config_value (TEXT)
- data_type (ENUM)
- version (VARCHAR 20)
- created_at (DATETIME)
- updated_at (DATETIME)
- Verificar índices:
- PRIMARY KEY (id)
- UNIQUE (component_name, config_key)
- INDEX (component_name)
- INDEX (config_key)
PASO 2.4: Commit de Creación de Tabla
Duración: 5 min
- Ejecutar:
git add admin/includes/migrations/create-defaults-table.sql - Ejecutar commit:
git commit -m "feat(db): crear tabla wp_apus_theme_components_defaults
- Tabla para almacenar valores por defecto de componentes
- Estructura normalizada (un row por campo)
- Índices para optimizar búsquedas
- Script SQL reutilizable en create-defaults-table.sql
Ref: PROBLEMA-DEFAULTS-HARDCODEADOS-ALGORITMO.md"
- Ejecutar:
git push origin fix/limpiar-defaults-hardcodeados
✅ CHECKLIST FASE 2 COMPLETA
- Script SQL creado en
admin/includes/migrations/create-defaults-table.sql - SQL ejecutado en base de datos
- Tabla
wp_apus_theme_components_defaultsexiste - Estructura verificada (8 columnas, 3 índices)
- Commit y push realizados
Estado FASE 2: ⬜ Pendiente | 🟡 En progreso | ✅ Completada
FASE 3: CORREGIR ALGORITMO
Objetivo: Modificar archivos del algoritmo para usar tabla defaults en lugar de hardcodear valores
Duración estimada: 3-4 horas
PASO 3.1: Modificar PASO 12 del Algoritmo (Parte 1: Analizar)
Duración: 15 min
Archivo: _planeacion/apus-theme/admin-panel-theme/100-modularizacion-admin/00-algoritmo/12-F03-IMPLEMENTACION-IMPLEMENTAR-ADMIN-JS.md
- Leer archivo completo
- Identificar líneas con objeto
DEFAULT_CONFIG(aprox líneas 43-51, 169-177) - Identificar líneas con fallbacks en método
render()(aprox líneas 117-129) - Identificar líneas con botón reset (aprox líneas 196-204)
- Documentar cambios necesarios
Líneas a modificar:
DEFAULT_CONFIG: Líneas _____ a _____
Fallbacks render(): Líneas _____ a _____
Botón reset: Líneas _____ a _____
PASO 3.2: Modificar PASO 12 del Algoritmo (Parte 2: Eliminar DEFAULT_CONFIG)
Duración: 20 min
Archivo: 12-F03-IMPLEMENTACION-IMPLEMENTAR-ADMIN-JS.md
- Eliminar sección que instruye crear objeto
DEFAULT_CONFIG - Eliminar ejemplo de código con
const DEFAULT_CONFIG = {...} - Agregar nota: "❌ NO crear objeto DEFAULT_CONFIG - Los defaults vienen de DB vía AJAX"
Texto a agregar:
## ❌ IMPORTANTE: NO Crear Objeto DEFAULT_CONFIG
**PROHIBIDO crear objeto con defaults hardcodeados en JavaScript.**
Los valores por defecto vienen de la base de datos vía AJAX.
Settings Manager lee de tabla `wp_apus_theme_components_defaults`.
PASO 3.3: Modificar PASO 12 del Algoritmo (Parte 3: Corregir Fallbacks)
Duración: 20 min
Archivo: 12-F03-IMPLEMENTACION-IMPLEMENTAR-ADMIN-JS.md
- Modificar sección del método
render() - Eliminar ejemplos con fallbacks:
config.field || 'default value' - Reemplazar por:
config.field(sin fallback) - Agregar nota explicando que AJAX SIEMPRE retorna datos completos (DB + defaults merged)
Ejemplo ANTES (INCORRECTO):
bgColorInput.value = config.custom_styles?.bg_color || '#000000';
Ejemplo DESPUÉS (CORRECTO):
bgColorInput.value = config.custom_styles?.bg_color;
// NO fallback necesario - Settings Manager ya hace merge con defaults de DB
PASO 3.4: Modificar PASO 12 del Algoritmo (Parte 4: Botón Reset)
Duración: 15 min
Archivo: 12-F03-IMPLEMENTACION-IMPLEMENTAR-ADMIN-JS.md
- Modificar sección del botón "Reset to Defaults"
- Cambiar de
loadConfig(DEFAULT_CONFIG)a llamada AJAX - Agregar código para llamar endpoint que retorna defaults de DB
Código a agregar:
// Botón Reset to Defaults
resetBtn.addEventListener('click', function() {
if (confirm('¿Restaurar valores por defecto?')) {
// Llamar AJAX para obtener defaults de DB
axios.get(apusAdminData.ajaxUrl, {
params: {
action: 'get_component_defaults',
component: 'component_name',
nonce: apusAdminData.nonce
}
})
.then(response => {
loadConfig(response.data);
// Guardar defaults como config personalizada
saveForm();
});
}
});
PASO 3.5: Crear NUEVO PASO en Algoritmo (Poblar Defaults)
Duración: 30 min
- Crear archivo:
_planeacion/.../00-algoritmo/07B-F02-DISENO-POBLAR-DEFAULTS-DB.md - Ubicación: DESPUÉS de PASO 7, ANTES de PASO 8
Contenido del archivo:
# PASO 7B: POBLAR TABLA DE DEFAULTS
**Prerequisito:** PASO 7 completado (código configurable documentado)
## Objetivo
Insertar valores por defecto del componente en tabla `wp_apus_theme_components_defaults`.
## 7B.1 Leer Valores Extraídos
- Abrir archivo del PASO 6: `03-DOCUMENTACION-ESTRUCTURA-DATOS.md`
- Identificar TODOS los campos con sus valores por defecto
- Valores de textos/URLs: Del código hardcodeado actual
- Valores de colores/estilos: Del CSS original del componente
## 7B.2 Generar Script SQL
Crear archivo: `[componente]/defaults-insert.sql`
Formato:
INSERT INTO wp_apus_theme_components_defaults
(component_name, config_key, config_value, data_type, version)
VALUES
('[component_name]', 'enabled', '1', 'boolean', '2.1.4'),
('[component_name]', '[field1]', '[valor]', 'string', '2.1.4'),
...
## 7B.3 Ejecutar SQL
- Conectar a base de datos
- Ejecutar script SQL
- Verificar: SELECT * FROM wp_apus_theme_components_defaults WHERE component_name='[nombre]';
## 7B.4 Verificar
- [ ] Todos los campos del PASO 6 tienen row en tabla defaults
- [ ] Valores coinciden con los extraídos del código/CSS actual
- [ ] data_type es correcto para cada campo
PASO 3.6: Modificar PASO 14 del Algoritmo (Eliminar get_defaults)
Duración: 30 min
Archivo: _planeacion/.../00-algoritmo/14-F04-CIERRE-GIT-COMMITS.md
- Leer sección "14.4 Modificar Settings Manager (CRÍTICO)"
- Leer subsección "Modificación 1: Agregar Defaults (línea ~146)"
- Eliminar TODO el ejemplo del método
get_defaults()con array hardcodeado (líneas ~88-123) - Reemplazar por instrucciones para leer de tabla defaults
Texto a eliminar:
public function get_defaults() {
return array(
'version' => APUS_ADMIN_PANEL_VERSION,
'components' => array(
'component_name' => array(
'enabled' => true,
// ... defaults hardcodeados
)
)
);
}
Texto a agregar:
### Modificación: Settings Manager Lee de Tabla Defaults
**❌ NO crear método get_defaults() con array hardcodeado**
Los defaults ya están en tabla `wp_apus_theme_components_defaults` (insertados en PASO 7B).
Settings Manager debe leer de DB, NO tener defaults hardcodeados.
Ver método `get_component_config()` que hace merge automático:
1. Lee config personalizada de `wp_apus_theme_components`
2. Si no existe → Lee defaults de `wp_apus_theme_components_defaults`
PASO 3.7: Modificar DB Manager (Agregar get_component_defaults)
Duración: 30 min
Archivo: admin/includes/class-db-manager.php
- Leer archivo completo
- Buscar método
get_component($component_name) - Copiar método y modificar para leer de tabla
_defaults - Agregar nuevo método
Código a agregar:
/**
* Get component default values from defaults table
*
* @param string $component_name
* @return array
*/
public function get_component_defaults($component_name) {
global $wpdb;
$table_name = $wpdb->prefix . 'apus_theme_components_defaults';
$results = $wpdb->get_results(
$wpdb->prepare(
"SELECT config_key, config_value, data_type
FROM $table_name
WHERE component_name = %s",
$component_name
),
ARRAY_A
);
if (empty($results)) {
return array();
}
// Convertir rows a array asociativo
$config = array();
foreach ($results as $row) {
$config[$row['config_key']] = $this->cast_value(
$row['config_value'],
$row['data_type']
);
}
return $config;
}
/**
* Cast value to correct type based on data_type
*
* @param mixed $value
* @param string $type
* @return mixed
*/
private function cast_value($value, $type) {
switch ($type) {
case 'boolean':
return (bool) $value;
case 'integer':
return (int) $value;
case 'array':
case 'json':
return json_decode($value, true);
default:
return $value;
}
}
PASO 3.8: Modificar Settings Manager (get_component_config)
Duración: 20 min
Archivo: admin/includes/class-settings-manager.php
- Buscar método
get_component_config($component_name) - Modificar para leer de tabla defaults si no hay config personalizada
Código ANTES:
public function get_component_config($component_name) {
$settings = $this->get_settings();
$defaults = $this->get_defaults(); // ← Método hardcodeado
return wp_parse_args(
$settings['components'][$component_name] ?? array(),
$defaults['components'][$component_name] ?? array()
);
}
Código DESPUÉS:
public function get_component_config($component_name) {
// 1. Intentar leer config personalizada
$user_config = $this->db_manager->get_component($component_name);
if (!empty($user_config)) {
return $user_config; // Usuario ya personalizó
}
// 2. Si no hay personalización, leer defaults de tabla
$defaults = $this->db_manager->get_component_defaults($component_name);
if (!empty($defaults)) {
return $defaults; // Usar defaults de DB
}
// 3. Error: componente sin defaults
error_log("APUS Theme: No defaults found for component: {$component_name}");
return array();
}
✅ CHECKLIST FASE 3 COMPLETA
- PASO 12 modificado (eliminado DEFAULT_CONFIG y fallbacks)
- PASO 7B creado (poblar defaults en DB)
- PASO 14 modificado (eliminado get_defaults hardcodeado)
- DB Manager modificado (agregado get_component_defaults)
- Settings Manager modificado (lee de tabla defaults)
- Todos los cambios commiteados
Estado FASE 3: ⬜ Pendiente | 🟡 En progreso | ✅ Completada
🎯 RESUMEN FINAL
Una vez completadas las 3 fases:
✅ Lo que se logró:
- Código actual limpiado (sin implementaciones incorrectas)
- Tabla
wp_apus_theme_components_defaultscreada y funcionando - Algoritmo corregido (sin defaults hardcodeados en JS/PHP)
- DB Manager y Settings Manager leen de tabla defaults
🚀 Próximos pasos:
- Ejecutar algoritmo CORREGIDO para primer componente (ej: Navbar)
- Pasos 1-13: Generar documentación
- PASO 7B: Insertar defaults en DB
- PASO 14: Implementar código real
- PASO 15-16: Testing y cierre
Última actualización: [Fecha] Estado general: ⬜ Pendiente | 🟡 En progreso | ✅ Completado