Files

FrankZamora 7ba9080f57 Agregar estructura completa del tema APUS con Bootstrap 5 y optimizaciones de rendimiento

Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas:
- Sistema de templates (front-page, single, archive, page, 404, search)
- Integración de Bootstrap 5.3.8 con estructura modular de assets
- Panel de opciones del tema con Customizer API
- Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance)
- Funcionalidades SEO y compatibilidad con Rank Math
- Sistema de posts relacionados y tabla de contenidos
- Badge de categorías y manejo de AdSense diferido
- Tipografías Google Fonts configurables
- Documentación completa del tema y guías de uso

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-04 09:31:47 -06:00

12 KiB

Raw Blame History

Issues #6 y #7 - Implementación Completa

Resumen de Implementación

Se han completado exitosamente los Issues #6 (Sistema de tipografías autohospedadas) y #7 (Header sticky con menú hamburguesa).

Issue #6: Sistema de Tipografías Autohospedadas

Archivos Creados

1. `assets/css/fonts.css`

Ubicación: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\assets\css\fonts.css

Características:

Define system font stacks optimizados para performance
Incluye 6 familias de fuentes:
- System UI (general content)
- Sans-serif (clean & modern)
- Serif (elegant & traditional)
- Monospace (code blocks)
- Humanist (friendly)
- Geometric (modern)
CSS custom properties para fácil customización
Sección comentada para agregar @font-face declarations personalizadas
Utilidades de tipografía (font-weight, font-size, line-height, etc.)
Optimización de font-display: swap para mejor LCP
Soporte para font smoothing

2. `inc/customizer-fonts.php`

Ubicación: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\inc\customizer-fonts.php

Características:

Panel de tipografía en el Customizer de WordPress
Toggle para alternar entre custom fonts y system fonts
Selector de estrategia font-display (auto, block, swap, fallback, optional)
Opción para preload de fuentes personalizadas
Body class automático (use-custom-fonts o use-system-fonts)
Hooks para preload de fuentes en el <head>
Funciones de sanitización seguras
Active callbacks para mostrar/ocultar opciones condicionalmente

Archivos Modificados

1. `inc/enqueue-scripts.php`

Cambios:

Agregada función apus_enqueue_fonts() con prioridad 1
Bootstrap CSS ahora depende de apus-fonts
Header CSS ahora depende de apus-fonts
Orden de carga optimizado: fonts → bootstrap → header

2. `style.css`

Cambios en :root:

Variables de tipografía expandidas:
- --font-primary, --font-secondary, --font-headings, --font-code
- --font-size-xs hasta --font-size-4xl
- --line-height-none hasta --line-height-loose
- --font-weight-light hasta --font-weight-bold
Agregadas variables para header:
- --header-height: 70px
- --header-bg: #ffffff
- --header-shadow
Agregadas variables de z-index:
- --z-header: 1000
- --z-mobile-menu: 999
- --z-overlay: 998

Cambios en headings (h1-h6):

Uso de var(--font-headings)
Uso de var(--font-weight-semibold)
Uso de var(--line-height-tight)

3. `functions.php`

Cambios:

Agregada inclusión de inc/customizer-fonts.php después de enqueue-scripts.php

Issue #7: Header Sticky con Menú Hamburguesa

Archivos Creados

1. `assets/css/header.css`

Ubicación: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\assets\css\header.css

Características:

Header Base:

Sticky positioning con position: sticky; top: 0
Shadow mejorada al hacer scroll
Transiciones suaves
Z-index controlado por variable CSS
Container con max-width 1200px

Site Branding:

Logo responsive (50px mobile, 60px desktop)
Site title con hover states
Site description estilizada
Focus states accesibles (outline 2px)

Desktop Navigation:

Display flex horizontal
Hover states con background
Current page indicator
Submenu dropdown con animaciones
Focus-within para accesibilidad
Border radius 4px en items

Mobile Menu Toggle:

Botón hamburguesa 44x44px (touch target WCAG)
Animación de 3 líneas a X
Estados hover y focus
Transform transitions suaves

Mobile Menu:

Slide-in desde la derecha
Width 280px (85% max)
Overlay con backdrop
Header fijo dentro del menu
Scroll overflow en contenido
Border left indicator en items activos

Responsive Breakpoints:

Mobile: < 768px (hamburger menu)
Tablet: 768px+ (desktop nav visible)
Desktop: 1024px+ (spacing mejorado)
Large: 1200px+ (full width)

Accesibilidad:

High contrast mode support
Prefers-reduced-motion support
Print styles
Focus visible en todos los elementos interactivos

2. `assets/js/header.js`

Ubicación: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\assets\js\header.js

Características:

Mobile Menu Toggle:

Open/close con botón hamburguesa
Close con botón X
Close al hacer click en overlay
Close al presionar Escape
Close al hacer click en link del menu
Close automático en resize a desktop
Animación de transformación del icono

ARIA Attributes:

aria-expanded en toggle button
aria-hidden en menu y overlay
aria-controls para relación button-menu
aria-label descriptivos

Body Scroll Locking:

Clase mobile-menu-open en body
Overflow hidden cuando menu activo
Restauración al cerrar

Sticky Header Behavior:

Detección de scroll
Clase scrolled después de 100px
Shadow mejorada al scrollear
Evento scroll con passive: true para performance

Smooth Scroll:

Scroll suave a anchors en la página
Offset por altura del header
Respeta prefers-reduced-motion
Update de URL hash
Focus en elemento target para accesibilidad

Keyboard Navigation:

Enter/Space abre submenus
Escape cierra submenus
Tab navigation con focus trap en mobile menu
Focus restoration al cerrar menu

Focus Trap:

Ciclo de tab dentro del mobile menu
Shift+Tab reverse
First/last element cycling

Performance:

Event listeners con debounce en resize
Passive scroll listeners
CSS transforms para animaciones (GPU accelerated)
Transition none con prefers-reduced-motion

Archivos Modificados

1. `header.php`

Estructura actualizada:

<!-- Sticky Header -->
<header id="masthead" class="site-header">
  <div class="header-inner container">

    <!-- Site Branding / Logo -->
    <div class="site-branding">
      <!-- Logo o Site Title -->
    </div>

    <!-- Desktop Navigation -->
    <nav class="main-navigation desktop-nav">
      <!-- Primary Menu -->
    </nav>

    <!-- Mobile Menu Toggle -->
    <button id="mobile-menu-toggle">
      <span class="hamburger-icon">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </span>
    </button>

  </div>
</header>

<!-- Mobile Menu Overlay -->
<div id="mobile-menu-overlay"></div>

<!-- Mobile Navigation -->
<nav id="mobile-menu">
  <div class="mobile-menu-header">
    <span class="mobile-menu-title">Menu</span>
    <button id="mobile-menu-close">&times;</button>
  </div>
  <!-- Mobile Primary Menu -->
</nav>

Mejoras implementadas:

Container class en header-inner para consistencia con Bootstrap
Desktop nav con clase desktop-nav para visibilidad responsive
Hamburger icon con 3 líneas separadas para animación
Mobile menu con header fijo
Overlay separado para backdrop
IDs únicos para JavaScript targeting
ARIA labels completos en español

2. `inc/enqueue-scripts.php`

Ya actualizado en Issue #6 con:

apus_enqueue_header() función agregada
Header CSS encolado con dependencia en fonts
Header JS encolado con defer strategy
Prioridad 10 en wp_enqueue_scripts

Características Destacadas

Performance Optimizations

System fonts por defecto: Cero network requests para fuentes
Font-display: swap: Previene FOIT (Flash of Invisible Text)
CSS Custom Properties: Fácil theming sin recompilación
Deferred JavaScript: Scripts con strategy: defer
Passive scroll listeners: Mejor scroll performance
GPU accelerated animations: CSS transforms en lugar de position
Sticky header: CSS puro, sin JavaScript positioning

Accessibility Features

WCAG AA Compliant:
- Touch targets 44x44px mínimo
- Color contrast ratios adecuados
- Focus indicators visibles (2px outline)
Keyboard Navigation:
- Tab navigation completa
- Focus trap en mobile menu
- Escape key para cerrar
- Enter/Space para activar
Screen Reader Support:
- ARIA labels descriptivos
- ARIA expanded/hidden states
- Screen reader text donde necesario
- Semantic HTML (nav, header, button)
Motor Abilities:
- Prefers-reduced-motion support
- Transitions deshabilitables
- Large touch targets

SEO Benefits

Semantic HTML5: header, nav, main tags
Proper heading hierarchy: h1 solo en homepage
Microdata ready: Schema.org compatible structure
Mobile-first: Responsive desde diseño
Fast loading: System fonts + optimized CSS/JS

Cómo Usar

Activar Custom Fonts

Ir a Apariencia → Personalizar → Typography
Activar "Use Custom Fonts"
Agregar archivos de fuentes en assets/fonts/
Descomentar @font-face declarations en fonts.css
Configurar estrategia font-display (recomendado: swap)
Activar "Preload Font Files" para mejor LCP

Personalizar Header

Logo: Ir a Apariencia → Personalizar → Identidad del sitio
Menú: Ir a Apariencia → Menús y asignar a "Primary Menu"

Colores: Modificar CSS custom properties en style.css:

--header-bg: #ffffff;
--header-shadow: 0 2px 4px rgba(0,0,0,0.1);
--color-primary: #007bff;

Agregar Smooth Scroll a Links

Los anchor links (href="#seccion") tendrán smooth scroll automático. Para deshabilitar, comentar la función setupSmoothScroll() en header.js.

Testing Checklist

Funcionalidad

Header sticky funciona al hacer scroll
Logo/site title visible y clickeable
Desktop menu visible en pantallas ≥768px
Mobile hamburger visible en pantallas <768px
Mobile menu abre/cierra correctamente
Overlay visible cuando menu abierto
Body scroll locked cuando menu abierto
Menu cierra con Escape
Menu cierra al click en overlay
Menu cierra al click en link

Accesibilidad

Navegación por teclado (Tab/Shift+Tab)
Focus visible en todos los elementos
ARIA attributes correctos
Screen reader text presente
Touch targets ≥44x44px
Prefers-reduced-motion respetado

Performance

CSS y JS se cargan con defer
System fonts por defecto (0 network requests)
Smooth scroll respeta reduced motion
No layout shifts (CLS optimizado)
Header sticky con CSS puro

Responsive

Mobile (<768px): hamburger menu
Tablet (≥768px): desktop nav
Desktop (≥1024px): spacing mejorado
Large (≥1200px): full width container

Archivos del Proyecto

Nuevos Archivos

assets/css/fonts.css          (6.1 KB)
assets/css/header.css         (11.4 KB)
assets/js/header.js           (9.3 KB)
inc/customizer-fonts.php      (5.3 KB)

Archivos Modificados

inc/enqueue-scripts.php       (modificado)
style.css                     (modificado)
header.php                    (modificado)
functions.php                 (modificado)

Próximos Pasos Recomendados

Testing en dispositivos reales: Probar en móviles y tablets
Agregar fuentes personalizadas: Si se desea, agregar archivos WOFF2
Customizar colores: Ajustar variables CSS según branding
Agregar submenu styling: Si se usan menus multinivel
Performance testing: Lighthouse audit en Chrome DevTools
Accessibility audit: Usar axe DevTools o WAVE

Soporte

Para más información sobre las implementaciones, consultar:

assets/css/fonts.css - Documentación de system fonts
assets/css/header.css - Documentación de estilos de header
assets/js/header.js - Documentación de funcionalidad JS
inc/customizer-fonts.php - Documentación de opciones del Customizer

Fecha de Implementación: 3 de Noviembre, 2025 Issues Completados: #6 y #7 Versión del Tema: 1.0.0

12 KiB Raw Blame History

Issues #6 y #7 - Implementación Completa

Resumen de Implementación

Issue #6: Sistema de Tipografías Autohospedadas

Archivos Creados

1. assets/css/fonts.css

2. inc/customizer-fonts.php

Archivos Modificados

1. inc/enqueue-scripts.php

2. style.css

3. functions.php

Issue #7: Header Sticky con Menú Hamburguesa

Archivos Creados

1. assets/css/header.css

2. assets/js/header.js

Archivos Modificados

1. header.php

2. inc/enqueue-scripts.php

Características Destacadas

Performance Optimizations

Accessibility Features

SEO Benefits

Cómo Usar

Activar Custom Fonts

Personalizar Header

Agregar Smooth Scroll a Links

Testing Checklist

Funcionalidad

Accesibilidad

Performance

Responsive

Archivos del Proyecto

Nuevos Archivos

Archivos Modificados

Próximos Pasos Recomendados

Soporte

12 KiB

Raw Blame History

1. `assets/css/fonts.css`

2. `inc/customizer-fonts.php`

1. `inc/enqueue-scripts.php`

2. `style.css`

3. `functions.php`

1. `assets/css/header.css`

2. `assets/js/header.js`

1. `header.php`

2. `inc/enqueue-scripts.php`