c5ce5eb06d
- CREAR: template-parts/content-toc.php
* Función PHP apu_generate_toc() para generar TOC automáticamente
* Regex para buscar H2 con atributo ID
* Solo se muestra en is_single()
- MODIFICAR: single.php (sidebar)
* Agregar div.sidebar-sticky wrapper
* Integrar get_template_part('template-parts/content', 'toc')
* Preparar espacio para CTA Box (componente 12)
- MODIFICAR: style.css (+87 líneas)
* 9 selectores CSS + 4 pseudo-elementos scrollbar
* Sticky positioning (top: 85px)
* Max-height calculado con calc()
* Scroll interno con overflow-y: auto
* Min-height: 0 (crítico para scroll en flexbox)
* Border-left indicator (navy, NO naranja)
* Scrollbar personalizado 6px (solo Webkit)
- MODIFICAR: main.js (+66 líneas)
* Función updateActiveSection() para ScrollSpy
* Algoritmo SIMPLE: verifica si pasaste el top
* Offset scroll: navbarHeight + 100
* Smooth scroll: navbarHeight + 40
* Selector .toc-container a (NO .toc-link)
* NO tiene auto-scroll del TOC
* NO actualiza URL con history.pushState()
Características:
✅ Generación automática desde H2 con ID
✅ ScrollSpy custom (JavaScript vanilla, NO Bootstrap)
✅ Sticky positioning con flexbox
✅ Scroll interno solo en lista
✅ Border-left indicator activo
✅ Scrollbar delgado personalizado
Selectores REALES usados:
- .toc-container a (NO .toc-link)
- .toc-container h4 (NO .toc-title)
- .toc-container li (NO .toc-list li)
🎨 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.7 KiB
PHP
66 lines
1.7 KiB
PHP
<?php
|
|
/**
|
|
* Template Part: Table of Contents (TOC)
|
|
*
|
|
* Genera automáticamente TOC desde los H2 del post
|
|
* Usa JavaScript custom para ScrollSpy
|
|
*
|
|
* @package APUs_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
// Solo mostrar TOC si estamos en single post
|
|
if (!is_single()) {
|
|
return;
|
|
}
|
|
|
|
/**
|
|
* Función: Generar TOC desde el contenido del post
|
|
*
|
|
* Busca todos los H2 que tengan ID
|
|
* Retorna HTML de la tabla de contenidos
|
|
*/
|
|
function apu_generate_toc($content) {
|
|
// Buscar todos los H2 con ID en el contenido
|
|
// Regex: <h2[^>]*id=["']([^"']*) ["'][^>]*>(.*?)</h2>
|
|
preg_match_all('/<h2[^>]*id=["\']([^"\']*)["\'][^>]*>(.*?)<\/h2>/i', $content, $matches);
|
|
|
|
// Si no hay H2 con ID, no mostrar TOC
|
|
if (empty($matches[1])) {
|
|
return '';
|
|
}
|
|
|
|
// Iniciar construcción del TOC
|
|
$toc = '<div class="toc-container">';
|
|
$toc .= '<h4 class="toc-title">Tabla de Contenido</h4>';
|
|
$toc .= '<ol class="list-unstyled toc-list">';
|
|
|
|
// Iterar sobre cada H2 encontrado
|
|
foreach ($matches[1] as $index => $id) {
|
|
// Limpiar el título (eliminar tags HTML internos)
|
|
$title = strip_tags($matches[2][$index]);
|
|
|
|
// Crear el elemento de la lista
|
|
$toc .= sprintf(
|
|
'<li><a href="#%s" class="toc-link">%s</a></li>',
|
|
esc_attr($id),
|
|
esc_html($title)
|
|
);
|
|
}
|
|
|
|
$toc .= '</ol>';
|
|
$toc .= '</div>';
|
|
|
|
return $toc;
|
|
}
|
|
|
|
// Obtener el contenido del post actual
|
|
global $post;
|
|
$post_content = $post->post_content;
|
|
|
|
// Aplicar filtros de WordPress al contenido (shortcodes, etc.)
|
|
$post_content = apply_filters('the_content', $post_content);
|
|
|
|
// Generar y mostrar el TOC
|
|
echo apu_generate_toc($post_content);
|