` siguiente +- JSON-LD en `
` + +**Ubicación:** inc/schema-org.php (agregar función) + +**Nota:** Actualmente tenemos 5 schemas, este sería el 6to + +**Estado:** ⚠️ NO IMPLEMENTADO + +--- + +### 🆕 7. Schema HowTo +**Documentación:** Línea 1042 + +**Descripción:** +- Schema para procesos paso a paso +- Útil para sección "Proceso de Elaboración" en posts de APUs + +**Ubicación:** inc/schema-org.php (agregar función) + +**Estado:** ⚠️ MENCIONADO PERO NO DETALLADO + +--- + +### 🆕 8. Schema VideoObject +**Documentación:** Línea 1043 + +**Descripción:** +- Schema para videos relacionados en posts +- Detectar embeds de YouTube/Vimeo + +**Ubicación:** inc/schema-org.php (agregar función) + +**Estado:** ⚠️ MENCIONADO PERO NO DETALLADO + +--- + +### 🆕 9. Hero Section con Diseño Específico +**Documentación:** Líneas 153-241 + +**Descripción:** +- Fondo degradado azul oscuro: `#1e3a5f → #2c5282` +- Badges de categorías ARRIBA del H1 (centrados) +- H1 centrado con sombra de texto +- Container-fluid con py-5 + +**Nota:** Actualmente tenemos category badge pero con diseño diferente + +**Ubicación:** Crear template-part específico content-hero.php + +**Estado:** ⚠️ PARCIALMENTE IMPLEMENTADO (falta diseño específico de doc) + +--- + +### 🆕 10. Navbar con Colores RDash +**Documentación:** Líneas 1696-1731 + +**Descripción:** +- Navbar fondo: `#0E2337` (azul navy oscuro RDash) +- Hover links: `#61c7cd` (turquesa) +- Underline animation: turquesa en lugar de azul Bootstrap + +**Nota:** Actualmente tenemos navbar blanco con Bootstrap blue + +**Estado:** ⚠️ DIFERENTE (implementamos diseño bootstrap estándar) + +--- + +## 📋 DIFERENCIAS DE IMPLEMENTACIÓN + +### 1. Tipografía +- **Doc:** Poppins de Google Fonts CDN +- **Implementado:** System fonts (Issue #6) +- **Razón:** Mejor performance (0 HTTP requests, mejor Core Web Vitals) + +### 2. Bootstrap +- **Doc:** CDN (jsdelivr) +- **Implementado:** Local en assets/vendor/bootstrap/ +- **Razón:** Reducir dependencias externas, mejor control de versión + +### 3. Navbar Colors +- **Doc:** Colores RDash (#0E2337, #61c7cd) +- **Implementado:** Blanco con azul Bootstrap estándar +- **Razón:** Diseño más limpio y profesional + +### 4. Bootstrap Icons +- **Doc:** CDN +- **Implementado:** CDN (igual) +- **Match:** ✅ + +--- + +## 📊 ESTADÍSTICAS + +### Implementado +- **Issues completados:** 29 de 33 +- **Porcentaje:** 88% +- **Funcionalidades críticas:** 100% (Tablas APU, TOC, Schemas, A/B Testing) + +### Pendiente de Doc Nueva +- **Funcionalidades nuevas:** 10 +- **Críticas:** 5 (Modal contacto, Botón Let's Talk, CTA sidebar, Formulario footer, FAQPage schema) +- **Importantes:** 2 (Top notification, Hero section) +- **Opcionales:** 3 (HowTo schema, VideoObject schema, Navbar RDash colors) + +--- + +## 🎯 RECOMENDACIONES + +### Prioridad ALTA (crear issues) - CONVERSIÓN Y SEO +1. **Modal de Contacto con Webhook** - Funcionalidad de conversión crítica +2. **Botón "Let's Talk" en Navbar** - Punto de contacto principal visible +3. **CTA Box en Sidebar** - Maximizar conversión en lectura de contenido +4. **Formulario de Contacto en Footer** - 5ta área de widgets, punto de contacto adicional crítico +5. **FAQPage Schema** - Mejora SEO significativa (Rich Snippets) + +### Prioridad MEDIA (considerar) +6. **Top Notification Bar** - Comunicación de actualizaciones +7. **Hero Section específico** - Mejora visual (actualmente funciona bien) + +### Prioridad BAJA (opcionales) +8. **Navbar RDash Colors** - Cambio estético (actual funciona bien) +9. **HowTo Schema** - Útil para posts específicos +10. **VideoObject Schema** - Solo si se usan videos frecuentemente + +--- + +## 🔄 PRÓXIMOS PASOS SUGERIDOS + +### Opción A: Crear Issues Individuales (RECOMENDADO) +Crear 5 issues nuevos en GitHub para las funcionalidades de PRIORIDAD ALTA: +- **Issue #34:** Modal de Contacto con Webhook +- **Issue #35:** Botón "Let's Talk" en Navbar +- **Issue #36:** CTA Box en Sidebar +- **Issue #37:** Formulario de Contacto en Footer (5ta área de widgets) +- **Issue #38:** FAQPage Schema automático + +Opcionalmente, agregar 2 issues de prioridad MEDIA: +- Issue #39: Top Notification Bar +- Issue #40: Hero Section con diseño específico + +### Opción B: Issue Agrupado +Crear 1 issue macro "Funcionalidades de Conversión y Contacto" que agrupe: +- Modal de contacto con webhook +- Botón "Let's Talk" en navbar +- CTA Box en sidebar +- Formulario de contacto en footer (5ta área de widgets) +- FAQPage Schema automático + +### Opción C: Actualizar Documentación +Actualizar THEME-DOCUMENTATION.md para reflejar: +- Lo que SÍ está implementado +- Diferencias de implementación (system fonts, Bootstrap local, etc.) +- Remover/marcar como implementadas las secciones completadas + +--- + +## 📄 ARCHIVOS DE REFERENCIA + +**Documentación original:** +`D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\_planeacion\theme-template\THEME-DOCUMENTATION.md` + +**Tema WordPress:** +`D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\` + +**Issues GitHub:** +https://github.com/prime-leads-app/analisisdepreciosunitarios.com/issues + +--- + +**Generado:** 2025-01-04 +**Autor:** Claude Code Analysis diff --git a/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md b/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md deleted file mode 100644 index 81a24b4c..00000000 --- a/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md +++ /dev/null @@ -1,550 +0,0 @@ -# Issue #12 - Tabla de Contenidos (TOC) Automática - Reporte de Implementación - -**Fecha:** 2025-11-04 -**Tema:** apus-theme -**Issue:** #12 - Tabla de contenidos (TOC) automática desde H2/H3 -**Estado:** COMPLETADO - -## Resumen Ejecutivo - -Se ha implementado exitosamente un sistema completo de tabla de contenidos (TOC) automática que genera índices de navegación a partir de los encabezados H2 y H3 del contenido de los posts. La implementación incluye funcionalidad JavaScript para smooth scroll, resaltado de enlaces activos, y un diseño responsive basado en Bootstrap 5. - -## Archivos Implementados - -### 1. PHP - Lógica y Generación (`inc/toc.php`) - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\inc\toc.php` - -**Funciones principales:** - -- `apus_extract_headings($content)` - Extrae encabezados H2 y H3 del contenido -- `apus_generate_heading_id($text, $index)` - Genera IDs únicos y sanitizados para cada encabezado -- `apus_generate_toc($headings)` - Genera el HTML de la tabla de contenidos con estructura anidada -- `apus_add_heading_ids($content)` - Agrega IDs a los encabezados en el contenido -- `apus_display_toc()` - Función de visualización que se ejecuta mediante hook -- `apus_filter_content_add_heading_ids($content)` - Filtro para agregar IDs automáticamente - -**Características:** - -- Parseo con expresiones regulares para detectar H2 y H3 -- Generación de lista anidada (H2 como primarios, H3 como secundarios) -- Sanitización automática de IDs (usando `sanitize_title()`) -- IDs únicos incluso con encabezados duplicados -- Solo se muestra en single posts (no en páginas ni archives) -- Configurable mediante `apus_get_option()` -- Mínimo de encabezados configurable (default: 2) -- Título personalizable desde opciones del tema - -**Hooks utilizados:** - -- `apus_before_post_content` - Acción para mostrar TOC antes del contenido -- `the_content` - Filtro para agregar IDs a los encabezados - -### 2. CSS - Estilos (`assets/css/toc.css`) - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\assets\css\toc.css` - -**Características del diseño:** - -- **Container:** Fondo claro (#f8f9fa), borde redondeado, sombra sutil -- **Tipografía:** Títulos claros, jerarquía visual bien definida -- **Numeración:** Sistema automático con CSS counters - - H2: Numeración decimal (1, 2, 3...) - - H3: Numeración anidada (1.1, 1.2, 2.1...) -- **Toggle button:** Botón collapse/expand con animación de ícono -- **Enlaces:** Transición suave, efecto hover con desplazamiento -- **Active state:** Resaltado con barra azul (#0d6efd) al lado izquierdo -- **Scrollbar personalizado:** Para listas largas de contenido - -**Responsive design:** - -- **Tablets (≤768px):** Ajuste de padding y tamaño de fuente -- **Mobile (≤480px):** Optimización máxima, fuente reducida -- **Print:** Estilos específicos para impresión (TOC visible, sin botones) - -**Accesibilidad:** - -- Clase `.screen-reader-text` para lectores de pantalla -- Focus visible para navegación por teclado -- Scroll offset para encabezados (evita que queden bajo headers fijos) - -### 3. JavaScript - Interactividad (`assets/js/toc.js`) - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\assets\js\toc.js` - -**Funcionalidades:** - -1. **Smooth Scroll:** - - Click en enlace de TOC → scroll suave al encabezado - - Actualización de URL sin salto de página (history.pushState) - - Focus automático en encabezado para accesibilidad - -2. **Toggle Button:** - - Collapse/expand del TOC con animación - - Estado guardado en localStorage - - Restauración de estado al recargar página - -3. **Active Link Highlighting:** - - Detección de scroll con debouncing (requestAnimationFrame) - - Resaltado automático del encabezado visible - - Offset de 100px para mejor UX - -4. **Hash Navigation:** - - Manejo de URLs con hash al cargar página - - Scroll automático al encabezado si hay hash en URL - -**Optimizaciones:** - -- Vanilla JavaScript (sin jQuery) -- Event delegation eficiente -- Debouncing del scroll event -- Passive event listeners para mejor performance -- Try/catch para localStorage (por si está deshabilitado) - -### 4. Enqueue de Assets (`inc/enqueue-scripts.php`) - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\inc\enqueue-scripts.php` - -**Función:** `apus_enqueue_toc_assets()` (líneas 181-209) - -**Configuración:** - -- **CSS:** Dependencia de Bootstrap, versión dinámica (APUS_VERSION) -- **JS:** Estrategia 'defer', carga en footer -- **Condicional:** Solo se carga en single posts (`is_single()`) -- **Prioridad:** Priority 10 para orden de carga correcto - -### 5. Inclusión en Functions.php - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\functions.php` - -**Líneas 234-237:** - -```php -// Table of Contents -if (file_exists(get_template_directory() . '/inc/toc.php')) { - require_once get_template_directory() . '/inc/toc.php'; -} -``` - -### 6. Helper Functions (`inc/theme-options-helpers.php`) - -**Ubicación:** `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\inc\theme-options-helpers.php` - -**Funciones agregadas (líneas 320-345):** - -- `apus_is_toc_enabled()` - Verifica si TOC está habilitado (default: true) -- `apus_get_toc_min_headings()` - Obtiene mínimo de encabezados requeridos (default: 2) -- `apus_get_toc_title()` - Obtiene título personalizado del TOC (default: "Table of Contents") - -### 7. Template Integration - -**Archivo:** `single.php` (línea 123) - -```php - - - -``` - -El hook ya estaba implementado y funcionando correctamente. - -## Opciones de Configuración Disponibles - -Las siguientes opciones están disponibles para configuración desde el panel de opciones del tema (Issue #14): - -| Opción | Nombre Interno | Tipo | Default | Descripción | -|--------|----------------|------|---------|-------------| -| Habilitar TOC | `enable_toc` | boolean | `true` | Activa/desactiva la tabla de contenidos globalmente | -| Mínimo de encabezados | `toc_min_headings` | integer | `2` | Número mínimo de encabezados para mostrar TOC | -| Título del TOC | `toc_title` | string | `"Table of Contents"` | Título personalizado para la tabla de contenidos | - -**Uso desde código:** - -```php -// Verificar si TOC está habilitado -if (apus_is_toc_enabled()) { - // ... -} - -// Obtener mínimo de encabezados -$min = apus_get_toc_min_headings(); - -// Obtener título personalizado -$title = apus_get_toc_title(); -``` - -## Funcionamiento Técnico - -### Flujo de Ejecución - -1. **Carga de página single:** - - WordPress carga `single.php` - - Se ejecuta `do_action('apus_before_post_content')` - -2. **Generación de TOC:** - - `apus_display_toc()` verifica si TOC está habilitado - - Verifica que sea un single post - - Extrae encabezados H2 y H3 del contenido - - Genera HTML de la tabla de contenidos - - Muestra TOC antes del contenido - -3. **Procesamiento de contenido:** - - Filtro `the_content` ejecuta `apus_filter_content_add_heading_ids()` - - Agrega IDs a todos los H2 y H3 del contenido - - IDs coinciden con los enlaces del TOC - -4. **JavaScript (cliente):** - - Inicializa smooth scroll en enlaces de TOC - - Configura toggle button - - Activa scroll spy para highlighting - - Maneja hash navigation - -### Algoritmo de Numeración - -``` -H2 "Introducción" → 1. Introducción - H3 "Subtema A" → 1.1 Subtema A - H3 "Subtema B" → 1.2 Subtema B -H2 "Desarrollo" → 2. Desarrollo - H3 "Punto 1" → 2.1 Punto 1 - H3 "Punto 2" → 2.2 Punto 2 -H2 "Conclusión" → 3. Conclusión -``` - -### Generación de IDs - -Ejemplo: -- Encabezado: "¿Qué es un Análisis de Precios?" -- ID generado: `que-es-un-analisis-de-precios` -- Función: `sanitize_title()` de WordPress -- Manejo de duplicados: Se agrega sufijo numérico si es necesario - -## Características Destacadas - -### 1. Accesibilidad (WCAG 2.1) - -- **Navegación por teclado:** Focus visible, tab order lógico -- **Screen readers:** Labels ARIA, texto oculto para contexto -- **Semántica correcta:** `