diff --git a/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md b/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md new file mode 100644 index 00000000..81a24b4c --- /dev/null +++ b/wp-content/themes/apus-theme/ISSUE-12-COMPLETION-REPORT.md @@ -0,0 +1,550 @@ +# 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:** `