[COMPONENTE 11] Implementar Sidebar TOC con ScrollSpy custom - Issue #121
- 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>
This commit is contained in:
FrankZamora
@@ -918,3 +918,90 @@ img {
|
|||||||
.post-content a:hover {
|
.post-content a:hover {
|
||||||
color: var(--color-orange-hover);
|
color: var(--color-orange-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* === SIDEBAR TOC === */
|
||||||
|
|
||||||
|
.sidebar-sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 85px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid var(--color-neutral-100);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 12px 16px;
|
||||||
|
max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container h4 {
|
||||||
|
color: var(--color-navy-primary);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 2px solid var(--color-neutral-100);
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
list-style: none;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container li {
|
||||||
|
margin-bottom: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.3rem 0.85rem;
|
||||||
|
color: var(--color-neutral-600);
|
||||||
|
text-decoration: none;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container a:hover {
|
||||||
|
background: var(--color-neutral-50);
|
||||||
|
border-left-color: var(--color-navy-primary);
|
||||||
|
color: var(--color-navy-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container a.active {
|
||||||
|
background: var(--color-neutral-50);
|
||||||
|
border-left-color: var(--color-navy-primary);
|
||||||
|
color: var(--color-navy-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-neutral-50);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--color-neutral-600);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--color-neutral-700);
|
||||||
|
}
|
||||||
|
|||||||
@@ -265,3 +265,69 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');
|
console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');
|
||||||
|
|
||||||
|
// === SIDEBAR TOC - ScrollSpy ===
|
||||||
|
|
||||||
|
// Table of Contents - ScrollSpy
|
||||||
|
function updateActiveSection() {
|
||||||
|
const tocLinks = document.querySelectorAll('.toc-container a');
|
||||||
|
if (!tocLinks.length) return;
|
||||||
|
|
||||||
|
const navbar = document.querySelector('.navbar');
|
||||||
|
const navbarHeight = navbar ? navbar.offsetHeight : 0;
|
||||||
|
|
||||||
|
const sectionIds = Array.from(tocLinks).map(link => {
|
||||||
|
const href = link.getAttribute('href');
|
||||||
|
return href ? href.substring(1) : null;
|
||||||
|
}).filter(id => id !== null);
|
||||||
|
|
||||||
|
const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
|
||||||
|
const scrollPosition = window.scrollY + navbarHeight + 100;
|
||||||
|
|
||||||
|
let activeSection = null;
|
||||||
|
|
||||||
|
for (let i = 0; i < sections.length; i++) {
|
||||||
|
const section = sections[i];
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
|
||||||
|
if (scrollPosition >= sectionTop) {
|
||||||
|
activeSection = section.getAttribute('id');
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tocLinks.forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
const href = link.getAttribute('href');
|
||||||
|
if (href === '#' + activeSection) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll for TOC links
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.querySelectorAll('.toc-container a').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
const navbar = document.querySelector('.navbar');
|
||||||
|
const navbarHeight = navbar ? navbar.offsetHeight : 0;
|
||||||
|
const offsetTop = targetElement.offsetTop - navbarHeight - 40;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
updateActiveSection();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('scroll', updateActiveSection);
|
||||||
|
|||||||
@@ -195,7 +195,11 @@ get_header();
|
|||||||
|
|
||||||
<!-- Sidebar Column (col-lg-3) -->
|
<!-- Sidebar Column (col-lg-3) -->
|
||||||
<div class="col-lg-3">
|
<div class="col-lg-3">
|
||||||
<?php get_sidebar(); ?>
|
<div class="sidebar-sticky">
|
||||||
|
<?php get_template_part('template-parts/content', 'toc'); ?>
|
||||||
|
|
||||||
|
<!-- Aquí irá el CTA Box (componente 12) -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- .row -->
|
</div><!-- .row -->
|
||||||
|
|||||||
65
wp-content/themes/apus-theme/template-parts/content-toc.php
Normal file
65
wp-content/themes/apus-theme/template-parts/content-toc.php
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<?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);
|
||||||
Reference in New Issue
Block a user