Files
roi-theme/wp-content/themes/apus-theme/inc/admin
FrankZamora d36bc0f725 Implementar Issues #17, #18, #30, #31, #33 - Optimizaciones avanzadas y contenido
Segunda ola de implementaciones masivas con agentes paralelos para funcionalidades avanzadas de SEO, accesibilidad y contenido especializado.

**Issue #17 - Imágenes responsive con srcset/WebP/AVIF:**
- inc/image-optimization.php: 8 nuevas funciones para optimización
  - Soporte WebP/AVIF con detección de servidor
  - Srcset y sizes automáticos contextuales
  - Lazy loading inteligente (excluye LCP)
  - Threshold 2560px para big images
  - Picture element con fallbacks
  - Preload de featured images
  - Calidad JPEG optimizada (85%)
  - Dimensiones explícitas (previene CLS)
- 14 filtros WordPress implementados
- Beneficios: 30-50% reducción con WebP, 50-70% con AVIF
- Core Web Vitals: Mejora LCP y CLS

**Issue #18 - Accesibilidad WCAG 2.1 AA:**
- assets/css/accessibility.css: +461 líneas
  - Focus styles visibles (3px outline)
  - Screen reader utilities
  - Touch targets ≥44px
  - High contrast mode support
  - Reduced motion support
  - Color contrast AA (4.5:1, 3:1)
- assets/js/accessibility.js: 19KB nuevo
  - Skip links con smooth scroll
  - Navegación por teclado en dropdowns
  - Arrow keys en menús WordPress
  - Modal keyboard support
  - Focus management y trap
  - ARIA live regions
  - Announcements para screen readers
- header.php: ARIA labels en navbar
- Actualizaciones JS: Respeto prefers-reduced-motion en main.js, toc.js, header.js
- Cumplimiento completo WCAG 2.1 Level AA

**Issue #30 - Tablas APU (Análisis Precios Unitarios):**
- assets/css/tables-apu.css: 560 líneas
  - Diseño sin bordes, moderno
  - Zebra striping (#f8f9fa/#ffffff)
  - Headers sticky con degradado azul
  - 4 tipos de filas: normal, section-header, subtotal, total
  - Fuente monospace para columnas monetarias
  - Responsive (scroll horizontal móvil)
  - Print styles con color-adjust: exact
- inc/apu-tables.php: 330 líneas, 6 funciones
  - apus_process_apu_tables() - Procesamiento automático
  - Shortcodes: [apu_table], [apu_row type=""]
  - apus_generate_apu_table($data) - Generación programática
  - 4 métodos de uso: data-apu, shortcode, clase manual, PHP
- docs/APU-TABLES-GUIDE.md: Guía completa de usuario
- docs/APU-TABLE-EXAMPLE.html: Ejemplo funcional
- 6 columnas: Clave, Descripción, Unidad, Cantidad, Costo, Importe
- CRÍTICO: Contenido principal del sitio de construcción

**Issue #31 - Botones de compartir en redes sociales:**
- inc/social-share.php: 127 líneas
  - apus_get_social_share_buttons() - Genera HTML
  - apus_display_social_share() - Template tag
  - 5 redes: Facebook, X/Twitter, LinkedIn, WhatsApp, Email
  - URLs nativas sin JavaScript de terceros
  - Encoding seguro, ARIA labels
- assets/css/social-share.css: 137 líneas
  - Animaciones hover (translateY, scale)
  - Colores específicos por red
  - Responsive (576px, 360px)
  - Focus styles accesibles
- single.php: Integración después del contenido
- Bootstrap Icons CDN (v1.11.3)
- Panel de opciones con configuración

**Issue #33 - Schema.org completo (5 tipos):**
- inc/schema-org.php: 468 líneas, 7 funciones
  - Organization schema con logo y redes sociales
  - WebSite schema con SearchAction
  - Article schema (posts) con autor, imagen, categorías, wordCount
  - WebPage schema (páginas) con featured image
  - BreadcrumbList schema (8 contextos diferentes)
- JSON-LD format en <head>
- Referencias cruzadas con @id
- Google Rich Results compliant
- Deshabilita schemas Rank Math/Yoast (evita duplicación)
- Locale: es-MX
- Hook: wp_head (prioridad 5)

**Archivos Modificados:**
- functions.php: Includes de nuevos módulos (schema-org, apu-tables, social-share)
- inc/enqueue-scripts.php: Enqueue de nuevos CSS/JS, Bootstrap Icons CDN
- inc/image-optimization.php: 8 funciones nuevas WebP/AVIF
- assets/css/accessibility.css: +461 líneas
- assets/js/main.js, toc.js, header.js: Reduced motion support
- single.php: Social share buttons
- header.php: ARIA labels
- inc/admin/options-api.php: Social share settings

**Archivos Creados:**
- 3 archivos PHP funcionales (apu-tables, social-share, schema-org)
- 1 archivo JavaScript (accessibility.js - 19KB)
- 3 archivos CSS (tables-apu, social-share)
- 2 archivos docs/ (APU guide y example)
- 5 reportes .md de documentación

**Estadísticas:**
- Total funciones nuevas: 30+
- Líneas de código nuevas: 2,500+
- Archivos nuevos: 13
- Archivos modificados: 10
- Mejoras de accesibilidad: WCAG 2.1 AA compliant
- Mejoras SEO: 5 schemas JSON-LD
- Mejoras performance: WebP/AVIF, lazy loading, srcset

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 17:12:03 -06:00
..

Apus Theme Options Panel

Overview

Complete theme options panel for managing all theme settings from WordPress admin.

Location

Appearance > Theme Options in WordPress admin

Files Structure

inc/admin/
├── theme-options.php           # Main admin page registration
├── options-api.php             # Settings API and sanitization
├── options-page-template.php   # HTML template for options page
└── README.md                   # This file

inc/
└── theme-options-helpers.php   # Helper functions to get options

assets/admin/
├── css/
│   └── theme-options.css       # Admin styles
└── js/
    └── theme-options.js        # Admin JavaScript

Features

General Tab

  • Site logo upload
  • Site favicon upload
  • Breadcrumbs enable/disable
  • Breadcrumb separator customization
  • Date and time format
  • Copyright text
  • Social media links (Facebook, Twitter, Instagram, LinkedIn, YouTube)

Content Tab

  • Excerpt length
  • Excerpt more text
  • Default post/page layouts
  • Archive posts per page
  • Featured image display
  • Author box display
  • Comments enable/disable for posts/pages
  • Post meta visibility
  • Tags and categories display

Performance Tab

  • Lazy loading
  • Remove emoji scripts
  • Remove embeds
  • Remove Dashicons on frontend
  • Defer JavaScript
  • Minify HTML
  • Disable Gutenberg
  • Enable/disable related posts
  • Number of posts to show
  • Taxonomy to use (category, tag, or both)
  • Section title
  • Number of columns

Advanced Tab

  • Custom CSS
  • Custom JavaScript (header)
  • Custom JavaScript (footer)

Usage

Getting Options in Templates

// Get any option with default fallback
$value = apus_get_option('option_name', 'default_value');

// Check if option is enabled (boolean)
if (apus_is_option_enabled('enable_breadcrumbs')) {
    // Do something
}

// Specific helper functions
$logo_url = apus_get_logo_url();
$excerpt_length = apus_get_excerpt_length();
$social_links = apus_get_social_links();

Available Helper Functions

All helper functions are in inc/theme-options-helpers.php:

  • apus_get_option($option_name, $default)
  • apus_is_option_enabled($option_name)
  • apus_get_breadcrumb_separator()
  • apus_show_breadcrumbs()
  • apus_get_excerpt_length()
  • apus_get_excerpt_more()
  • apus_show_related_posts()
  • apus_get_related_posts_count()
  • apus_get_related_posts_taxonomy()
  • apus_get_related_posts_title()
  • apus_is_performance_enabled($optimization)
  • apus_get_copyright_text()
  • apus_get_social_links()
  • apus_comments_enabled_for_posts()
  • apus_comments_enabled_for_pages()
  • apus_get_default_post_layout()
  • apus_get_default_page_layout()
  • apus_get_archive_posts_per_page()
  • apus_show_featured_image_single()
  • apus_show_author_box()
  • apus_get_date_format()
  • apus_get_time_format()
  • apus_get_logo_url()
  • apus_get_favicon_url()
  • apus_get_custom_css()
  • apus_get_custom_js_header()
  • apus_get_custom_js_footer()
  • apus_is_lazy_loading_enabled()
  • apus_get_all_options()
  • apus_reset_options()

Import/Export

Export Options

  1. Go to Appearance > Theme Options
  2. Click "Export Options" button
  3. A JSON file will be downloaded with all current settings

Import Options

  1. Go to Appearance > Theme Options
  2. Click "Import Options" button
  3. Paste the JSON content from your exported file
  4. Click "Import"
  5. Page will reload with imported settings

Reset to Defaults

Click "Reset to Defaults" button to restore all options to their default values. This action requires confirmation.

Sanitization

All options are sanitized before saving:

  • Text fields: sanitize_text_field()
  • URLs: esc_url_raw()
  • HTML content: wp_kses_post()
  • Integers: absint()
  • Checkboxes: Boolean conversion
  • CSS: Custom sanitization removing scripts
  • JavaScript: Custom sanitization removing PHP code

Hooks Available

Actions

  • apus_before_options_save - Before options are saved
  • apus_after_options_save - After options are saved

Filters

  • apus_theme_options - Filter all options
  • apus_default_options - Filter default options

JavaScript Events

Custom events triggered by the options panel:

  • apus:options:saved - When options are saved
  • apus:options:reset - When options are reset
  • apus:options:imported - When options are imported
  • apus:options:exported - When options are exported

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Accessibility

  • Keyboard navigation supported
  • Screen reader friendly
  • WCAG 2.1 Level AA compliant
  • Focus indicators visible

Security

  • Nonce verification on all AJAX calls
  • Capability checks (manage_options)
  • Input sanitization
  • Output escaping
  • CSRF protection

Performance

  • Lazy loading for tab content
  • Conditional script loading (only on options page)
  • Optimized AJAX requests
  • Minimal DOM manipulation

Troubleshooting

Options not saving

  1. Check WordPress user has manage_options capability
  2. Check file permissions
  3. Check for JavaScript errors in browser console
  4. Verify WordPress nonce is valid

Images not uploading

  1. Check PHP upload_max_filesize setting
  2. Check WordPress media upload permissions
  3. Check browser console for errors

Import not working

  1. Verify JSON format is valid
  2. Check for special characters in JSON
  3. Ensure JSON is from same theme version

Version History

1.0.0

  • Initial release
  • All basic options implemented
  • Import/Export functionality
  • Reset to defaults
  • Full sanitization