Completar eliminación de archivos .md y actualizar referencias
- Eliminar archivos .md que faltaban en el commit anterior - Actualizar referencias en single.php e index.php 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -1,682 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
Todos los cambios notables en este proyecto serán documentados en este archivo.
|
||||
|
||||
El formato se basa en [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
y este proyecto adhiere a [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.0.0] - 2024-11-03
|
||||
|
||||
### Lanzamiento Inicial
|
||||
|
||||
Primera versión estable del tema Apus, diseñado específicamente para el proyecto de Análisis de Precios Unitarios. Tema WordPress profesional, optimizado para rendimiento, SEO y accesibilidad.
|
||||
|
||||
---
|
||||
|
||||
## Features Implementadas por Issue
|
||||
|
||||
### Issue #1: Setup inicial del tema
|
||||
#### Core del Tema
|
||||
- **functions.php principal** con configuración modular y bien organizada
|
||||
- **style.css** con metadata completa del tema
|
||||
- Sistema de versionado (APUS_VERSION 1.0.0)
|
||||
- Arquitectura modular con archivos inc/ organizados
|
||||
- WordPress Coding Standards compliant
|
||||
- Sin dependencias de jQuery
|
||||
|
||||
#### Theme Support Básico
|
||||
- `add_theme_support('title-tag')` - Títulos dinámicos
|
||||
- `add_theme_support('post-thumbnails')` - Imágenes destacadas
|
||||
- `add_theme_support('html5')` - Markup HTML5 semántico
|
||||
- `add_theme_support('automatic-feed-links')` - RSS feeds
|
||||
- `add_theme_support('custom-logo')` - Logo personalizable
|
||||
- `add_theme_support('customize-selective-refresh-widgets')`
|
||||
|
||||
#### Tamaños de Imagen Personalizados
|
||||
- `apus-thumbnail`: 400x300px (crop)
|
||||
- `apus-medium`: 800x600px (crop)
|
||||
- `apus-large`: 1200x900px (crop)
|
||||
- `apus-featured-large`: 1200x600px (crop)
|
||||
- `apus-featured-medium`: 800x400px (crop)
|
||||
|
||||
---
|
||||
|
||||
### Issue #2: Optimización de rendimiento básica
|
||||
#### Performance Core
|
||||
- **Resource Hints** implementados:
|
||||
- DNS prefetch para recursos externos
|
||||
- Preconnect para APIs y CDNs
|
||||
- Preload para recursos críticos
|
||||
- **Lazy loading nativo** para imágenes e iframes
|
||||
- **Defer de scripts** no críticos
|
||||
- **Asset optimization** con versionado y cache busting
|
||||
- **inc/performance.php** - Módulo de optimizaciones
|
||||
|
||||
#### Enqueue Optimizado
|
||||
- **inc/enqueue-scripts.php** - Sistema modular de carga de assets
|
||||
- Bootstrap 5.3.0 enqueued correctamente
|
||||
- CSS y JS con versiones para cache
|
||||
- Print styles separados
|
||||
- Dependencias bien definidas
|
||||
|
||||
---
|
||||
|
||||
### Issue #3: SEO y Accesibilidad
|
||||
#### SEO Básico
|
||||
- **HTML5 semántico** en todos los templates
|
||||
- **No meta tags duplicados** - Compatible con Rank Math/Yoast
|
||||
- Canonical URLs automáticas
|
||||
- Open Graph ready
|
||||
- Schema.org markup preparado
|
||||
- **inc/seo.php** - Funciones SEO
|
||||
|
||||
#### Accesibilidad WCAG 2.1 AA
|
||||
- **Skip-to-content link** visible en focus
|
||||
- **ARIA labels** en navegación y widgets
|
||||
- **Screen reader text** para elementos visuales
|
||||
- **role attributes** semánticos (nav, main, article, aside, etc.)
|
||||
- **Keyboard navigation** completamente funcional
|
||||
- **Focus states** visibles en todos los elementos interactivos
|
||||
- **Contrastes de color** mínimo 4.5:1
|
||||
- **assets/css/accessibility.css** - Estilos dedicados
|
||||
|
||||
---
|
||||
|
||||
### Issue #4: Header y navegación
|
||||
#### Header Profesional
|
||||
- **header.php** completo y optimizado
|
||||
- Header sticky con transición suave
|
||||
- Skip-to-content link
|
||||
- Logo personalizable via Customizer
|
||||
- Navegación responsive con ARIA labels
|
||||
- **assets/css/header.css** - Estilos del header
|
||||
- **assets/js/header.js** - JavaScript modularizado
|
||||
|
||||
#### Menú Responsive
|
||||
- Hamburger menu para mobile
|
||||
- Smooth animations
|
||||
- Toggle de menú mobile
|
||||
- Búsqueda integrada
|
||||
- Soporte para submenús
|
||||
|
||||
---
|
||||
|
||||
### Issue #5: Footer
|
||||
#### Footer de 4 Columnas
|
||||
- **footer.php** profesional
|
||||
- 4 áreas de widgets configurables
|
||||
- Menú footer (1 nivel)
|
||||
- Copyright dinámico
|
||||
- Grid responsive (adapta a mobile)
|
||||
- **assets/css/footer.css** - Estilos dedicados
|
||||
- Links de privacidad y términos
|
||||
|
||||
---
|
||||
|
||||
### Issue #6: Sidebar y Widgets
|
||||
#### Sistema de Widgets
|
||||
- **5 áreas de widgets registradas**:
|
||||
- Primary Sidebar
|
||||
- Footer Column 1
|
||||
- Footer Column 2
|
||||
- Footer Column 3
|
||||
- Footer Column 4
|
||||
- **sidebar.php** con área de widgets
|
||||
- Sticky sidebar en desktop
|
||||
- Se oculta en mobile
|
||||
- Widget-ready con clases Bootstrap
|
||||
|
||||
---
|
||||
|
||||
### Issue #7: Single Post Template
|
||||
#### Template de Post Optimizado
|
||||
- **single.php** completo
|
||||
- Featured image con lazy loading
|
||||
- **Categorías con badges de colores** (inc/category-badge.php)
|
||||
- **Meta información completa**:
|
||||
- Fecha de publicación
|
||||
- Fecha de última actualización
|
||||
- Autor con link
|
||||
- **Tiempo de lectura estimado**
|
||||
- Tags visuales
|
||||
- Navegación entre posts (anterior/siguiente)
|
||||
- Breadcrumbs ready
|
||||
- Schema markup para Article
|
||||
- Sistema de comentarios integrado
|
||||
- **inc/featured-image.php** - Gestión de imágenes destacadas
|
||||
|
||||
---
|
||||
|
||||
### Issue #8: Templates básicos
|
||||
#### Templates Principales
|
||||
- **index.php** - Template principal con loop
|
||||
- **page.php** - Template de páginas con featured images
|
||||
- **front-page.php** - Página de inicio personalizada
|
||||
- **Template Parts**:
|
||||
- template-parts/content.php - Contenido de posts
|
||||
- template-parts/content-none.php - Sin resultados
|
||||
|
||||
#### CSS Modular
|
||||
- **assets/css/theme.css** - Estilos principales
|
||||
- **assets/css/animations.css** - Transiciones y animaciones
|
||||
- **assets/css/responsive.css** - Media queries
|
||||
- **assets/css/utilities.css** - Clases de utilidad
|
||||
|
||||
---
|
||||
|
||||
### Issue #9: Carga condicional de AdSense
|
||||
#### AdSense Delay Load
|
||||
- **inc/adsense-delay.php** - Módulo de carga diferida
|
||||
- **assets/js/adsense-loader.js** - Script optimizado
|
||||
- Carga AdSense después de interacción del usuario
|
||||
- Mejora LCP (Largest Contentful Paint)
|
||||
- Configuración via Theme Options
|
||||
- No afecta la experiencia del usuario
|
||||
- Compatible con Auto Ads
|
||||
|
||||
---
|
||||
|
||||
### Issue #10: Archive Templates
|
||||
#### Templates de Archivos
|
||||
- **archive.php** optimizado
|
||||
- Títulos dinámicos según tipo:
|
||||
- Categorías
|
||||
- Tags
|
||||
- Fechas
|
||||
- Autores
|
||||
- Descripciones de categorías/tags
|
||||
- Grid de posts con thumbnails
|
||||
- Excerpts automáticos
|
||||
- Read more links estilizados
|
||||
- Paginación profesional
|
||||
- Meta info en cada post
|
||||
- Contador de posts
|
||||
|
||||
---
|
||||
|
||||
### Issue #11: Optimización de imágenes
|
||||
#### Image Optimization Module
|
||||
- **inc/image-optimization.php** - Módulo completo
|
||||
- Conversión automática a WebP
|
||||
- Lazy loading condicional
|
||||
- Compression inteligente
|
||||
- Generación de srcset responsive
|
||||
- Fallback a formatos originales
|
||||
- Compatible con plugins de optimización
|
||||
- Configuración via Theme Options
|
||||
|
||||
---
|
||||
|
||||
### Issue #12: Sistema de fuentes
|
||||
#### Font Management System
|
||||
- **inc/customizer-fonts.php** - Sistema completo
|
||||
- **assets/css/fonts.css** - Estilos de fuentes
|
||||
- **Opciones de fuentes**:
|
||||
- System Fonts (mejor rendimiento)
|
||||
- Google Fonts
|
||||
- Bunny Fonts (GDPR-compliant)
|
||||
- Configuración separada:
|
||||
- Font family para headings
|
||||
- Font family para body text
|
||||
- **font-display: swap** para mejor rendimiento
|
||||
- Preconnect automático a CDN de fuentes
|
||||
- Customizer integration
|
||||
|
||||
---
|
||||
|
||||
### Issue #13: Página 404
|
||||
#### Error 404 Profesional
|
||||
- **404.php** completo y útil
|
||||
- Mensaje claro de error
|
||||
- Sugerencias de navegación
|
||||
- Lista de posts recientes
|
||||
- Lista de categorías con conteo
|
||||
- Formulario de búsqueda integrado
|
||||
- Links útiles del sitio
|
||||
- Diseño amigable y profesional
|
||||
- SEO-friendly (noindex automático)
|
||||
|
||||
---
|
||||
|
||||
### Issue #14: Resultados de búsqueda
|
||||
#### Search Results Optimizado
|
||||
- **search.php** profesional
|
||||
- Contador de resultados encontrados
|
||||
- Highlight de términos buscados (preparado)
|
||||
- Grid de resultados con thumbnails
|
||||
- Excerpts con contexto
|
||||
- Mensaje cuando no hay resultados
|
||||
- Sugerencias alternativas
|
||||
- Paginación de resultados
|
||||
- Meta info en cada resultado
|
||||
|
||||
---
|
||||
|
||||
### Issue #15: Panel de opciones del tema
|
||||
#### Theme Options Panel
|
||||
- **inc/admin/theme-options.php** - Configuración del panel
|
||||
- **inc/admin/options-api.php** - API de opciones
|
||||
- **inc/admin/options-page-template.php** - Template del panel
|
||||
- **inc/theme-options-helpers.php** - Funciones helper
|
||||
- **assets/admin/css/theme-options.css** - Estilos del admin
|
||||
- **assets/admin/js/theme-options.js** - JavaScript del panel
|
||||
|
||||
#### 6 Tabs Organizadas
|
||||
##### 1. General Settings
|
||||
- Logo upload con media uploader
|
||||
- Favicon configuration
|
||||
- Site tagline personalizado
|
||||
- Copyright text dinámico
|
||||
- Timezone settings
|
||||
|
||||
##### 2. Performance
|
||||
- Lazy loading toggle
|
||||
- Image optimization settings
|
||||
- CSS/JS minification
|
||||
- Cache configuration
|
||||
- WebP conversion toggle
|
||||
- AdSense delay load
|
||||
- Resource hints configuration
|
||||
|
||||
##### 3. SEO Settings
|
||||
- Meta description default
|
||||
- Social media handles
|
||||
- Open Graph defaults
|
||||
- Schema.org settings
|
||||
- Breadcrumbs enable/disable
|
||||
- Canonical URLs configuration
|
||||
|
||||
##### 4. Typography
|
||||
- Google Fonts integration
|
||||
- Bunny Fonts (GDPR-compliant)
|
||||
- System fonts option
|
||||
- Font family para headings
|
||||
- Font family para body
|
||||
- Font sizes customization
|
||||
- Line heights
|
||||
- Font weights
|
||||
|
||||
##### 5. Content Settings
|
||||
- Table of Contents (TOC) settings
|
||||
- Related Posts configuration
|
||||
- Excerpt length
|
||||
- Read more text
|
||||
- Featured images toggle
|
||||
- Author bio display
|
||||
|
||||
##### 6. Advanced
|
||||
- Custom CSS editor
|
||||
- Custom JavaScript
|
||||
- Header scripts injection
|
||||
- Footer scripts injection
|
||||
- Google Analytics ID
|
||||
- Facebook Pixel
|
||||
- Custom tracking codes
|
||||
|
||||
#### Características del Panel
|
||||
- Save settings con AJAX
|
||||
- Reset to defaults con confirmación
|
||||
- Import/Export settings (preparado)
|
||||
- Visual feedback de guardado
|
||||
- Validación de campos
|
||||
- Color pickers integrados
|
||||
- Media uploader de WordPress
|
||||
- Code editors con syntax highlighting
|
||||
- Help tooltips
|
||||
|
||||
---
|
||||
|
||||
### Issue #16: Sistema de comentarios
|
||||
#### Comments System
|
||||
- **comments.php** completo
|
||||
- Formulario responsive
|
||||
- Campos optimizados con HTML5
|
||||
- Validación incorporada
|
||||
- Respuestas anidadas (threaded comments)
|
||||
- Avatar support
|
||||
- Moderación de comentarios
|
||||
- Anti-spam ready
|
||||
- Contador de comentarios
|
||||
- Paginación de comentarios
|
||||
- Estilos Bootstrap integrados
|
||||
|
||||
---
|
||||
|
||||
### Issue #17: Internacionalización
|
||||
#### Translation Ready
|
||||
- Text Domain: apus-theme configurado
|
||||
- Domain Path: /languages
|
||||
- Locale español México (es_MX) por defecto
|
||||
- Formato de fecha: d/m/Y
|
||||
- POT file ready para traducciones
|
||||
- Todas las strings traducibles
|
||||
- Soporte para traducciones de plugins
|
||||
- Compatible con WPML/Polylang
|
||||
|
||||
---
|
||||
|
||||
### Issue #18: Table of Contents (TOC)
|
||||
#### TOC System Completo
|
||||
- **inc/toc.php** - Módulo completo
|
||||
- **assets/css/toc.css** - Estilos dedicados
|
||||
- **assets/js/toc.js** - JavaScript interactivo
|
||||
- Generación automática para posts
|
||||
- Sticky sidebar con scroll
|
||||
- Configuración via Theme Options:
|
||||
- Enable/disable globalmente
|
||||
- Posición (arriba del contenido / sidebar)
|
||||
- Mínimo de headings requeridos
|
||||
- Profundidad de headings (H2-H6)
|
||||
- Título personalizable
|
||||
- Smooth scroll a secciones
|
||||
- Indicador de progreso visual
|
||||
- Responsive (se adapta a mobile)
|
||||
- IDs únicos en headings
|
||||
|
||||
---
|
||||
|
||||
### Issue #19: Posts Relacionados
|
||||
#### Related Posts System
|
||||
- **inc/related-posts.php** - Módulo inteligente
|
||||
- **inc/admin/related-posts-options.php** - Opciones dedicadas
|
||||
- **assets/css/related-posts.css** - Estilos profesionales
|
||||
- Basado en categorías compartidas
|
||||
- Configuración completa via Theme Options:
|
||||
- Enable/disable
|
||||
- Número de posts (2-12)
|
||||
- Título personalizable
|
||||
- Orden: fecha, aleatorio, más comentados
|
||||
- Mostrar thumbnails
|
||||
- Mostrar excerpt
|
||||
- Mostrar fecha
|
||||
- Grid responsive (2-4 columnas según viewport)
|
||||
- Thumbnails optimizados
|
||||
- Cache de queries para rendimiento
|
||||
- Fallback cuando no hay relacionados
|
||||
|
||||
---
|
||||
|
||||
### Issue #20: Documentación completa
|
||||
#### Documentación Profesional
|
||||
- **README.md** - Documentación principal completa
|
||||
- **CHANGELOG.md** - Este archivo, historial completo
|
||||
- **CREDITS.md** - Créditos y licencias
|
||||
- **LICENSE** - GPL v2 verificado
|
||||
- **Carpeta docs/**:
|
||||
- 01-initial-setup.md - Guía de configuración inicial
|
||||
- 02-theme-options.md - Guía del panel de opciones
|
||||
- 03-performance-seo.md - Performance y SEO
|
||||
|
||||
---
|
||||
|
||||
## Resumen de Archivos y Módulos
|
||||
|
||||
### Templates PHP (11 archivos)
|
||||
- 404.php
|
||||
- archive.php
|
||||
- comments.php
|
||||
- footer.php
|
||||
- front-page.php
|
||||
- functions.php
|
||||
- header.php
|
||||
- index.php
|
||||
- page.php
|
||||
- search.php
|
||||
- sidebar.php
|
||||
- single.php
|
||||
|
||||
### Template Parts (2 archivos)
|
||||
- template-parts/content.php
|
||||
- template-parts/content-none.php
|
||||
|
||||
### Inc Files (15 archivos)
|
||||
- inc/adsense-delay.php
|
||||
- inc/category-badge.php
|
||||
- inc/customizer-fonts.php
|
||||
- inc/enqueue-scripts.php
|
||||
- inc/featured-image.php
|
||||
- inc/image-optimization.php
|
||||
- inc/performance.php
|
||||
- inc/related-posts.php
|
||||
- inc/seo.php
|
||||
- inc/template-functions.php
|
||||
- inc/template-tags.php
|
||||
- inc/theme-options-helpers.php
|
||||
- inc/toc.php
|
||||
|
||||
### Admin Files (5 archivos)
|
||||
- inc/admin/options-api.php
|
||||
- inc/admin/options-page-template.php
|
||||
- inc/admin/related-posts-options.php
|
||||
- inc/admin/theme-options.php
|
||||
- inc/admin/USAGE-EXAMPLES.php
|
||||
|
||||
### CSS Files (11 archivos)
|
||||
- assets/css/accessibility.css
|
||||
- assets/css/animations.css
|
||||
- assets/css/bootstrap.min.css (5.3.0)
|
||||
- assets/css/fonts.css
|
||||
- assets/css/footer.css
|
||||
- assets/css/header.css
|
||||
- assets/css/print.css
|
||||
- assets/css/related-posts.css
|
||||
- assets/css/responsive.css
|
||||
- assets/css/theme.css
|
||||
- assets/css/toc.css
|
||||
- assets/css/utilities.css
|
||||
- assets/admin/css/theme-options.css
|
||||
|
||||
### JavaScript Files (5 archivos)
|
||||
- assets/js/adsense-loader.js
|
||||
- assets/js/bootstrap.bundle.min.js (5.3.0)
|
||||
- assets/js/header.js
|
||||
- assets/js/toc.js
|
||||
- assets/admin/js/theme-options.js
|
||||
|
||||
### Documentación (7 archivos)
|
||||
- README.md
|
||||
- CHANGELOG.md
|
||||
- CREDITS.md
|
||||
- LICENSE
|
||||
- docs/01-initial-setup.md
|
||||
- docs/02-theme-options.md
|
||||
- docs/03-performance-seo.md
|
||||
|
||||
---
|
||||
|
||||
## Características Técnicas Completas
|
||||
|
||||
### Rendimiento
|
||||
- 0 jQuery dependencies
|
||||
- Lazy loading nativo
|
||||
- Resource hints (dns-prefetch, preconnect, preload)
|
||||
- Asset optimization y minification
|
||||
- WebP image support
|
||||
- AdSense delay load
|
||||
- Critical CSS inline ready
|
||||
- Defer de scripts no críticos
|
||||
- Cache-friendly headers
|
||||
|
||||
### SEO
|
||||
- 100% compatible con Rank Math SEO
|
||||
- HTML5 semántico completo
|
||||
- Schema.org markup
|
||||
- Open Graph ready
|
||||
- Canonical URLs
|
||||
- No meta tags duplicados
|
||||
- Breadcrumbs ready
|
||||
- Sitemap ready
|
||||
|
||||
### Accesibilidad
|
||||
- WCAG 2.1 AA compliant
|
||||
- Skip-to-content link
|
||||
- ARIA labels completos
|
||||
- Screen reader optimizado
|
||||
- Keyboard navigation
|
||||
- Focus states visibles
|
||||
- Contrastes de color óptimos
|
||||
- Semantic HTML5
|
||||
|
||||
### Responsive
|
||||
- Mobile-first approach
|
||||
- Bootstrap 5.3 grid system
|
||||
- Breakpoints optimizados
|
||||
- Touch-friendly interactions
|
||||
- Retina-ready
|
||||
- Responsive images con srcset
|
||||
|
||||
### Desarrollo
|
||||
- Modular architecture
|
||||
- WordPress Coding Standards
|
||||
- Child theme ready
|
||||
- Extensible via hooks y filters
|
||||
- Translation ready
|
||||
- Código documentado
|
||||
- Sin bloat
|
||||
|
||||
---
|
||||
|
||||
## Estadísticas del Proyecto
|
||||
|
||||
- **Total de Issues Completados**: 20
|
||||
- **Archivos PHP**: 33
|
||||
- **Archivos CSS**: 13
|
||||
- **Archivos JavaScript**: 5
|
||||
- **Templates**: 13
|
||||
- **Módulos Inc**: 15
|
||||
- **Líneas de código**: ~5,000+
|
||||
- **Tamaño del tema**: ~50MB (con Bootstrap)
|
||||
- **Versión**: 1.0.0
|
||||
- **Tiempo de desarrollo**: Noviembre 2024
|
||||
|
||||
---
|
||||
|
||||
## Compatibilidad
|
||||
|
||||
### Requisitos Mínimos
|
||||
- WordPress 6.0+
|
||||
- PHP 8.0+
|
||||
- MySQL 5.7+ / MariaDB 10.2+
|
||||
|
||||
### Requisitos Recomendados
|
||||
- WordPress 6.4+
|
||||
- PHP 8.1+
|
||||
- MySQL 8.0+ / MariaDB 10.5+
|
||||
|
||||
### Navegadores Soportados
|
||||
- Chrome (últimas 2 versiones)
|
||||
- Firefox (últimas 2 versiones)
|
||||
- Safari (últimas 2 versiones)
|
||||
- Edge (últimas 2 versiones)
|
||||
- Opera (últimas 2 versiones)
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
|
||||
### Plugins Compatibles
|
||||
- Rank Math SEO (100%)
|
||||
- Yoast SEO
|
||||
- WP Rocket
|
||||
- Smush
|
||||
- Contact Form 7
|
||||
- WPForms
|
||||
- Google Analytics
|
||||
- AdSense
|
||||
|
||||
---
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Planificado para Futuras Versiones
|
||||
|
||||
#### v1.1.0 (Q1 2025)
|
||||
- [ ] Gutenberg blocks personalizados
|
||||
- [ ] Color scheme customizer
|
||||
- [ ] Advanced typography options panel
|
||||
- [ ] Page templates adicionales
|
||||
- [ ] Custom post type templates
|
||||
|
||||
#### v1.2.0 (Q2 2025)
|
||||
- [ ] WooCommerce support completo
|
||||
- [ ] Mega menu functionality
|
||||
- [ ] Advanced footer builder
|
||||
- [ ] Dark mode toggle
|
||||
- [ ] Additional widget areas
|
||||
|
||||
#### v1.3.0 (Q3 2025)
|
||||
- [ ] RTL language support
|
||||
- [ ] Additional language files
|
||||
- [ ] Page builder integrations (Elementor, Beaver Builder)
|
||||
- [ ] Performance improvements fase 2
|
||||
- [ ] Advanced caching strategies
|
||||
|
||||
### Ideas para Considerar
|
||||
- Portfolio custom post type
|
||||
- Team members section
|
||||
- Testimonials system
|
||||
- Client logos slider
|
||||
- Advanced breadcrumbs
|
||||
- Custom sidebar per page
|
||||
- Sticky elements customization
|
||||
- Advanced header layouts
|
||||
- Footer layout options
|
||||
- Social sharing buttons
|
||||
- Reading progress bar
|
||||
- Estimated reading time customization
|
||||
|
||||
---
|
||||
|
||||
## Guía de Versionado
|
||||
|
||||
Usamos [Semantic Versioning](https://semver.org/):
|
||||
|
||||
- **MAJOR** (1.x.x): Cambios incompatibles con versiones anteriores
|
||||
- **MINOR** (x.1.x): Nueva funcionalidad compatible con versiones anteriores
|
||||
- **PATCH** (x.x.1): Bug fixes compatibles con versiones anteriores
|
||||
|
||||
## Tipos de Cambios
|
||||
|
||||
- **Agregado**: Para nueva funcionalidad
|
||||
- **Cambiado**: Para cambios en funcionalidad existente
|
||||
- **Deprecado**: Para funcionalidad que será removida
|
||||
- **Removido**: Para funcionalidad removida
|
||||
- **Corregido**: Para bug fixes
|
||||
- **Seguridad**: Para vulnerabilidades de seguridad
|
||||
|
||||
---
|
||||
|
||||
## Notas de la Versión 1.0.0
|
||||
|
||||
Esta es la primera versión estable y lista para producción del tema Apus. Incluye todas las características esenciales para un sitio WordPress profesional, optimizado y accesible.
|
||||
|
||||
### Highlights v1.0.0
|
||||
- Tema completo listo para producción
|
||||
- 20 issues completados exitosamente
|
||||
- Rendimiento optimizado (Core Web Vitals)
|
||||
- SEO-friendly desde el inicio
|
||||
- Accesible (WCAG 2.1 AA)
|
||||
- Panel de opciones profesional
|
||||
- Documentación completa
|
||||
- Sin dependencias pesadas
|
||||
- Código limpio y mantenible
|
||||
|
||||
### Testing
|
||||
- Probado en WordPress 6.0 - 6.4
|
||||
- Probado en PHP 8.0 - 8.2
|
||||
- Probado en múltiples navegadores
|
||||
- Probado con Rank Math SEO
|
||||
- Probado con plugins comunes
|
||||
- Validado para accesibilidad
|
||||
|
||||
### Performance Benchmarks
|
||||
- Lighthouse Score: 90+ (típicamente 95+)
|
||||
- PageSpeed Insights: Good
|
||||
- GTmetrix: A Grade
|
||||
- First Contentful Paint: <1.5s
|
||||
- Time to Interactive: <3.5s
|
||||
- Total Blocking Time: <200ms
|
||||
|
||||
---
|
||||
|
||||
**Última actualización del changelog:** 2024-11-03
|
||||
**Versión actual:** 1.0.0
|
||||
**Mantenido por:** Apus Development Team
|
||||
**Proyecto:** Análisis de Precios Unitarios
|
||||
@@ -1,222 +0,0 @@
|
||||
# Créditos y Licencias
|
||||
|
||||
## Apus Theme
|
||||
|
||||
**Versión:** 1.0.0
|
||||
**Desarrollado por:** Apus Development Team
|
||||
**Proyecto:** Análisis de Precios Unitarios
|
||||
**Website:** https://analisisdepreciosunitarios.com
|
||||
**Fecha:** Noviembre 2024
|
||||
**Licencia:** GPL v2 or later
|
||||
|
||||
---
|
||||
|
||||
## Frameworks y Librerías de Terceros
|
||||
|
||||
### Bootstrap 5.3.8
|
||||
- **Descripción:** Framework CSS y JavaScript para desarrollo responsive
|
||||
- **Autor:** The Bootstrap Authors
|
||||
- **Website:** https://getbootstrap.com/
|
||||
- **Licencia:** MIT License
|
||||
- **Copyright:** Copyright (c) 2011-2024 The Bootstrap Authors
|
||||
- **Archivos:**
|
||||
- `assets/css/bootstrap.min.css`
|
||||
- `assets/js/bootstrap.bundle.min.js`
|
||||
|
||||
**MIT License:**
|
||||
```
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## WordPress
|
||||
|
||||
- **Descripción:** Sistema de gestión de contenidos (CMS)
|
||||
- **Autor:** WordPress Contributors
|
||||
- **Website:** https://wordpress.org/
|
||||
- **Licencia:** GPL v2 or later
|
||||
- **Notas:** Apus Theme está construido sobre la plataforma WordPress y sigue todos los estándares y mejores prácticas de WordPress
|
||||
|
||||
---
|
||||
|
||||
## System Fonts
|
||||
|
||||
Apus Theme utiliza fuentes del sistema por defecto para máximo rendimiento:
|
||||
|
||||
- **-apple-system** (iOS y macOS)
|
||||
- **BlinkMacSystemFont** (macOS)
|
||||
- **"Segoe UI"** (Windows)
|
||||
- **Roboto** (Android, ChromeOS)
|
||||
- **"Helvetica Neue"** (macOS legacy)
|
||||
- **Arial** (Cross-platform fallback)
|
||||
- **sans-serif** (Universal fallback)
|
||||
|
||||
No se requieren licencias adicionales ya que son fuentes del sistema operativo.
|
||||
|
||||
---
|
||||
|
||||
## Inspiración y Referencias
|
||||
|
||||
### RSMeans
|
||||
- **Website:** https://www.rsmeans.com/
|
||||
- **Uso:** Inspiración visual y UX para el diseño del tema
|
||||
- **Notas:** No se ha copiado código; solo se usó como referencia de diseño
|
||||
|
||||
---
|
||||
|
||||
## Recursos Educativos
|
||||
|
||||
Este tema fue desarrollado siguiendo las mejores prácticas documentadas en:
|
||||
|
||||
- **WordPress Theme Handbook:** https://developer.wordpress.org/themes/
|
||||
- **WordPress Coding Standards:** https://developer.wordpress.org/coding-standards/
|
||||
- **WCAG 2.1 Guidelines:** https://www.w3.org/WAI/WCAG21/quickref/
|
||||
- **Bootstrap Documentation:** https://getbootstrap.com/docs/5.3/
|
||||
|
||||
---
|
||||
|
||||
## Herramientas de Desarrollo
|
||||
|
||||
### Testing y QA
|
||||
- **Lighthouse** (Chrome DevTools) - Auditorías de rendimiento
|
||||
- **PageSpeed Insights** - Métricas Core Web Vitals
|
||||
- **WAVE** - Evaluación de accesibilidad
|
||||
- **W3C Validator** - Validación de HTML/CSS
|
||||
|
||||
### Desarrollo
|
||||
- **Visual Studio Code** - Editor de código
|
||||
- **Local by Flywheel** - Entorno de desarrollo WordPress
|
||||
- **Git** - Control de versiones
|
||||
- **Chrome DevTools** - Debugging
|
||||
|
||||
---
|
||||
|
||||
## Plugins Compatibles y Recomendados
|
||||
|
||||
### SEO
|
||||
- **Rank Math SEO** - https://rankmath.com/
|
||||
- Licencia: GPL v2 or later
|
||||
- 100% compatible con Apus Theme
|
||||
|
||||
- **Yoast SEO** - https://yoast.com/
|
||||
- Licencia: GPL v2 or later
|
||||
- Compatible con Apus Theme
|
||||
|
||||
### Performance
|
||||
- **WP Rocket** - https://wp-rocket.me/
|
||||
- Licencia: Comercial
|
||||
- Totalmente compatible
|
||||
|
||||
- **Autoptimize** - https://autoptimize.com/
|
||||
- Licencia: GPL v2 or later
|
||||
- Compatible
|
||||
|
||||
### Image Optimization
|
||||
- **Smush** - https://wpmudev.com/project/wp-smush-pro/
|
||||
- Licencia: GPL v2 or later
|
||||
- Compatible con image optimization de Apus
|
||||
|
||||
- **ShortPixel** - https://shortpixel.com/
|
||||
- Licencia: Freemium
|
||||
- Compatible
|
||||
|
||||
### Forms
|
||||
- **Contact Form 7** - https://contactform7.com/
|
||||
- Licencia: GPL v2 or later
|
||||
- Estilos integrados
|
||||
|
||||
- **WPForms** - https://wpforms.com/
|
||||
- Licencia: GPL v2 or later
|
||||
- Compatible
|
||||
|
||||
---
|
||||
|
||||
## Agradecimientos
|
||||
|
||||
### Contribuidores del Proyecto
|
||||
- **Equipo de Desarrollo Apus** - Desarrollo completo del tema
|
||||
- **Comunidad de WordPress** - Documentación y soporte
|
||||
- **Bootstrap Team** - Framework excepcional
|
||||
|
||||
### Testing y Feedback
|
||||
- Comunidad de desarrolladores WordPress
|
||||
- Testers del proyecto Análisis de Precios Unitarios
|
||||
|
||||
---
|
||||
|
||||
## Derechos de Autor
|
||||
|
||||
### Código del Tema
|
||||
```
|
||||
Copyright (C) 2024 Apus Development Team
|
||||
|
||||
Este programa es software libre: puede redistribuirlo y/o modificarlo
|
||||
bajo los términos de la Licencia Pública General GNU publicada por
|
||||
la Free Software Foundation, ya sea la versión 2 de la Licencia, o
|
||||
(a su elección) cualquier versión posterior.
|
||||
|
||||
Este programa se distribuye con la esperanza de que sea útil,
|
||||
pero SIN NINGUNA GARANTÍA; incluso sin la garantía implícita de
|
||||
COMERCIABILIDAD o IDONEIDAD PARA UN PROPÓSITO PARTICULAR. Vea la
|
||||
Licencia Pública General GNU para más detalles.
|
||||
|
||||
Debería haber recibido una copia de la Licencia Pública General GNU
|
||||
junto con este programa. Si no es así, vea <http://www.gnu.org/licenses/>.
|
||||
```
|
||||
|
||||
### Contenido de Documentación
|
||||
- La documentación de este tema (archivos .md en /docs/) está licenciada bajo Creative Commons Attribution 4.0 International (CC BY 4.0)
|
||||
- Puede compartir y adaptar el contenido dando crédito apropiado
|
||||
|
||||
---
|
||||
|
||||
## Marcas Registradas
|
||||
|
||||
- **WordPress** y el logo de WordPress son marcas registradas de la WordPress Foundation
|
||||
- **Bootstrap** es marca registrada de Twitter, Inc.
|
||||
- **Google Fonts** es marca registrada de Google LLC
|
||||
- Todas las demás marcas pertenecen a sus respectivos dueños
|
||||
|
||||
---
|
||||
|
||||
## Aviso Legal
|
||||
|
||||
Este tema se proporciona "TAL CUAL", sin garantías de ningún tipo, expresas o implícitas, incluyendo pero no limitado a las garantías de comerciabilidad, idoneidad para un propósito particular y no infracción. En ningún caso los autores o titulares de los derechos de autor serán responsables de ningún reclamo, daños u otra responsabilidad.
|
||||
|
||||
---
|
||||
|
||||
## Contacto
|
||||
|
||||
Para reportar issues, sugerencias o contribuciones:
|
||||
|
||||
- **GitHub Issues:** [URL del repositorio]
|
||||
- **Email:** [email de soporte]
|
||||
- **Website:** https://analisisdepreciosunitarios.com
|
||||
|
||||
---
|
||||
|
||||
## Historial de Versiones
|
||||
|
||||
Ver [CHANGELOG.md](CHANGELOG.md) para el historial completo de cambios y versiones.
|
||||
|
||||
---
|
||||
|
||||
**Última actualización:** Noviembre 2024
|
||||
**Versión del documento:** 1.0.0
|
||||
@@ -1,468 +0,0 @@
|
||||
# Issue #14 Completion Report: Panel de Opciones del Tema en Admin
|
||||
|
||||
**Fecha de Completación:** 2025-11-03
|
||||
**Estado:** ✅ COMPLETADO
|
||||
**Versión:** 1.0.0
|
||||
|
||||
---
|
||||
|
||||
## Resumen Ejecutivo
|
||||
|
||||
Se ha implementado exitosamente un panel completo de opciones del tema en el área de administración de WordPress. Este panel centraliza TODAS las configuraciones del tema en una interfaz moderna, intuitiva y altamente funcional.
|
||||
|
||||
---
|
||||
|
||||
## Archivos Creados
|
||||
|
||||
### 1. Archivos PHP Core (7 archivos)
|
||||
|
||||
#### `inc/theme-options-helpers.php` (318 líneas)
|
||||
**Propósito:** Funciones helper para acceder a las opciones del tema desde cualquier parte del código.
|
||||
|
||||
**Funciones principales:**
|
||||
- `apus_get_option($option_name, $default)` - Obtener cualquier opción
|
||||
- `apus_is_option_enabled($option_name)` - Verificar si opción está habilitada
|
||||
- 30+ funciones específicas para cada tipo de opción
|
||||
- Funciones para logo, favicon, breadcrumbs, excerpts, related posts, social media, etc.
|
||||
|
||||
#### `inc/admin/options-api.php` (282 líneas)
|
||||
**Propósito:** Implementación de WordPress Settings API con sanitización completa.
|
||||
|
||||
**Características:**
|
||||
- Registro de settings usando Settings API
|
||||
- Definición de defaults para todas las opciones
|
||||
- Funciones de sanitización personalizadas
|
||||
- Sanitización de CSS, JavaScript, URLs, HTML, texto, números
|
||||
- Validación de todos los inputs
|
||||
|
||||
#### `inc/admin/theme-options.php` (214 líneas)
|
||||
**Propósito:** Registro del menú de admin y carga de assets.
|
||||
|
||||
**Características:**
|
||||
- Registro de página en menú Appearance
|
||||
- Enqueue de scripts y estilos (solo en página de opciones)
|
||||
- Handlers AJAX para reset, export, import
|
||||
- Integración con WordPress Customizer
|
||||
- Link de settings en lista de temas
|
||||
|
||||
#### `inc/admin/options-page-template.php` (661 líneas)
|
||||
**Propósito:** Template HTML completo de la página de opciones.
|
||||
|
||||
**Características:**
|
||||
- 5 tabs organizados (General, Content, Performance, Related Posts, Advanced)
|
||||
- Más de 40 campos de configuración
|
||||
- Upload de imágenes (logo, favicon)
|
||||
- Toggle switches modernos
|
||||
- Modal para importación
|
||||
- Interfaz responsive
|
||||
- Validación en tiempo real
|
||||
|
||||
### 2. Assets (2 archivos)
|
||||
|
||||
#### `assets/admin/css/theme-options.css` (471 líneas)
|
||||
**Características:**
|
||||
- Diseño moderno y limpio
|
||||
- Sistema de tabs responsive
|
||||
- Toggle switches animados
|
||||
- Estilos para image upload
|
||||
- Modal styling
|
||||
- Diseño responsive para móvil/tablet
|
||||
- Animaciones suaves
|
||||
- Compatibilidad con admin de WordPress
|
||||
|
||||
#### `assets/admin/js/theme-options.js` (440 líneas)
|
||||
**Características:**
|
||||
- Navegación de tabs con soporte de URL hash
|
||||
- Upload de imágenes con WordPress Media Library
|
||||
- Funcionalidad de reset con confirmación
|
||||
- Export de opciones a JSON
|
||||
- Import de opciones desde JSON
|
||||
- Validación de formularios
|
||||
- Campos condicionales
|
||||
- Manejo de errores
|
||||
- Soporte para browser back/forward
|
||||
|
||||
### 3. Documentación (3 archivos)
|
||||
|
||||
#### `inc/admin/README.md`
|
||||
- Documentación completa del sistema
|
||||
- Estructura de archivos
|
||||
- Guía de uso
|
||||
- Lista de todas las funciones helper
|
||||
- Ejemplos de código
|
||||
- Información de seguridad y performance
|
||||
|
||||
#### `inc/admin/USAGE-EXAMPLES.php`
|
||||
- 20 ejemplos prácticos de uso
|
||||
- Implementaciones reales para templates
|
||||
- Código copy-paste ready
|
||||
- Ejemplos para cada tipo de opción
|
||||
|
||||
#### `inc/admin/TEST-CHECKLIST.md`
|
||||
- Checklist completo de testing
|
||||
- 200+ puntos de verificación
|
||||
- Tests de funcionalidad
|
||||
- Tests de seguridad
|
||||
- Tests de performance
|
||||
- Tests de accesibilidad
|
||||
- Tests de compatibilidad
|
||||
|
||||
---
|
||||
|
||||
## Opciones Implementadas
|
||||
|
||||
### General (11 opciones)
|
||||
1. ✅ Site Logo (upload)
|
||||
2. ✅ Site Favicon (upload)
|
||||
3. ✅ Enable Breadcrumbs (toggle)
|
||||
4. ✅ Breadcrumb Separator (text)
|
||||
5. ✅ Date Format (text)
|
||||
6. ✅ Time Format (text)
|
||||
7. ✅ Copyright Text (textarea)
|
||||
8. ✅ Facebook URL (url)
|
||||
9. ✅ Twitter URL (url)
|
||||
10. ✅ Instagram URL (url)
|
||||
11. ✅ LinkedIn URL (url)
|
||||
12. ✅ YouTube URL (url)
|
||||
|
||||
### Content (13 opciones)
|
||||
1. ✅ Excerpt Length (number)
|
||||
2. ✅ Excerpt More Text (text)
|
||||
3. ✅ Default Post Layout (select)
|
||||
4. ✅ Default Page Layout (select)
|
||||
5. ✅ Archive Posts Per Page (number)
|
||||
6. ✅ Show Featured Image on Single Posts (toggle)
|
||||
7. ✅ Show Author Box (toggle)
|
||||
8. ✅ Enable Comments on Posts (toggle)
|
||||
9. ✅ Enable Comments on Pages (toggle)
|
||||
10. ✅ Show Post Meta (toggle)
|
||||
11. ✅ Show Post Tags (toggle)
|
||||
12. ✅ Show Post Categories (toggle)
|
||||
|
||||
### Performance (7 opciones)
|
||||
1. ✅ Enable Lazy Loading (toggle)
|
||||
2. ✅ Remove Emoji Scripts (toggle)
|
||||
3. ✅ Remove Embeds (toggle)
|
||||
4. ✅ Remove Dashicons (toggle)
|
||||
5. ✅ Defer JavaScript (toggle)
|
||||
6. ✅ Minify HTML (toggle)
|
||||
7. ✅ Disable Gutenberg (toggle)
|
||||
|
||||
### Related Posts (5 opciones)
|
||||
1. ✅ Enable Related Posts (toggle)
|
||||
2. ✅ Related Posts Count (number)
|
||||
3. ✅ Related Posts Taxonomy (select)
|
||||
4. ✅ Related Posts Title (text)
|
||||
5. ✅ Related Posts Columns (select)
|
||||
|
||||
### Advanced (3 opciones)
|
||||
1. ✅ Custom CSS (textarea)
|
||||
2. ✅ Custom JavaScript Header (textarea)
|
||||
3. ✅ Custom JavaScript Footer (textarea)
|
||||
|
||||
**Total: 39+ opciones configurables**
|
||||
|
||||
---
|
||||
|
||||
## Funcionalidades Especiales
|
||||
|
||||
### 1. Import/Export
|
||||
- ✅ Exportar todas las opciones a archivo JSON
|
||||
- ✅ Importar opciones desde archivo JSON
|
||||
- ✅ Validación de JSON en importación
|
||||
- ✅ Descarga automática de archivo
|
||||
|
||||
### 2. Reset to Defaults
|
||||
- ✅ Restaurar todas las opciones a valores predeterminados
|
||||
- ✅ Confirmación antes de reset
|
||||
- ✅ Recarga automática después de reset
|
||||
|
||||
### 3. Tab Navigation
|
||||
- ✅ Navegación por tabs
|
||||
- ✅ URL hash support (#general, #content, etc.)
|
||||
- ✅ Browser back/forward support
|
||||
- ✅ Auto-scroll a tab desde URL
|
||||
|
||||
### 4. Image Upload
|
||||
- ✅ Integración con WordPress Media Library
|
||||
- ✅ Vista previa de imagen
|
||||
- ✅ Botón para remover imagen
|
||||
- ✅ Soporte para logo y favicon
|
||||
|
||||
### 5. Form Validation
|
||||
- ✅ Validación de campos requeridos
|
||||
- ✅ Validación de números (min/max)
|
||||
- ✅ Validación de URLs
|
||||
- ✅ Scroll automático a errores
|
||||
- ✅ Highlight de campos con error
|
||||
|
||||
### 6. Conditional Fields
|
||||
- ✅ Campos que se habilitan/deshabilitan basados en otros
|
||||
- ✅ Ejemplo: campos de related posts se deshabilitan si related posts está off
|
||||
|
||||
---
|
||||
|
||||
## Seguridad Implementada
|
||||
|
||||
1. ✅ **Nonce Verification** - Todas las llamadas AJAX verifican nonce
|
||||
2. ✅ **Capability Checks** - Verificación de `manage_options`
|
||||
3. ✅ **Input Sanitization** - Sanitización específica por tipo de campo
|
||||
4. ✅ **Output Escaping** - Escape de todos los outputs
|
||||
5. ✅ **CSRF Protection** - Protección contra ataques CSRF
|
||||
6. ✅ **XSS Prevention** - Prevención de XSS en todos los campos
|
||||
7. ✅ **SQL Injection Prevention** - Uso de funciones seguras de WP
|
||||
8. ✅ **Script Tag Removal** - Remoción de tags `<script>` en CSS
|
||||
9. ✅ **PHP Code Removal** - Remoción de código PHP en campos de texto
|
||||
|
||||
---
|
||||
|
||||
## Performance
|
||||
|
||||
### Optimizaciones Implementadas
|
||||
- ✅ Assets solo se cargan en página de opciones
|
||||
- ✅ Lazy loading de contenido de tabs
|
||||
- ✅ AJAX optimizado con debouncing
|
||||
- ✅ Minimal DOM manipulation
|
||||
- ✅ CSS y JS minificables
|
||||
- ✅ Caché de opciones en transients (donde aplique)
|
||||
|
||||
### Métricas
|
||||
- Tamaño CSS: ~15KB (sin minificar)
|
||||
- Tamaño JS: ~12KB (sin minificar)
|
||||
- Tiempo de carga: <500ms
|
||||
- Requests HTTP: 2 adicionales (CSS + JS)
|
||||
|
||||
---
|
||||
|
||||
## Accesibilidad (WCAG 2.1 Level AA)
|
||||
|
||||
1. ✅ **Keyboard Navigation** - Navegación completa por teclado
|
||||
2. ✅ **Screen Reader Support** - Labels apropiados, ARIA attributes
|
||||
3. ✅ **Focus Indicators** - Indicadores de foco visibles
|
||||
4. ✅ **Color Contrast** - Contraste mínimo de 4.5:1
|
||||
5. ✅ **Alt Text** - Texto alternativo para imágenes
|
||||
6. ✅ **Form Labels** - Labels asociados correctamente
|
||||
7. ✅ **Error Messages** - Mensajes de error descriptivos
|
||||
8. ✅ **Semantic HTML** - Estructura HTML semántica
|
||||
|
||||
---
|
||||
|
||||
## Compatibilidad
|
||||
|
||||
### WordPress
|
||||
- ✅ WordPress 5.0+
|
||||
- ✅ WordPress 6.0+ (tested)
|
||||
- ✅ Multisite compatible
|
||||
|
||||
### PHP
|
||||
- ✅ PHP 7.4+
|
||||
- ✅ PHP 8.0+
|
||||
- ✅ PHP 8.1+ (tested)
|
||||
|
||||
### Browsers
|
||||
- ✅ Chrome (latest)
|
||||
- ✅ Firefox (latest)
|
||||
- ✅ Safari (latest)
|
||||
- ✅ Edge (latest)
|
||||
- ✅ Mobile browsers
|
||||
|
||||
### Responsive
|
||||
- ✅ Desktop (1920px+)
|
||||
- ✅ Laptop (1366px)
|
||||
- ✅ Tablet (768px)
|
||||
- ✅ Mobile (375px)
|
||||
|
||||
---
|
||||
|
||||
## Integración con functions.php
|
||||
|
||||
```php
|
||||
// Theme Options Helpers (load first as other files may depend on it)
|
||||
if (file_exists(get_template_directory() . '/inc/theme-options-helpers.php')) {
|
||||
require_once get_template_directory() . '/inc/theme-options-helpers.php';
|
||||
}
|
||||
|
||||
// Admin Options API
|
||||
if (is_admin()) {
|
||||
if (file_exists(get_template_directory() . '/inc/admin/options-api.php')) {
|
||||
require_once get_template_directory() . '/inc/admin/options-api.php';
|
||||
}
|
||||
if (file_exists(get_template_directory() . '/inc/admin/theme-options.php')) {
|
||||
require_once get_template_directory() . '/inc/admin/theme-options.php';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ejemplos de Uso
|
||||
|
||||
### En cualquier template PHP:
|
||||
|
||||
```php
|
||||
// Obtener logo
|
||||
$logo_url = apus_get_logo_url();
|
||||
if ($logo_url) {
|
||||
echo '<img src="' . esc_url($logo_url) . '" alt="Logo" />';
|
||||
}
|
||||
|
||||
// Verificar breadcrumbs
|
||||
if (apus_show_breadcrumbs()) {
|
||||
// Mostrar breadcrumbs
|
||||
$separator = apus_get_breadcrumb_separator();
|
||||
}
|
||||
|
||||
// Obtener excerpt length
|
||||
$length = apus_get_excerpt_length();
|
||||
|
||||
// Verificar related posts
|
||||
if (apus_show_related_posts()) {
|
||||
$count = apus_get_related_posts_count();
|
||||
// Mostrar related posts
|
||||
}
|
||||
|
||||
// Social media links
|
||||
$social_links = apus_get_social_links();
|
||||
foreach ($social_links as $network => $url) {
|
||||
if ($url) {
|
||||
echo '<a href="' . esc_url($url) . '">' . $network . '</a>';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing Realizado
|
||||
|
||||
### ✅ Tests Funcionales
|
||||
- Todos los campos guardan correctamente
|
||||
- Todos los campos cargan correctamente
|
||||
- Import/Export funciona
|
||||
- Reset funciona
|
||||
- Validación funciona
|
||||
|
||||
### ✅ Tests de Seguridad
|
||||
- Nonce verification
|
||||
- Capability checks
|
||||
- Input sanitization
|
||||
- XSS prevention
|
||||
- CSRF protection
|
||||
|
||||
### ✅ Tests de Performance
|
||||
- Assets solo cargan en página de opciones
|
||||
- No memory leaks
|
||||
- AJAX optimizado
|
||||
|
||||
### ✅ Tests de Accesibilidad
|
||||
- Keyboard navigation
|
||||
- Screen reader compatible
|
||||
- WCAG 2.1 AA compliant
|
||||
|
||||
### ✅ Tests de Compatibilidad
|
||||
- WordPress 6.0+
|
||||
- PHP 8.0+
|
||||
- Todos los browsers modernos
|
||||
- Responsive en todos los tamaños
|
||||
|
||||
---
|
||||
|
||||
## Características Destacadas
|
||||
|
||||
### 🎨 Diseño Moderno
|
||||
- Interfaz limpia y profesional
|
||||
- Colores consistentes con WordPress admin
|
||||
- Toggle switches animados
|
||||
- Iconos Dashicons
|
||||
- Responsive design
|
||||
|
||||
### 🚀 Performance
|
||||
- Solo 2 HTTP requests adicionales
|
||||
- Assets condicionales
|
||||
- AJAX optimizado
|
||||
- DOM manipulation mínima
|
||||
|
||||
### 🔒 Seguridad
|
||||
- Múltiples capas de validación
|
||||
- Sanitización exhaustiva
|
||||
- Protección contra ataques comunes
|
||||
- Capability checks
|
||||
|
||||
### ♿ Accesibilidad
|
||||
- WCAG 2.1 Level AA
|
||||
- Keyboard navigation completa
|
||||
- Screen reader friendly
|
||||
- Focus indicators visibles
|
||||
|
||||
### 📱 Responsive
|
||||
- Diseño adaptativo
|
||||
- Touch-friendly en móvil
|
||||
- Tabs se reorganizan en móvil
|
||||
- Forms usables en pantallas pequeñas
|
||||
|
||||
### 🛠️ Developer Friendly
|
||||
- 30+ helper functions
|
||||
- Documentación completa
|
||||
- Ejemplos de código
|
||||
- Test checklist
|
||||
- Código bien comentado
|
||||
|
||||
---
|
||||
|
||||
## Próximos Pasos Sugeridos
|
||||
|
||||
1. ✅ **Testing en WordPress real** - Activar tema y probar panel
|
||||
2. ✅ **Integrar opciones en templates** - Usar helper functions en templates
|
||||
3. ⏳ **Traducción** - Crear archivos .pot para i18n
|
||||
4. ⏳ **Cache** - Implementar caché de opciones si es necesario
|
||||
5. ⏳ **Más opciones** - Agregar más opciones según necesidades
|
||||
|
||||
---
|
||||
|
||||
## Conclusión
|
||||
|
||||
El Issue #14 ha sido completado exitosamente con un panel de opciones del tema completamente funcional, seguro, accesible y fácil de usar. El panel centraliza TODAS las configuraciones del tema en una interfaz moderna que cumple con los estándares de WordPress.
|
||||
|
||||
**Total de líneas de código:** 3,052+ líneas
|
||||
**Total de archivos:** 10 archivos (7 PHP + 2 assets + 3 docs)
|
||||
**Total de opciones:** 39+ opciones configurables
|
||||
**Total de helper functions:** 30+ funciones
|
||||
|
||||
---
|
||||
|
||||
## Archivos Incluidos
|
||||
|
||||
### Core PHP Files
|
||||
1. ✅ `inc/theme-options-helpers.php` (318 líneas)
|
||||
2. ✅ `inc/admin/options-api.php` (282 líneas)
|
||||
3. ✅ `inc/admin/theme-options.php` (214 líneas)
|
||||
4. ✅ `inc/admin/options-page-template.php` (661 líneas)
|
||||
|
||||
### Asset Files
|
||||
5. ✅ `assets/admin/css/theme-options.css` (471 líneas)
|
||||
6. ✅ `assets/admin/js/theme-options.js` (440 líneas)
|
||||
|
||||
### Documentation Files
|
||||
7. ✅ `inc/admin/README.md` (completo)
|
||||
8. ✅ `inc/admin/USAGE-EXAMPLES.php` (394 líneas, 20 ejemplos)
|
||||
9. ✅ `inc/admin/TEST-CHECKLIST.md` (200+ items)
|
||||
10. ✅ `ISSUE-14-COMPLETION-REPORT.md` (este archivo)
|
||||
|
||||
### Integration
|
||||
11. ✅ `functions.php` (actualizado con require_once)
|
||||
|
||||
---
|
||||
|
||||
**Reportado por:** Claude Code (Sonnet 4.5)
|
||||
**Fecha:** 2025-11-03
|
||||
**Estado:** ✅ COMPLETADO Y LISTO PARA PRODUCCIÓN
|
||||
|
||||
---
|
||||
|
||||
## Notas Finales
|
||||
|
||||
Este panel de opciones es el corazón del tema Apus. Todas las demás funcionalidades del tema ahora pueden consultar estas opciones para personalizar su comportamiento. Es escalable, mantenible y siguiendo las mejores prácticas de WordPress.
|
||||
|
||||
Para cualquier duda, consultar los archivos de documentación incluidos:
|
||||
- `inc/admin/README.md` - Documentación técnica
|
||||
- `inc/admin/USAGE-EXAMPLES.php` - Ejemplos de uso
|
||||
- `inc/admin/TEST-CHECKLIST.md` - Checklist de testing
|
||||
@@ -1,398 +0,0 @@
|
||||
# Issue #19 Completion Report
|
||||
## Configuración SEO y compatibilidad con Rank Math
|
||||
|
||||
**Status**: COMPLETADO
|
||||
**Date**: 2025-11-03
|
||||
**Commit**: 45af6
|
||||
|
||||
---
|
||||
|
||||
## Resumen de Tareas Completadas
|
||||
|
||||
### 1. Verificación de title-tag Support
|
||||
|
||||
**Verificación**: ✓ COMPLETADA
|
||||
|
||||
```
|
||||
Ubicación: wp-content/themes/apus-theme/functions.php
|
||||
Línea: 30
|
||||
Código: add_theme_support('title-tag');
|
||||
```
|
||||
|
||||
**Estado**: Activo y funcionando correctamente. WordPress gestiona automáticamente todos los títulos de página.
|
||||
|
||||
**Beneficio SEO**:
|
||||
- Evita títulos duplicados
|
||||
- Asegura formato consistente
|
||||
- Mejora CTR en resultados de búsqueda
|
||||
|
||||
---
|
||||
|
||||
### 2. Verificación de Meta Tags Duplicados en Header
|
||||
|
||||
**Verificación**: ✓ COMPLETADA
|
||||
|
||||
**Archivo**: `wp-content/themes/apus-theme/header.php`
|
||||
|
||||
**Meta tags presentes (estándar, no duplicados)**:
|
||||
```html
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="profile" href="https://gmpg.org/xfn/11">
|
||||
<?php wp_head(); ?>
|
||||
```
|
||||
|
||||
**Meta tags deliberadamente NO incluidos**:
|
||||
- Meta description (Rank Math lo maneja)
|
||||
- Open Graph tags (Rank Math lo maneja)
|
||||
- Twitter Card tags (Rank Math lo maneja)
|
||||
- Canonical URL (Rank Math lo maneja)
|
||||
- Robots meta tag (Rank Math lo maneja)
|
||||
- WordPress generator tag (removido en inc/seo.php)
|
||||
|
||||
**Conclusión**: Header.php está limpio y no contiene duplicados. Rank Math tiene campo libre para su implementación.
|
||||
|
||||
---
|
||||
|
||||
### 3. Creación de inc/seo.php
|
||||
|
||||
**Ubicación**: `wp-content/themes/apus-theme/inc/seo.php`
|
||||
**Líneas**: 205 líneas de código bien documentado
|
||||
**Status**: ✓ CREADO
|
||||
|
||||
#### Funciones Implementadas:
|
||||
|
||||
##### A. apus_remove_generator()
|
||||
```php
|
||||
function apus_remove_generator() {
|
||||
return '';
|
||||
}
|
||||
```
|
||||
- Elimina la etiqueta `<meta name="generator" content="WordPress X.X">` del header
|
||||
- Previene exposición de versión de WordPress
|
||||
- Mejora postura de seguridad (signal de confianza para motores)
|
||||
- Implementado en líneas 25-29
|
||||
|
||||
##### B. Limpieza de Headers Innecesarios
|
||||
- **RSD Link** (Really Simple Discovery): Protocolo obsoleto
|
||||
- **WLW Manifest** (Windows Live Writer): Servicio deprecado
|
||||
- **REST API Link**: API mantiene funcional, solo removido el link del header
|
||||
|
||||
##### C. Optimizaciones de Performance
|
||||
- **Robots.txt Cache Headers**: Asegura que buscadores cacheen apropiadamente
|
||||
- **Prefetch Hints**: Google Fonts preconnect para carga más rápida
|
||||
- **Security Headers**:
|
||||
- `X-Content-Type-Options: nosniff`
|
||||
- `X-Frame-Options: SAMEORIGIN`
|
||||
- `X-XSS-Protection: 1; mode=block`
|
||||
|
||||
##### D. Schema.org Fallback
|
||||
```php
|
||||
function apus_schema_fallback() {
|
||||
// Solo output si Rank Math NO está activo
|
||||
if (apus_check_rank_math_active()) {
|
||||
return;
|
||||
}
|
||||
// Output basic schema
|
||||
}
|
||||
```
|
||||
- Detecta automáticamente si Rank Math está activo
|
||||
- Si Rank Math está: no output (evita conflictos)
|
||||
- Si Rank Math está inactivo: proporciona schema básico de Organization
|
||||
|
||||
##### E. Detección de Rank Math
|
||||
```php
|
||||
function apus_check_rank_math_active() {
|
||||
return defined('RANK_MATH_VERSION');
|
||||
}
|
||||
```
|
||||
- Verifica si Rank Math está instalado y activo
|
||||
- Usado por funciones de fallback para evitar conflictos
|
||||
- Ubicado en línea 112
|
||||
|
||||
---
|
||||
|
||||
### 4. Actualización de functions.php
|
||||
|
||||
**Ubicación**: `wp-content/themes/apus-theme/functions.php`
|
||||
**Cambio**: Agregada inclusión de inc/seo.php
|
||||
**Líneas**: 174-177
|
||||
|
||||
```php
|
||||
// SEO optimizations and Rank Math compatibility
|
||||
if (file_exists(get_template_directory() . '/inc/seo.php')) {
|
||||
require_once get_template_directory() . '/inc/seo.php';
|
||||
}
|
||||
```
|
||||
|
||||
**Orden de carga** (optimizado):
|
||||
1. Theme Options Helpers (dependencia)
|
||||
2. Admin Options (solo en admin)
|
||||
3. Bootstrap & Scripts
|
||||
4. Font Customizer
|
||||
5. **SEO Optimizations** (NUEVO - antes de Performance)
|
||||
6. Performance Optimizations
|
||||
7. Image Optimization
|
||||
8. Template Functions/Tags
|
||||
9. Featured Image
|
||||
10. Category Badge
|
||||
11. AdSense Delay
|
||||
12. Related Posts
|
||||
13. TOC (Table of Contents)
|
||||
|
||||
**Justificación de orden**: SEO cargado temprano para que filters y hooks se registren antes que otras optimizaciones.
|
||||
|
||||
---
|
||||
|
||||
### 5. Creación de SEO-COMPATIBILITY.md
|
||||
|
||||
**Ubicación**: `wp-content/themes/apus-theme/SEO-COMPATIBILITY.md`
|
||||
**Tamaño**: 12 KB
|
||||
**Status**: ✓ CREADO
|
||||
|
||||
#### Secciones Incluidas:
|
||||
|
||||
1. **Overview**
|
||||
- Explicación de relación tema + Rank Math
|
||||
- Objetivo: compatibilidad completa sin conflictos
|
||||
|
||||
2. **Theme SEO Features** (Documentadas todas las características)
|
||||
- Title Tag Management
|
||||
- Header Optimization
|
||||
- Built-in SEO Optimizations
|
||||
- Image Optimization
|
||||
- Performance Optimizations
|
||||
|
||||
3. **What Rank Math Does**
|
||||
- Meta Tags Management
|
||||
- Schema.org Implementation
|
||||
- Content Analysis
|
||||
- XML Sitemaps
|
||||
- Redirects
|
||||
- Search Console Integration
|
||||
|
||||
4. **Rank Math Configuration (Recommended Settings)**
|
||||
- General Settings
|
||||
- Titles & Meta
|
||||
- Sitemap Settings
|
||||
- Schema.org Settings
|
||||
- Search Console Integration
|
||||
- Redirect Manager
|
||||
|
||||
5. **How They Work Together**
|
||||
- No Conflicts explanation
|
||||
- Smart Detection mechanism
|
||||
- Division de responsabilidades
|
||||
|
||||
6. **Header.php Analysis (Clean Check)**
|
||||
- Análisis de qué está y qué no en header.php
|
||||
- Explicación de por qué se excluyen ciertos tags
|
||||
- Prevención de duplicados
|
||||
|
||||
7. **Theme Functions.php Features**
|
||||
- Explicación de cada add_theme_support
|
||||
- Beneficios SEO específicos
|
||||
|
||||
8. **SEO Best Practices for Content Creation**
|
||||
- Workflow con Rank Math
|
||||
- Optimización de imágenes
|
||||
- Estructura de sitio
|
||||
|
||||
9. **Verification Checklist**
|
||||
- Before Launch (11 items)
|
||||
- After Launch (6 items)
|
||||
|
||||
10. **Troubleshooting**
|
||||
- Problemas comunes y soluciones
|
||||
- Meta descriptions duplicadas
|
||||
- Schema validation errors
|
||||
- Missing meta tags
|
||||
- Slow page load
|
||||
|
||||
11. **Plugin Recommendations**
|
||||
- Essential plugins
|
||||
- Recommended for blogs
|
||||
- Optional performance enhancements
|
||||
|
||||
12. **Additional Resources**
|
||||
- Links a documentación oficial
|
||||
- Canales de soporte
|
||||
|
||||
---
|
||||
|
||||
## Verificaciones Realizadas
|
||||
|
||||
### Verificación Técnica 1: Title Tag Support
|
||||
```bash
|
||||
$ grep "add_theme_support('title-tag')" functions.php
|
||||
30: add_theme_support('title-tag');
|
||||
```
|
||||
✓ CONFIRMADO: Activo en línea 30
|
||||
|
||||
### Verificación Técnica 2: Función apus_remove_generator
|
||||
```bash
|
||||
$ grep -n "apus_remove_generator" inc/seo.php
|
||||
25:function apus_remove_generator() {
|
||||
29:add_filter('the_generator', 'apus_remove_generator');
|
||||
```
|
||||
✓ CONFIRMADO: Función creada en línea 25, filter activo en línea 29
|
||||
|
||||
### Verificación Técnica 3: Archivo SEO-COMPATIBILITY.md
|
||||
```bash
|
||||
$ ls -lh SEO-COMPATIBILITY.md
|
||||
-rw-r--r-- 1 TecnoGroup 197121 12K SEO-COMPATIBILITY.md
|
||||
```
|
||||
✓ CONFIRMADO: 12 KB de documentación completa
|
||||
|
||||
### Verificación Técnica 4: Meta Tags en Header
|
||||
```bash
|
||||
$ grep -i "meta\|og:\|twitter:" header.php
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
```
|
||||
✓ CONFIRMADO: Solo 3 meta tags estándar, sin duplicados
|
||||
|
||||
---
|
||||
|
||||
## Estructura de Archivos Creados
|
||||
|
||||
```
|
||||
wp-content/themes/apus-theme/
|
||||
├── functions.php (MODIFICADO)
|
||||
│ └── Incluye: inc/seo.php
|
||||
├── inc/
|
||||
│ └── seo.php (NUEVO - 205 líneas)
|
||||
│ ├── apus_remove_generator()
|
||||
│ ├── Limpieza de headers
|
||||
│ ├── Prefetch hints
|
||||
│ ├── Security headers
|
||||
│ ├── apus_check_rank_math_active()
|
||||
│ └── apus_schema_fallback()
|
||||
└── SEO-COMPATIBILITY.md (NUEVO - 12 KB)
|
||||
├── Overview
|
||||
├── Theme SEO Features
|
||||
├── What Rank Math Does
|
||||
├── Configuration Guide
|
||||
├── Troubleshooting
|
||||
└── Resources
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Beneficios Implementados
|
||||
|
||||
### SEO
|
||||
1. **Eliminación de WordPress Version**: Mejora seguridad
|
||||
2. **Limpieza de Headers**: Menos "ruido" en header
|
||||
3. **Prefetch Hints**: Faster page load (Core Web Vitals)
|
||||
4. **Fallback Schema**: Content structure cuando no hay Rank Math
|
||||
5. **Title Tag Management**: Títulos únicos y optimizados
|
||||
|
||||
### Performance
|
||||
1. **Prefetch Google Fonts**: Conexión previa a recurso externo
|
||||
2. **Security Headers**: Trust signal para buscadores
|
||||
3. **Robots.txt Cache**: Optimización de crawl budget
|
||||
|
||||
### Compatibility
|
||||
1. **Smart Detection**: Automatización de conflictos
|
||||
2. **Zero Conflicts**: Tema no interfiere con Rank Math
|
||||
3. **Future-Proof**: Funciona con o sin Rank Math
|
||||
|
||||
### Documentation
|
||||
1. **Complete Guide**: Explicación de cada feature
|
||||
2. **Configuration Steps**: Setup recomendado de Rank Math
|
||||
3. **Troubleshooting**: Solución de problemas comunes
|
||||
4. **Best Practices**: Workflow SEO recomendado
|
||||
|
||||
---
|
||||
|
||||
## Compatibilidad Verificada
|
||||
|
||||
| Aspecto | Tema | Rank Math | Conflicto |
|
||||
|---------|------|-----------|-----------|
|
||||
| Meta Title | Soportado | Soportado | No - WP maneja |
|
||||
| Meta Description | No output | Soportado | No |
|
||||
| Open Graph | No output | Soportado | No |
|
||||
| Twitter Card | No output | Soportado | No |
|
||||
| Canonical | No output | Soportado | No |
|
||||
| Schema.org | Fallback (si RM inactivo) | Soportado | No |
|
||||
| Security Headers | Soportado | Soportado | No |
|
||||
| WordPress Version | Removido | N/A | No |
|
||||
|
||||
---
|
||||
|
||||
## Git Commit
|
||||
|
||||
```
|
||||
Commit: 45af6
|
||||
Message: Completar Issue #19: Configuración SEO y compatibilidad con Rank Math
|
||||
Files Changed: 3
|
||||
- wp-content/themes/apus-theme/functions.php (MODIFIED)
|
||||
- wp-content/themes/apus-theme/inc/seo.php (NEW)
|
||||
- wp-content/themes/apus-theme/SEO-COMPATIBILITY.md (NEW)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Próximos Pasos Recomendados
|
||||
|
||||
1. **Instalar Rank Math**
|
||||
- Descargar desde WordPress.org
|
||||
- Activar plugin
|
||||
- Seguir setup wizard
|
||||
|
||||
2. **Configurar Rank Math**
|
||||
- Seguir guía en SEO-COMPATIBILITY.md
|
||||
- Sección "Rank Math Configuration (Recommended Settings)"
|
||||
|
||||
3. **Conectar Google Search Console**
|
||||
- Dashboard > Rank Math > Search Console
|
||||
- Autorizar conexión
|
||||
|
||||
4. **Enviar Sitemap**
|
||||
- Generar XML Sitemap (automático en Rank Math)
|
||||
- Enviar a Google Search Console
|
||||
|
||||
5. **Monitorear**
|
||||
- Usar Search Console para monitorear indexación
|
||||
- Verificar Core Web Vitals
|
||||
- Revisar Search Appearance
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [x] functions.php tiene add_theme_support('title-tag')
|
||||
- [x] header.php no tiene meta tags duplicados
|
||||
- [x] inc/seo.php creado con función apus_remove_generator()
|
||||
- [x] inc/seo.php incluido en functions.php
|
||||
- [x] Detección de Rank Math implementada
|
||||
- [x] Schema fallback funcional
|
||||
- [x] SEO-COMPATIBILITY.md documentación completa
|
||||
- [x] Verificación de git status
|
||||
- [x] Commit creado exitosamente
|
||||
|
||||
---
|
||||
|
||||
## Conclusión
|
||||
|
||||
**Issue #19 ha sido COMPLETADA exitosamente.**
|
||||
|
||||
El tema Apus Theme ahora está completamente optimizado para SEO y totalmente compatible con Rank Math. La configuración implementada:
|
||||
|
||||
1. **No interfiere** con Rank Math en ningún aspecto
|
||||
2. **Proporciona fallbacks** seguros cuando Rank Math no está activo
|
||||
3. **Implementa optimizaciones** que complementan Rank Math
|
||||
4. **Incluye documentación** clara para implementación y troubleshooting
|
||||
|
||||
El sitio está listo para ser configurado con Rank Math siguiendo la guía incluida en `SEO-COMPATIBILITY.md`.
|
||||
|
||||
---
|
||||
|
||||
**Documentación completa disponible en:**
|
||||
- `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\SEO-COMPATIBILITY.md`
|
||||
|
||||
**Código SEO disponible en:**
|
||||
- `D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\inc\seo.php`
|
||||
@@ -1,402 +0,0 @@
|
||||
# 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:**
|
||||
|
||||
```html
|
||||
<!-- 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">×</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
|
||||
1. **System fonts por defecto:** Cero network requests para fuentes
|
||||
2. **Font-display: swap:** Previene FOIT (Flash of Invisible Text)
|
||||
3. **CSS Custom Properties:** Fácil theming sin recompilación
|
||||
4. **Deferred JavaScript:** Scripts con strategy: defer
|
||||
5. **Passive scroll listeners:** Mejor scroll performance
|
||||
6. **GPU accelerated animations:** CSS transforms en lugar de position
|
||||
7. **Sticky header:** CSS puro, sin JavaScript positioning
|
||||
|
||||
### Accessibility Features
|
||||
1. **WCAG AA Compliant:**
|
||||
- Touch targets 44x44px mínimo
|
||||
- Color contrast ratios adecuados
|
||||
- Focus indicators visibles (2px outline)
|
||||
|
||||
2. **Keyboard Navigation:**
|
||||
- Tab navigation completa
|
||||
- Focus trap en mobile menu
|
||||
- Escape key para cerrar
|
||||
- Enter/Space para activar
|
||||
|
||||
3. **Screen Reader Support:**
|
||||
- ARIA labels descriptivos
|
||||
- ARIA expanded/hidden states
|
||||
- Screen reader text donde necesario
|
||||
- Semantic HTML (nav, header, button)
|
||||
|
||||
4. **Motor Abilities:**
|
||||
- Prefers-reduced-motion support
|
||||
- Transitions deshabilitables
|
||||
- Large touch targets
|
||||
|
||||
### SEO Benefits
|
||||
1. **Semantic HTML5:** header, nav, main tags
|
||||
2. **Proper heading hierarchy:** h1 solo en homepage
|
||||
3. **Microdata ready:** Schema.org compatible structure
|
||||
4. **Mobile-first:** Responsive desde diseño
|
||||
5. **Fast loading:** System fonts + optimized CSS/JS
|
||||
|
||||
---
|
||||
|
||||
## Cómo Usar
|
||||
|
||||
### Activar Custom Fonts
|
||||
1. Ir a **Apariencia → Personalizar → Typography**
|
||||
2. Activar "Use Custom Fonts"
|
||||
3. Agregar archivos de fuentes en `assets/fonts/`
|
||||
4. Descomentar @font-face declarations en `fonts.css`
|
||||
5. Configurar estrategia font-display (recomendado: swap)
|
||||
6. Activar "Preload Font Files" para mejor LCP
|
||||
|
||||
### Personalizar Header
|
||||
1. **Logo:** Ir a **Apariencia → Personalizar → Identidad del sitio**
|
||||
2. **Menú:** Ir a **Apariencia → Menús** y asignar a "Primary Menu"
|
||||
3. **Colores:** Modificar CSS custom properties en `style.css`:
|
||||
```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
|
||||
- [x] Header sticky funciona al hacer scroll
|
||||
- [x] Logo/site title visible y clickeable
|
||||
- [x] Desktop menu visible en pantallas ≥768px
|
||||
- [x] Mobile hamburger visible en pantallas <768px
|
||||
- [x] Mobile menu abre/cierra correctamente
|
||||
- [x] Overlay visible cuando menu abierto
|
||||
- [x] Body scroll locked cuando menu abierto
|
||||
- [x] Menu cierra con Escape
|
||||
- [x] Menu cierra al click en overlay
|
||||
- [x] Menu cierra al click en link
|
||||
|
||||
### Accesibilidad
|
||||
- [x] Navegación por teclado (Tab/Shift+Tab)
|
||||
- [x] Focus visible en todos los elementos
|
||||
- [x] ARIA attributes correctos
|
||||
- [x] Screen reader text presente
|
||||
- [x] Touch targets ≥44x44px
|
||||
- [x] Prefers-reduced-motion respetado
|
||||
|
||||
### Performance
|
||||
- [x] CSS y JS se cargan con defer
|
||||
- [x] System fonts por defecto (0 network requests)
|
||||
- [x] Smooth scroll respeta reduced motion
|
||||
- [x] No layout shifts (CLS optimizado)
|
||||
- [x] Header sticky con CSS puro
|
||||
|
||||
### Responsive
|
||||
- [x] Mobile (<768px): hamburger menu
|
||||
- [x] Tablet (≥768px): desktop nav
|
||||
- [x] Desktop (≥1024px): spacing mejorado
|
||||
- [x] 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
|
||||
|
||||
1. **Testing en dispositivos reales:** Probar en móviles y tablets
|
||||
2. **Agregar fuentes personalizadas:** Si se desea, agregar archivos WOFF2
|
||||
3. **Customizar colores:** Ajustar variables CSS según branding
|
||||
4. **Agregar submenu styling:** Si se usan menus multinivel
|
||||
5. **Performance testing:** Lighthouse audit en Chrome DevTools
|
||||
6. **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
|
||||
@@ -1,227 +0,0 @@
|
||||
# Quick Start Guide - Theme Options Panel
|
||||
|
||||
## 🚀 Getting Started in 3 Steps
|
||||
|
||||
### Step 1: Access the Panel
|
||||
1. Log in to WordPress admin
|
||||
2. Go to **Appearance > Theme Options**
|
||||
3. You'll see 5 tabs: General, Content, Performance, Related Posts, Advanced
|
||||
|
||||
### Step 2: Configure Your Settings
|
||||
Start with the **General** tab:
|
||||
- Upload your logo (recommended size: 200x60px)
|
||||
- Upload favicon (recommended size: 32x32px)
|
||||
- Enable breadcrumbs if desired
|
||||
- Add your social media links
|
||||
|
||||
### Step 3: Save
|
||||
Click **"Save All Settings"** at the bottom
|
||||
|
||||
That's it! Your theme is now configured.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Most Common Settings
|
||||
|
||||
### Logo and Branding
|
||||
```
|
||||
Tab: General
|
||||
• Site Logo: Upload your logo image
|
||||
• Site Favicon: Upload your favicon
|
||||
• Copyright Text: Edit footer copyright
|
||||
```
|
||||
|
||||
### Content Display
|
||||
```
|
||||
Tab: Content
|
||||
• Excerpt Length: 55 (default)
|
||||
• Show Featured Image: ON
|
||||
• Show Author Box: ON
|
||||
• Enable Comments on Posts: ON
|
||||
```
|
||||
|
||||
### Performance
|
||||
```
|
||||
Tab: Performance
|
||||
• Enable Lazy Loading: ON (recommended)
|
||||
• Remove Emoji Scripts: ON (recommended)
|
||||
• Remove Dashicons: ON (recommended)
|
||||
```
|
||||
|
||||
### Related Posts
|
||||
```
|
||||
Tab: Related Posts
|
||||
• Enable Related Posts: ON
|
||||
• Number of Posts: 3
|
||||
• Relate By: Category
|
||||
• Columns: 3
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 Quick Tips
|
||||
|
||||
### 1. Export Your Settings
|
||||
Before making changes, export your current settings:
|
||||
- Click "Export Options" button
|
||||
- A JSON file will download
|
||||
- Keep this as backup
|
||||
|
||||
### 2. Test Before Going Live
|
||||
- Make changes
|
||||
- Save
|
||||
- Check front-end
|
||||
- If something breaks, import your backup
|
||||
|
||||
### 3. Use Reset with Caution
|
||||
- "Reset to Defaults" will erase ALL settings
|
||||
- Always export before resetting
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Using Options in Your Templates
|
||||
|
||||
### Get Any Option
|
||||
```php
|
||||
$value = apus_get_option('option_name', 'default_value');
|
||||
```
|
||||
|
||||
### Check if Enabled
|
||||
```php
|
||||
if (apus_is_option_enabled('enable_breadcrumbs')) {
|
||||
// Do something
|
||||
}
|
||||
```
|
||||
|
||||
### Common Examples
|
||||
```php
|
||||
// Logo
|
||||
$logo_url = apus_get_logo_url();
|
||||
|
||||
// Breadcrumbs
|
||||
if (apus_show_breadcrumbs()) {
|
||||
$separator = apus_get_breadcrumb_separator();
|
||||
}
|
||||
|
||||
// Related Posts
|
||||
if (apus_show_related_posts()) {
|
||||
$count = apus_get_related_posts_count();
|
||||
}
|
||||
|
||||
// Social Links
|
||||
$social_links = apus_get_social_links();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Recommended Initial Configuration
|
||||
|
||||
### For a Blog
|
||||
```
|
||||
General:
|
||||
✅ Enable Breadcrumbs
|
||||
✅ Add social media links
|
||||
|
||||
Content:
|
||||
✅ Show Featured Image: ON
|
||||
✅ Show Author Box: ON
|
||||
✅ Comments on Posts: ON
|
||||
✅ Excerpt Length: 55
|
||||
|
||||
Performance:
|
||||
✅ Lazy Loading: ON
|
||||
✅ Remove Emoji: ON
|
||||
✅ Remove Dashicons: ON
|
||||
|
||||
Related Posts:
|
||||
✅ Enable: ON
|
||||
✅ Count: 3
|
||||
✅ Taxonomy: Category
|
||||
```
|
||||
|
||||
### For a Portfolio Site
|
||||
```
|
||||
General:
|
||||
✅ Enable Breadcrumbs
|
||||
✅ Add social media links
|
||||
|
||||
Content:
|
||||
✅ Show Featured Image: ON
|
||||
✅ Show Author Box: OFF
|
||||
✅ Comments on Posts: OFF
|
||||
✅ Comments on Pages: OFF
|
||||
|
||||
Performance:
|
||||
✅ Lazy Loading: ON
|
||||
✅ Remove Emoji: ON
|
||||
|
||||
Related Posts:
|
||||
⬜ Enable: OFF
|
||||
```
|
||||
|
||||
### For a Business Site
|
||||
```
|
||||
General:
|
||||
✅ Upload Logo
|
||||
✅ Update Copyright
|
||||
✅ Add social links
|
||||
|
||||
Content:
|
||||
✅ Comments on Posts: OFF
|
||||
✅ Comments on Pages: OFF
|
||||
✅ Layout: No Sidebar
|
||||
|
||||
Performance:
|
||||
✅ All optimizations: ON
|
||||
|
||||
Related Posts:
|
||||
⬜ Enable: OFF
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Troubleshooting
|
||||
|
||||
### Settings Not Saving
|
||||
1. Check you're logged in as admin
|
||||
2. Check browser console for errors (F12)
|
||||
3. Refresh the page and try again
|
||||
|
||||
### Images Not Uploading
|
||||
1. Check PHP upload_max_filesize (should be at least 8MB)
|
||||
2. Try a smaller image
|
||||
3. Check file permissions
|
||||
|
||||
### Changes Not Showing on Site
|
||||
1. Clear browser cache (Ctrl+F5)
|
||||
2. Clear WordPress cache if using cache plugin
|
||||
3. Check if you saved the settings
|
||||
|
||||
---
|
||||
|
||||
## 📚 Need More Help?
|
||||
|
||||
See detailed documentation:
|
||||
- **inc/admin/README.md** - Complete technical documentation
|
||||
- **inc/admin/USAGE-EXAMPLES.php** - 20 code examples
|
||||
- **inc/admin/TEST-CHECKLIST.md** - Testing guide
|
||||
- **ISSUE-14-COMPLETION-REPORT.md** - Full feature list
|
||||
|
||||
---
|
||||
|
||||
## 🆘 Support
|
||||
|
||||
For issues or questions:
|
||||
1. Check browser console for JavaScript errors (F12)
|
||||
2. Check WordPress debug.log for PHP errors
|
||||
3. Review the documentation files above
|
||||
4. Check TEST-CHECKLIST.md for common issues
|
||||
|
||||
---
|
||||
|
||||
**Remember:** Always export your settings before making major changes!
|
||||
|
||||
**Quick Access:** Appearance > Theme Options
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Last Updated:** 2025-11-03
|
||||
@@ -1,314 +0,0 @@
|
||||
# Apus Theme - Options Panel
|
||||
|
||||
Complete theme options panel for WordPress admin. Centralizes all theme settings in one modern, user-friendly interface.
|
||||
|
||||
## 🎯 Quick Access
|
||||
|
||||
**WordPress Admin:** `Appearance > Theme Options`
|
||||
|
||||
## 📦 What's Included
|
||||
|
||||
### Core Files (4)
|
||||
- `inc/theme-options-helpers.php` - Helper functions library (30+ functions)
|
||||
- `inc/admin/theme-options.php` - Admin menu and AJAX handlers
|
||||
- `inc/admin/options-api.php` - Settings API implementation
|
||||
- `inc/admin/options-page-template.php` - Complete HTML interface
|
||||
|
||||
### Assets (2)
|
||||
- `assets/admin/css/theme-options.css` - Modern styling
|
||||
- `assets/admin/js/theme-options.js` - Interactive functionality
|
||||
|
||||
### Documentation (6)
|
||||
- `README-THEME-OPTIONS.md` - This file
|
||||
- `QUICK-START-OPTIONS-PANEL.md` - Quick start guide
|
||||
- `THEME-OPTIONS-STRUCTURE.txt` - Visual structure
|
||||
- `ISSUE-14-COMPLETION-REPORT.md` - Complete project report
|
||||
- `inc/admin/README.md` - Technical documentation
|
||||
- `inc/admin/USAGE-EXAMPLES.php` - Code examples
|
||||
- `inc/admin/TEST-CHECKLIST.md` - Testing guide
|
||||
|
||||
## ✨ Features
|
||||
|
||||
### 5 Organized Tabs
|
||||
1. **General** - Logo, branding, breadcrumbs, social media
|
||||
2. **Content** - Posts, pages, excerpts, layouts
|
||||
3. **Performance** - Optimizations, lazy loading, script removal
|
||||
4. **Related Posts** - Configuration for related posts display
|
||||
5. **Advanced** - Custom CSS/JS
|
||||
|
||||
### Special Functions
|
||||
- ✅ Import/Export settings (JSON)
|
||||
- ✅ Reset to defaults
|
||||
- ✅ Image upload via Media Library
|
||||
- ✅ Live validation
|
||||
- ✅ Tab navigation with URL hash
|
||||
- ✅ Responsive design
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### 1. Access
|
||||
```
|
||||
WordPress Admin > Appearance > Theme Options
|
||||
```
|
||||
|
||||
### 2. Configure
|
||||
Navigate through tabs and set your preferences
|
||||
|
||||
### 3. Use in Templates
|
||||
```php
|
||||
// Get logo
|
||||
$logo_url = apus_get_logo_url();
|
||||
|
||||
// Check breadcrumbs
|
||||
if (apus_show_breadcrumbs()) {
|
||||
$separator = apus_get_breadcrumb_separator();
|
||||
}
|
||||
|
||||
// Related posts
|
||||
if (apus_show_related_posts()) {
|
||||
$count = apus_get_related_posts_count();
|
||||
}
|
||||
```
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
### For Users
|
||||
- **QUICK-START-OPTIONS-PANEL.md** - Get started in 3 steps
|
||||
|
||||
### For Developers
|
||||
- **inc/admin/README.md** - Complete technical guide
|
||||
- **inc/admin/USAGE-EXAMPLES.php** - 20 practical examples
|
||||
- **THEME-OPTIONS-STRUCTURE.txt** - Visual structure overview
|
||||
|
||||
### For Testers
|
||||
- **inc/admin/TEST-CHECKLIST.md** - 200+ test points
|
||||
|
||||
### For Project Managers
|
||||
- **ISSUE-14-COMPLETION-REPORT.md** - Full project documentation
|
||||
|
||||
## 🔒 Security
|
||||
|
||||
- ✅ Nonce verification on all AJAX calls
|
||||
- ✅ Capability checks (`manage_options`)
|
||||
- ✅ Input sanitization (type-specific)
|
||||
- ✅ Output escaping
|
||||
- ✅ CSRF protection
|
||||
- ✅ XSS prevention
|
||||
|
||||
## ⚡ Performance
|
||||
|
||||
- Assets load only on options page
|
||||
- Minimal DOM manipulation
|
||||
- Optimized AJAX calls
|
||||
- Responsive images
|
||||
- CSS: 8.1KB, JS: 16KB (unminified)
|
||||
|
||||
## ♿ Accessibility
|
||||
|
||||
- WCAG 2.1 Level AA compliant
|
||||
- Full keyboard navigation
|
||||
- Screen reader support
|
||||
- Visible focus indicators
|
||||
- Proper ARIA attributes
|
||||
|
||||
## 🌐 Compatibility
|
||||
|
||||
- WordPress 6.0+
|
||||
- PHP 8.0+
|
||||
- All modern browsers
|
||||
- Fully responsive
|
||||
|
||||
## 📊 Statistics
|
||||
|
||||
- **Total Options:** 39+
|
||||
- **Helper Functions:** 30+
|
||||
- **Lines of Code:** 3,052+
|
||||
- **Files Created:** 12
|
||||
- **Tabs:** 5
|
||||
|
||||
## 🎨 Usage Examples
|
||||
|
||||
### Display Logo in Header
|
||||
```php
|
||||
<?php
|
||||
$logo_url = apus_get_logo_url();
|
||||
if ($logo_url) {
|
||||
?>
|
||||
<a href="<?php echo home_url('/'); ?>" class="logo">
|
||||
<img src="<?php echo esc_url($logo_url); ?>"
|
||||
alt="<?php bloginfo('name'); ?>" />
|
||||
</a>
|
||||
<?php
|
||||
} else {
|
||||
bloginfo('name');
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
### Show Breadcrumbs
|
||||
```php
|
||||
<?php
|
||||
if (apus_show_breadcrumbs() && !is_front_page()) {
|
||||
$separator = apus_get_breadcrumb_separator();
|
||||
// Your breadcrumb code here
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
### Display Related Posts
|
||||
```php
|
||||
<?php
|
||||
if (is_single() && apus_show_related_posts()) {
|
||||
$count = apus_get_related_posts_count();
|
||||
$title = apus_get_related_posts_title();
|
||||
// Your related posts code here
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
### Check Performance Options
|
||||
```php
|
||||
<?php
|
||||
if (apus_is_performance_enabled('remove_emoji')) {
|
||||
// Emoji scripts will be removed
|
||||
}
|
||||
|
||||
if (apus_is_lazy_loading_enabled()) {
|
||||
// Images will have lazy loading
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
## 🛠️ Available Helper Functions
|
||||
|
||||
### General
|
||||
- `apus_get_option($name, $default)`
|
||||
- `apus_is_option_enabled($name)`
|
||||
- `apus_get_all_options()`
|
||||
|
||||
### Logo & Branding
|
||||
- `apus_get_logo_url()`
|
||||
- `apus_get_favicon_url()`
|
||||
- `apus_get_copyright_text()`
|
||||
|
||||
### Breadcrumbs
|
||||
- `apus_show_breadcrumbs()`
|
||||
- `apus_get_breadcrumb_separator()`
|
||||
|
||||
### Content
|
||||
- `apus_get_excerpt_length()`
|
||||
- `apus_get_excerpt_more()`
|
||||
- `apus_show_featured_image_single()`
|
||||
- `apus_show_author_box()`
|
||||
|
||||
### Related Posts
|
||||
- `apus_show_related_posts()`
|
||||
- `apus_get_related_posts_count()`
|
||||
- `apus_get_related_posts_taxonomy()`
|
||||
- `apus_get_related_posts_title()`
|
||||
|
||||
### Social Media
|
||||
- `apus_get_social_links()`
|
||||
|
||||
### Performance
|
||||
- `apus_is_lazy_loading_enabled()`
|
||||
- `apus_is_performance_enabled($name)`
|
||||
|
||||
### Advanced
|
||||
- `apus_get_custom_css()`
|
||||
- `apus_get_custom_js_header()`
|
||||
- `apus_get_custom_js_footer()`
|
||||
|
||||
See **inc/admin/README.md** for complete function list.
|
||||
|
||||
## 📝 Options List
|
||||
|
||||
### General Tab (12)
|
||||
- Site Logo, Favicon
|
||||
- Breadcrumbs, Separator
|
||||
- Date/Time Format
|
||||
- Copyright Text
|
||||
- Social Media (5 networks)
|
||||
|
||||
### Content Tab (12)
|
||||
- Excerpt Length/More
|
||||
- Post/Page Layouts
|
||||
- Archive Settings
|
||||
- Featured Image
|
||||
- Author Box
|
||||
- Comments
|
||||
- Post Meta/Tags/Categories
|
||||
|
||||
### Performance Tab (7)
|
||||
- Lazy Loading
|
||||
- Remove Emoji/Embeds/Dashicons
|
||||
- Defer JS
|
||||
- Minify HTML
|
||||
- Disable Gutenberg
|
||||
|
||||
### Related Posts Tab (5)
|
||||
- Enable/Count
|
||||
- Taxonomy
|
||||
- Title/Columns
|
||||
|
||||
### Advanced Tab (3)
|
||||
- Custom CSS
|
||||
- Custom JS (Header/Footer)
|
||||
|
||||
## 🔄 Import/Export
|
||||
|
||||
### Export
|
||||
1. Click "Export Options"
|
||||
2. JSON file downloads
|
||||
3. Save for backup
|
||||
|
||||
### Import
|
||||
1. Click "Import Options"
|
||||
2. Paste JSON
|
||||
3. Click "Import"
|
||||
4. Settings restored
|
||||
|
||||
## 🔄 Reset
|
||||
|
||||
Click "Reset to Defaults" to restore all options to default values.
|
||||
**Warning:** This cannot be undone. Export first!
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Settings Not Saving
|
||||
- Check admin permissions
|
||||
- Check browser console (F12)
|
||||
- Clear cache
|
||||
|
||||
### Images Not Uploading
|
||||
- Check file size
|
||||
- Check file permissions
|
||||
- Try different format
|
||||
|
||||
### Changes Not Visible
|
||||
- Clear browser cache
|
||||
- Clear WordPress cache
|
||||
- Hard refresh (Ctrl+F5)
|
||||
|
||||
## 📞 Support
|
||||
|
||||
1. Check **QUICK-START-OPTIONS-PANEL.md**
|
||||
2. Review **inc/admin/README.md**
|
||||
3. See **inc/admin/USAGE-EXAMPLES.php**
|
||||
4. Check **inc/admin/TEST-CHECKLIST.md**
|
||||
|
||||
## 📄 License
|
||||
|
||||
Part of Apus Theme. All rights reserved.
|
||||
|
||||
## 👥 Credits
|
||||
|
||||
Developed for Apus Theme v1.0.0
|
||||
|
||||
---
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Last Updated:** 2025-11-03
|
||||
**Status:** Production Ready ✅
|
||||
|
||||
For complete documentation, see all README files in the theme directory.
|
||||
@@ -1,740 +0,0 @@
|
||||
# Apus Theme - Tema WordPress Profesional
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Author:** Apus Development Team
|
||||
**License:** GPL v2 or later
|
||||
**WordPress Version Required:** 6.0 o superior
|
||||
**PHP Version Required:** 8.0 o superior
|
||||
|
||||
## Descripción
|
||||
|
||||
Apus Theme es un tema WordPress moderno, ligero y altamente optimizado para rendimiento, diseñado específicamente para el proyecto de Análisis de Precios Unitarios. Construido con las mejores prácticas de WordPress, ofrece una base sólida para sitios web profesionales con enfoque en SEO, accesibilidad y velocidad de carga.
|
||||
|
||||
El tema está desarrollado con HTML5 semántico, Bootstrap 5.3, y optimizaciones avanzadas de rendimiento incluyendo lazy loading, resource hints, minimización de assets y carga condicional de recursos.
|
||||
|
||||
## Características Principales
|
||||
|
||||
### Rendimiento y Optimización (Issues #1, #2, #3, #9, #11)
|
||||
|
||||
#### Core Web Vitals Optimizados
|
||||
- **Lazy Loading Nativo**: Carga diferida de imágenes y iframes
|
||||
- **Resource Hints**: Precarga y preconexión de recursos críticos (dns-prefetch, preconnect, preload)
|
||||
- **Asset Optimization**: Minimización y combinación de CSS/JS
|
||||
- **Cache-Control Headers**: Configuración optimizada de caché
|
||||
- **Critical CSS Inline**: Estilos críticos en línea para primera carga
|
||||
- **Sin jQuery**: JavaScript vanilla para mejor rendimiento
|
||||
- **Defer de Scripts**: Carga diferida de scripts no críticos
|
||||
- **WebP Support**: Soporte para imágenes WebP modernas
|
||||
- **Módulo de Optimización de Imágenes** (inc/image-optimization.php):
|
||||
- Conversión automática a WebP
|
||||
- Lazy loading condicional
|
||||
- Compression inteligente
|
||||
- Generación de srcset responsive
|
||||
|
||||
#### Gestión de Fuentes (Issue #12)
|
||||
- **Sistema de fuentes flexible** via Customizer
|
||||
- Opciones: System Fonts, Google Fonts, Bunny Fonts (GDPR-compliant)
|
||||
- **font-display: swap** para mejor rendimiento
|
||||
- Preconnect automático a CDN de fuentes
|
||||
- Configuración de fuentes para headings y body por separado
|
||||
|
||||
#### Carga Condicional de AdSense (Issue #9)
|
||||
- **AdSense Delay Load**: Carga diferida de anuncios después de interacción del usuario
|
||||
- Mejora LCP (Largest Contentful Paint)
|
||||
- Configuración via Theme Options
|
||||
- Script optimizado para mejor UX
|
||||
|
||||
### SEO y Marketing (Issues #2, #3, #18, #19)
|
||||
|
||||
#### SEO Avanzado
|
||||
- **100% Compatible con Rank Math SEO**: Soporte completo para meta tags y schema
|
||||
- **HTML5 Semántico**: Markup estructurado para mejor indexación
|
||||
- **Open Graph Ready**: Meta tags para redes sociales
|
||||
- **Schema.org Markup**: Datos estructurados integrados
|
||||
- **Title Tag Support**: WordPress maneja los títulos automáticamente
|
||||
- **Breadcrumbs Ready**: Preparado para migas de pan
|
||||
- **Canonical URLs**: URLs canónicas automáticas
|
||||
- **No meta tags duplicados**: Compatible con plugins SEO
|
||||
|
||||
#### Table of Contents (TOC) - Issue #18
|
||||
- **Generación automática de tabla de contenidos** para posts
|
||||
- Sticky sidebar con scroll suave
|
||||
- Configuración via Theme Options:
|
||||
- Activar/desactivar globalmente
|
||||
- Posición (arriba/sidebar)
|
||||
- Número mínimo de headings
|
||||
- Profundidad de headings (H2-H6)
|
||||
- Smooth scroll a secciones
|
||||
- Indicador de progreso visual
|
||||
|
||||
#### Posts Relacionados - Issue #19
|
||||
- **Sistema inteligente de posts relacionados**
|
||||
- Basado en categorías compartidas
|
||||
- Configuración completa via Theme Options:
|
||||
- Activar/desactivar
|
||||
- Número de posts a mostrar
|
||||
- Título personalizable
|
||||
- Orden (fecha, aleatorio, más comentados)
|
||||
- Grid responsive
|
||||
- Thumbnails optimizados
|
||||
- Cache de queries para mejor rendimiento
|
||||
|
||||
### Diseño y UX (Issues #4, #5, #6, #7, #8, #10, #13, #14, #16)
|
||||
|
||||
#### Framework y Estructura
|
||||
- **Bootstrap 5.3**: Framework CSS moderno y ligero
|
||||
- **Mobile-First**: Diseño optimizado para móviles
|
||||
- **Responsive Design**: Adaptable a todos los dispositivos
|
||||
- **Grid System**: Sistema de grilla flexible
|
||||
- **Modular CSS**: Archivos CSS organizados por funcionalidad:
|
||||
- accessibility.css
|
||||
- animations.css
|
||||
- footer.css
|
||||
- header.css
|
||||
- related-posts.css
|
||||
- responsive.css
|
||||
- theme.css
|
||||
- toc.css
|
||||
- utilities.css
|
||||
|
||||
#### Header y Navegación (Issues #4, #8)
|
||||
- **Header sticky optimizado** con transición suave
|
||||
- Menú responsive con hamburger menu
|
||||
- Skip-to-content link para accesibilidad
|
||||
- Logo personalizable via Customizer
|
||||
- Búsqueda integrada en menú
|
||||
- Navegación con ARIA labels
|
||||
- Animaciones suaves de scroll
|
||||
- JavaScript modularizado (assets/js/header.js)
|
||||
|
||||
#### Footer (Issue #5)
|
||||
- **Footer profesional de 4 columnas**
|
||||
- 4 áreas de widgets configurables
|
||||
- Menú footer (1 nivel)
|
||||
- Copyright dinámico
|
||||
- Links de privacidad y términos
|
||||
- Grid responsive (se adapta a mobile)
|
||||
- Estilos dedicados (assets/css/footer.css)
|
||||
|
||||
#### Sidebar (Issue #6)
|
||||
- **Sidebar modular** con área de widgets
|
||||
- Sticky sidebar en desktop
|
||||
- Se oculta en mobile para mejor UX
|
||||
- Compatible con todos los widgets de WordPress
|
||||
- Widget-ready con clases Bootstrap
|
||||
|
||||
#### Single Post Template (Issue #7)
|
||||
- **Template optimizado para contenido**
|
||||
- Featured image con lazy loading
|
||||
- Categorías con badges de colores
|
||||
- Meta información completa:
|
||||
- Fecha de publicación
|
||||
- Fecha de última actualización
|
||||
- Autor
|
||||
- Tiempo de lectura estimado
|
||||
- Tags visuales
|
||||
- Navegación entre posts (anterior/siguiente)
|
||||
- Breadcrumbs ready
|
||||
- Schema markup para Article
|
||||
- Comentarios integrados
|
||||
|
||||
#### Archive Templates (Issue #10)
|
||||
- **Templates para archivos optimizados**
|
||||
- Títulos dinámicos según tipo de archivo
|
||||
- Descripciones de categorías/tags
|
||||
- Grid de posts con thumbnails
|
||||
- Excerpts automáticos
|
||||
- Read more links
|
||||
- Paginación estilizada
|
||||
- Meta info en cada post
|
||||
|
||||
#### 404 Error Page (Issue #13)
|
||||
- **Página 404 profesional y útil**
|
||||
- Mensaje claro de error
|
||||
- Sugerencias de navegación
|
||||
- Lista de posts recientes
|
||||
- Lista de categorías con conteo
|
||||
- Formulario de búsqueda
|
||||
- Links útiles
|
||||
- Diseño amigable
|
||||
|
||||
#### Search Results (Issue #14)
|
||||
- **Resultados de búsqueda optimizados**
|
||||
- Contador de resultados
|
||||
- Highlight de términos buscados
|
||||
- Grid de resultados con thumbnails
|
||||
- Excerpts con contexto
|
||||
- Mensaje cuando no hay resultados
|
||||
- Sugerencias alternativas
|
||||
- Paginación de resultados
|
||||
|
||||
#### Comments System (Issue #16)
|
||||
- **Sistema de comentarios mejorado**
|
||||
- Formulario responsive
|
||||
- Campos optimizados
|
||||
- Validación HTML5
|
||||
- Respuestas anidadas (threaded comments)
|
||||
- Avatar support
|
||||
- Moderación de comentarios
|
||||
- Anti-spam ready
|
||||
|
||||
### Accesibilidad (Issue #3)
|
||||
|
||||
#### WCAG 2.1 AA Compliant
|
||||
- **Contrastes de color óptimos** (mínimo 4.5:1)
|
||||
- **Skip-to-content link** visible al recibir focus
|
||||
- **ARIA labels** en navegación y widgets
|
||||
- **Screen reader text** para elementos visuales
|
||||
- **role attributes** semánticos en toda la estructura
|
||||
- **Keyboard navigation** completamente funcional
|
||||
- **Focus states** visibles en todos los elementos interactivos
|
||||
- **Alt text** automático en imágenes
|
||||
- **Semantic HTML5**: nav, header, footer, main, article, aside
|
||||
- Estilos dedicados (assets/css/accessibility.css)
|
||||
|
||||
### Panel de Opciones del Tema (Issue #15)
|
||||
|
||||
#### Theme Options Completo
|
||||
- **Panel de administración profesional** en Apariencia > Theme Options
|
||||
- **6 Tabs organizadas**:
|
||||
|
||||
##### 1. General Settings
|
||||
- Logo upload
|
||||
- Favicon
|
||||
- Site tagline personalizado
|
||||
- Copyright text
|
||||
- Configuración de timezone
|
||||
|
||||
##### 2. Performance
|
||||
- Lazy loading toggle
|
||||
- Image optimization settings
|
||||
- CSS/JS minification
|
||||
- Cache settings
|
||||
- WebP conversion
|
||||
- AdSense delay load
|
||||
- Resource hints configuration
|
||||
|
||||
##### 3. SEO Settings
|
||||
- Meta description default
|
||||
- Social media handles
|
||||
- Open Graph defaults
|
||||
- Schema.org settings
|
||||
- Breadcrumbs enable/disable
|
||||
- Canonical URLs
|
||||
|
||||
##### 4. Typography
|
||||
- Google Fonts integration
|
||||
- Bunny Fonts (GDPR-compliant)
|
||||
- System fonts
|
||||
- Font family para headings
|
||||
- Font family para body
|
||||
- Font sizes
|
||||
- Line heights
|
||||
- Font weights
|
||||
|
||||
##### 5. Content Settings
|
||||
- Table of Contents (TOC):
|
||||
- Enable/disable
|
||||
- Posición
|
||||
- Mínimo de headings
|
||||
- Profundidad de headings
|
||||
- Related Posts:
|
||||
- Enable/disable
|
||||
- Número de posts
|
||||
- Título personalizado
|
||||
- Orden
|
||||
- Excerpt length
|
||||
- Read more text
|
||||
- Featured images en archives
|
||||
- Author bio display
|
||||
|
||||
##### 6. Advanced
|
||||
- Custom CSS
|
||||
- Custom JavaScript
|
||||
- Header scripts
|
||||
- Footer scripts
|
||||
- Google Analytics ID
|
||||
- Facebook Pixel
|
||||
- Custom tracking codes
|
||||
|
||||
#### Características del Panel
|
||||
- **Save Settings** con AJAX
|
||||
- **Reset to Defaults** con confirmación
|
||||
- **Import/Export** settings
|
||||
- **Visual feedback** de guardado
|
||||
- **Validación de campos**
|
||||
- **Color pickers** integrados
|
||||
- **Media uploader** de WordPress
|
||||
- **Code editors** con syntax highlighting
|
||||
- **Help tooltips** en opciones complejas
|
||||
|
||||
### Funcionalidad WordPress (Issues #1, #6, #17)
|
||||
|
||||
#### Theme Support
|
||||
- **add_theme_support('title-tag')**: Títulos dinámicos
|
||||
- **add_theme_support('post-thumbnails')**: Imágenes destacadas
|
||||
- **add_theme_support('html5')**: Markup HTML5 semántico
|
||||
- **add_theme_support('automatic-feed-links')**: RSS feeds automáticos
|
||||
- **add_theme_support('custom-logo')**: Logo personalizable
|
||||
- **add_theme_support('customize-selective-refresh-widgets')**: Refresh de widgets
|
||||
|
||||
#### Tamaños de Imagen Personalizados
|
||||
- `apus-thumbnail`: 400x300px (crop)
|
||||
- `apus-medium`: 800x600px (crop)
|
||||
- `apus-large`: 1200x900px (crop)
|
||||
- `apus-featured-large`: 1200x600px (crop)
|
||||
- `apus-featured-medium`: 800x400px (crop)
|
||||
|
||||
#### Menús de Navegación
|
||||
- **Primary Menu**: Menú principal del header
|
||||
- **Footer Menu**: Menú en el footer (1 nivel)
|
||||
|
||||
#### Widget Areas
|
||||
- **Primary Sidebar**: Barra lateral principal
|
||||
- **Footer Column 1**: Primera columna del footer
|
||||
- **Footer Column 2**: Segunda columna del footer
|
||||
- **Footer Column 3**: Tercera columna del footer
|
||||
- **Footer Column 4**: Cuarta columna del footer
|
||||
|
||||
#### Internacionalización
|
||||
- **Translation Ready**: Completamente traducible
|
||||
- **Locale español México** (es_MX) por defecto
|
||||
- **Formato de fecha**: d/m/Y
|
||||
- **Text Domain**: apus-theme
|
||||
- **POT file ready** para traducciones
|
||||
|
||||
#### Content Width
|
||||
- 1200px configurable via filter
|
||||
|
||||
### Desarrollo (Issues #1, #15, #17)
|
||||
|
||||
#### Arquitectura Modular
|
||||
- **Código organizado y mantenible**
|
||||
- **WordPress Coding Standards** compliant
|
||||
- **Hooks y Filters** extensibles
|
||||
- **Child Theme Ready**
|
||||
- **No dependencias pesadas**
|
||||
- **Comentarios y documentación** en código
|
||||
|
||||
#### Archivos Inc Modulares
|
||||
- **inc/enqueue-scripts.php**: Sistema de enqueue para CSS/JS
|
||||
- **inc/performance.php**: Optimizaciones de rendimiento
|
||||
- **inc/template-functions.php**: Funciones auxiliares del tema
|
||||
- **inc/template-tags.php**: Template tags personalizados
|
||||
- **inc/seo.php**: Funciones SEO
|
||||
- **inc/image-optimization.php**: Optimización de imágenes
|
||||
- **inc/customizer-fonts.php**: Sistema de fuentes
|
||||
- **inc/featured-image.php**: Gestión de featured images
|
||||
- **inc/category-badge.php**: Badges de categorías
|
||||
- **inc/related-posts.php**: Posts relacionados
|
||||
- **inc/toc.php**: Table of Contents
|
||||
- **inc/adsense-delay.php**: AdSense delay load
|
||||
- **inc/theme-options-helpers.php**: Helpers del panel de opciones
|
||||
- **inc/admin/**: Panel de opciones del tema
|
||||
- theme-options.php
|
||||
- options-api.php
|
||||
- options-page-template.php
|
||||
- related-posts-options.php
|
||||
|
||||
#### Hooks Personalizados
|
||||
```php
|
||||
do_action('apus_before_post_content');
|
||||
do_action('apus_after_post_content');
|
||||
do_action('apus_before_header');
|
||||
do_action('apus_after_header');
|
||||
do_action('apus_before_footer');
|
||||
do_action('apus_after_footer');
|
||||
```
|
||||
|
||||
#### Filters Personalizados
|
||||
```php
|
||||
apply_filters('apus_content_width', 1200);
|
||||
apply_filters('apus_excerpt_length', 55);
|
||||
apply_filters('apus_read_more_text', 'Leer más');
|
||||
apply_filters('apus_footer_columns', 4);
|
||||
```
|
||||
|
||||
## Requisitos del Sistema
|
||||
|
||||
### Requisitos Mínimos
|
||||
- **WordPress**: 6.0 o superior
|
||||
- **PHP**: 8.0 o superior (7.4 funcionará pero no recomendado)
|
||||
- **MySQL**: 5.7 o superior / MariaDB 10.2 o superior
|
||||
- **Memoria PHP**: 128 MB mínimo (256 MB recomendado)
|
||||
- **Espacio en Disco**: 50 MB para el tema
|
||||
- **mod_rewrite**: Habilitado (para permalinks)
|
||||
|
||||
### Requisitos Recomendados
|
||||
- **WordPress**: Última versión estable (6.4+)
|
||||
- **PHP**: 8.1 o superior
|
||||
- **MySQL**: 8.0 o superior / MariaDB 10.5 o superior
|
||||
- **Memoria PHP**: 256 MB o más
|
||||
- **HTTPS**: Certificado SSL instalado
|
||||
- **Opcache**: Habilitado para mejor rendimiento
|
||||
- **Gzip**: Compresión habilitada
|
||||
|
||||
### Compatibilidad de Navegadores
|
||||
- Chrome (últimas 2 versiones)
|
||||
- Firefox (últimas 2 versiones)
|
||||
- Safari (últimas 2 versiones)
|
||||
- Edge (últimas 2 versiones)
|
||||
- Opera (últimas 2 versiones)
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
|
||||
### Plugins Compatibles
|
||||
- **Rank Math SEO**: 100% compatible
|
||||
- **Yoast SEO**: Compatible
|
||||
- **WP Rocket**: Totalmente compatible
|
||||
- **Smush**: Optimización de imágenes
|
||||
- **Contact Form 7**: Formularios
|
||||
- **WPForms**: Formularios
|
||||
- **Google Analytics**: Via Theme Options
|
||||
- **AdSense**: Via Theme Options con delay load
|
||||
|
||||
## Instalación
|
||||
|
||||
### Instalación Estándar
|
||||
|
||||
#### Método 1: Via WordPress Dashboard
|
||||
1. Ve a `Apariencia > Temas > Añadir nuevo`
|
||||
2. Haz clic en "Subir tema"
|
||||
3. Selecciona el archivo ZIP del tema
|
||||
4. Haz clic en "Instalar ahora"
|
||||
5. Activa el tema
|
||||
|
||||
#### Método 2: Via FTP
|
||||
1. Descomprime el archivo ZIP del tema
|
||||
2. Conecta por FTP a tu servidor
|
||||
3. Sube la carpeta `apus-theme` a `/wp-content/themes/`
|
||||
4. Ve a `Apariencia > Temas` en WordPress
|
||||
5. Activa "Apus Theme"
|
||||
|
||||
#### Método 3: Via Git (Desarrollo)
|
||||
```bash
|
||||
cd wp-content/themes/
|
||||
git clone [repository-url] apus-theme
|
||||
```
|
||||
|
||||
### Después de la Instalación
|
||||
|
||||
#### 1. Configurar Permalinks
|
||||
```
|
||||
Ajustes > Enlaces permanentes > Nombre de la entrada
|
||||
```
|
||||
Esto es CRÍTICO para el correcto funcionamiento del tema.
|
||||
|
||||
#### 2. Configurar Lectura
|
||||
```
|
||||
Ajustes > Lectura
|
||||
```
|
||||
- Establece tu página de inicio (estática o últimas entradas)
|
||||
- Configura el número de entradas por página (recomendado: 10-12)
|
||||
|
||||
#### 3. Regenerar Miniaturas (Si tienes contenido existente)
|
||||
```bash
|
||||
# Con WP-CLI
|
||||
wp media regenerate --yes
|
||||
|
||||
# O usa el plugin "Regenerate Thumbnails"
|
||||
```
|
||||
|
||||
## Configuración Inicial
|
||||
|
||||
Ver documentación detallada en [docs/01-initial-setup.md](docs/01-initial-setup.md)
|
||||
|
||||
### Quick Start
|
||||
|
||||
#### 1. Logo del Sitio
|
||||
```
|
||||
Apariencia > Personalizar > Identidad del sitio > Logo
|
||||
```
|
||||
- Tamaño recomendado: 200px de ancho máximo
|
||||
- Formatos: PNG (transparente), SVG, JPG
|
||||
|
||||
#### 2. Menús de Navegación
|
||||
```
|
||||
Apariencia > Menús
|
||||
```
|
||||
- Crea un menú y asígnalo a "Primary Menu"
|
||||
- Opcionalmente crea un menú footer y asígnalo a "Footer Menu"
|
||||
|
||||
#### 3. Widgets
|
||||
```
|
||||
Apariencia > Widgets
|
||||
```
|
||||
- Configura "Primary Sidebar" con widgets
|
||||
- Configura las 4 columnas del footer si deseas
|
||||
|
||||
#### 4. Theme Options
|
||||
```
|
||||
Apariencia > Theme Options
|
||||
```
|
||||
- Configura las opciones básicas de rendimiento
|
||||
- Activa/desactiva TOC y Related Posts
|
||||
- Configura fuentes si deseas cambiar las del sistema
|
||||
- Agrega códigos de tracking (GA, FB Pixel, etc.)
|
||||
|
||||
#### 5. Plugins Recomendados
|
||||
- **Rank Math SEO**: Para SEO completo
|
||||
- **WP Rocket**: Para cache y optimización (opcional pero recomendado)
|
||||
- **Smush**: Para optimización de imágenes
|
||||
- **Contact Form 7**: Para formularios de contacto
|
||||
|
||||
## Estructura de Archivos
|
||||
|
||||
```
|
||||
apus-theme/
|
||||
├── assets/
|
||||
│ ├── css/
|
||||
│ │ ├── accessibility.css # Estilos de accesibilidad
|
||||
│ │ ├── animations.css # Animaciones y transiciones
|
||||
│ │ ├── bootstrap.min.css # Bootstrap 5.3
|
||||
│ │ ├── fonts.css # Sistema de fuentes
|
||||
│ │ ├── footer.css # Estilos del footer
|
||||
│ │ ├── header.css # Estilos del header
|
||||
│ │ ├── print.css # Estilos de impresión
|
||||
│ │ ├── related-posts.css # Posts relacionados
|
||||
│ │ ├── responsive.css # Media queries
|
||||
│ │ ├── theme.css # Estilos principales
|
||||
│ │ ├── toc.css # Table of Contents
|
||||
│ │ └── utilities.css # Utilidades
|
||||
│ ├── js/
|
||||
│ │ ├── adsense-loader.js # Carga diferida de AdSense
|
||||
│ │ ├── bootstrap.bundle.min.js # Bootstrap JS
|
||||
│ │ ├── header.js # Funcionalidad del header
|
||||
│ │ └── toc.js # Table of Contents JS
|
||||
│ └── admin/
|
||||
│ ├── css/
|
||||
│ │ └── theme-options.css # Estilos del panel admin
|
||||
│ └── js/
|
||||
│ └── theme-options.js # JS del panel admin
|
||||
├── inc/
|
||||
│ ├── admin/
|
||||
│ │ ├── options-api.php # API del panel de opciones
|
||||
│ │ ├── options-page-template.php # Template del panel
|
||||
│ │ ├── related-posts-options.php # Opciones de related posts
|
||||
│ │ ├── theme-options.php # Configuración del panel
|
||||
│ │ └── USAGE-EXAMPLES.php # Ejemplos de uso
|
||||
│ ├── adsense-delay.php # AdSense delay load
|
||||
│ ├── category-badge.php # Badges de categorías
|
||||
│ ├── customizer-fonts.php # Sistema de fuentes
|
||||
│ ├── enqueue-scripts.php # Enqueue de assets
|
||||
│ ├── featured-image.php # Gestión de featured images
|
||||
│ ├── image-optimization.php # Optimización de imágenes
|
||||
│ ├── performance.php # Optimizaciones
|
||||
│ ├── related-posts.php # Posts relacionados
|
||||
│ ├── seo.php # Funciones SEO
|
||||
│ ├── template-functions.php # Funciones auxiliares
|
||||
│ ├── template-tags.php # Template tags
|
||||
│ ├── theme-options-helpers.php # Helpers de opciones
|
||||
│ └── toc.php # Table of Contents
|
||||
├── template-parts/
|
||||
│ ├── content.php # Template de contenido
|
||||
│ └── content-none.php # Sin resultados
|
||||
├── languages/
|
||||
│ └── es_MX.po # Traducción español
|
||||
├── docs/
|
||||
│ ├── 01-initial-setup.md # Configuración inicial
|
||||
│ ├── 02-theme-options.md # Guía del panel de opciones
|
||||
│ └── 03-performance-seo.md # Performance y SEO
|
||||
├── 404.php # Página 404
|
||||
├── archive.php # Template de archivos
|
||||
├── comments.php # Sistema de comentarios
|
||||
├── footer.php # Footer del sitio
|
||||
├── front-page.php # Página de inicio
|
||||
├── functions.php # Funciones principales
|
||||
├── header.php # Header del sitio
|
||||
├── index.php # Template principal
|
||||
├── page.php # Template de páginas
|
||||
├── search.php # Resultados de búsqueda
|
||||
├── sidebar.php # Barra lateral
|
||||
├── single.php # Template de entradas
|
||||
├── style.css # Estilos y metadata
|
||||
├── CHANGELOG.md # Historial de cambios
|
||||
├── CREDITS.md # Créditos y licencias
|
||||
├── LICENSE # Licencia GPL v2
|
||||
└── README.md # Este archivo
|
||||
```
|
||||
|
||||
## Documentación Completa
|
||||
|
||||
### Guías Disponibles
|
||||
|
||||
1. **[01-initial-setup.md](docs/01-initial-setup.md)**
|
||||
- Activación del tema paso a paso
|
||||
- Configuración de portada estática
|
||||
- Configuración de menús y widgets
|
||||
- Ajustes básicos recomendados
|
||||
|
||||
2. **[02-theme-options.md](docs/02-theme-options.md)**
|
||||
- Guía completa del panel Theme Options
|
||||
- Explicación de cada tab y opción
|
||||
- Mejores prácticas de configuración
|
||||
|
||||
3. **[03-performance-seo.md](docs/03-performance-seo.md)**
|
||||
- Qué hace el tema por performance
|
||||
- Configuración de Rank Math
|
||||
- Recomendaciones de hosting
|
||||
- Best practices de SEO
|
||||
|
||||
## Personalización
|
||||
|
||||
### Crear un Child Theme
|
||||
|
||||
Para personalizar sin perder cambios en actualizaciones:
|
||||
|
||||
#### 1. Crear Estructura
|
||||
```bash
|
||||
mkdir wp-content/themes/apus-child
|
||||
```
|
||||
|
||||
#### 2. Crear style.css
|
||||
```css
|
||||
/*
|
||||
Theme Name: Apus Child Theme
|
||||
Template: apus-theme
|
||||
Version: 1.0.0
|
||||
*/
|
||||
```
|
||||
|
||||
#### 3. Crear functions.php
|
||||
```php
|
||||
<?php
|
||||
/**
|
||||
* Apus Child Theme Functions
|
||||
*/
|
||||
|
||||
// Enqueue parent styles
|
||||
function apus_child_enqueue_styles() {
|
||||
wp_enqueue_style('apus-parent-style', get_template_directory_uri() . '/style.css');
|
||||
wp_enqueue_style('apus-child-style', get_stylesheet_uri(), array('apus-parent-style'), '1.0.0');
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'apus_child_enqueue_styles');
|
||||
```
|
||||
|
||||
### Hooks Disponibles
|
||||
|
||||
#### Action Hooks
|
||||
```php
|
||||
// Header
|
||||
do_action('apus_before_header');
|
||||
do_action('apus_after_header');
|
||||
|
||||
// Content
|
||||
do_action('apus_before_post_content');
|
||||
do_action('apus_after_post_content');
|
||||
|
||||
// Footer
|
||||
do_action('apus_before_footer');
|
||||
do_action('apus_after_footer');
|
||||
```
|
||||
|
||||
#### Filter Hooks
|
||||
```php
|
||||
// Modificar ancho del contenido
|
||||
add_filter('apus_content_width', function($width) {
|
||||
return 1400;
|
||||
});
|
||||
|
||||
// Modificar longitud del excerpt
|
||||
add_filter('apus_excerpt_length', function($length) {
|
||||
return 80;
|
||||
});
|
||||
|
||||
// Modificar texto "Leer más"
|
||||
add_filter('apus_read_more_text', function($text) {
|
||||
return 'Continuar leyendo';
|
||||
});
|
||||
|
||||
// Modificar columnas del footer
|
||||
add_filter('apus_footer_columns', function($columns) {
|
||||
return 3; // Cambia a 3 columnas
|
||||
});
|
||||
```
|
||||
|
||||
## Soporte y Recursos
|
||||
|
||||
### Documentación
|
||||
- [WordPress Theme Handbook](https://developer.wordpress.org/themes/)
|
||||
- [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.3/)
|
||||
- [Rank Math Documentation](https://rankmath.com/kb/)
|
||||
|
||||
### Reportar Issues
|
||||
Si encuentras algún problema:
|
||||
1. Verifica requisitos mínimos
|
||||
2. Revisa la documentación
|
||||
3. Desactiva otros plugins para descartar conflictos
|
||||
4. Reporta en: [GitHub Issues](https://github.com/tu-repo/apus-theme/issues)
|
||||
|
||||
### Solución de Problemas Comunes
|
||||
|
||||
#### El menú no se muestra
|
||||
- Ve a Apariencia > Menús
|
||||
- Crea un menú y asígnalo a "Primary Menu"
|
||||
|
||||
#### Las imágenes no se ven
|
||||
- Regenera miniaturas con WP-CLI o plugin
|
||||
- Verifica permisos de la carpeta uploads
|
||||
|
||||
#### El tema se ve sin estilos
|
||||
- Verifica que los permalinks estén configurados
|
||||
- Limpia el cache del navegador
|
||||
- Desactiva plugins de optimización temporalmente
|
||||
|
||||
## Créditos
|
||||
|
||||
Ver archivo [CREDITS.md](CREDITS.md) para listado completo.
|
||||
|
||||
### Principales Recursos
|
||||
- **Bootstrap 5.3.0** - MIT License
|
||||
- **WordPress** - GPL v2 or later
|
||||
- **Font Awesome Icons** (si se usa)
|
||||
|
||||
### Desarrollado Por
|
||||
Apus Development Team
|
||||
Proyecto: Análisis de Precios Unitarios
|
||||
Website: https://analisisdepreciosunitarios.com
|
||||
|
||||
## Licencia
|
||||
|
||||
Este tema está licenciado bajo GPL v2 o posterior.
|
||||
|
||||
```
|
||||
Copyright (C) 2024 Apus Development Team
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
```
|
||||
|
||||
Ver el archivo [LICENSE](LICENSE) para más detalles.
|
||||
|
||||
## Changelog
|
||||
|
||||
Ver [CHANGELOG.md](CHANGELOG.md) para el historial completo de cambios y versiones.
|
||||
|
||||
## Roadmap Futuro
|
||||
|
||||
### v1.1.0 (Planificado)
|
||||
- Gutenberg blocks personalizados
|
||||
- Color scheme customizer
|
||||
- Advanced typography options
|
||||
- Page templates adicionales
|
||||
|
||||
### v1.2.0 (Planificado)
|
||||
- WooCommerce support
|
||||
- Mega menu functionality
|
||||
- Advanced footer builder
|
||||
- Dark mode toggle
|
||||
|
||||
---
|
||||
|
||||
**Última actualización:** Noviembre 2024
|
||||
**Versión del documento:** 1.0.0
|
||||
**Issues completados:** #1-#20
|
||||
@@ -1,362 +0,0 @@
|
||||
# SEO Configuration and Rank Math Compatibility Guide
|
||||
|
||||
## Overview
|
||||
|
||||
Apus Theme is fully optimized for SEO and designed to work seamlessly with the Rank Math SEO plugin without any conflicts. This document explains the SEO features built into the theme and how to properly configure Rank Math.
|
||||
|
||||
## Theme SEO Features
|
||||
|
||||
### 1. Title Tag Management (Core)
|
||||
- **Location**: `functions.php`
|
||||
- **Implementation**: `add_theme_support('title-tag');`
|
||||
- **What it does**: Allows WordPress to automatically manage all page titles, ensuring proper format and avoiding duplicates
|
||||
- **SEO Benefit**: Ensures every page has unique, properly formatted titles for search engines
|
||||
|
||||
### 2. Theme Header Optimization
|
||||
- **Location**: `header.php` and `inc/seo.php`
|
||||
- **Features**:
|
||||
- Clean, semantic HTML5 structure
|
||||
- Proper meta tags for viewport and compatibility
|
||||
- No duplicate meta tags
|
||||
- Accessibility-first design with proper aria labels and roles
|
||||
|
||||
### 3. Built-in SEO Optimizations (inc/seo.php)
|
||||
|
||||
#### WordPress Version Hiding
|
||||
```php
|
||||
function apus_remove_generator() - Removes WordPress version from header
|
||||
```
|
||||
- **Why**: Prevents exposure of WordPress version which could reveal vulnerabilities
|
||||
- **SEO Benefit**: Improves security posture (trust signal for search engines)
|
||||
|
||||
#### Removed Unnecessary Headers
|
||||
- **RSD (Really Simple Discovery) Link**: Outdated protocol, not needed
|
||||
- **Windows Live Writer Manifest**: Deprecated service, unnecessary
|
||||
- **REST API Link**: REST API stays enabled but link removed from header
|
||||
|
||||
#### Performance-Related Headers
|
||||
- **Robots.txt Cache Headers**: Ensures search engines cache robots.txt appropriately
|
||||
- **Security Headers**:
|
||||
- `X-Content-Type-Options: nosniff`
|
||||
- `X-Frame-Options: SAMEORIGIN`
|
||||
- `X-XSS-Protection: 1; mode=block`
|
||||
|
||||
#### Schema.org Support
|
||||
- **Fallback Basic Schema**: Only outputs if Rank Math is NOT active
|
||||
- **Organization Schema**: Automatically generates from site settings
|
||||
- **Smart Detection**: Automatically disables when Rank Math is detected
|
||||
|
||||
#### Prefetch Hints
|
||||
- **Google Fonts Preconnect**: Improves page load performance
|
||||
- **External Domain Optimization**: Faster resource loading
|
||||
|
||||
### 4. Image Optimization
|
||||
- **Location**: `inc/image-optimization.php`
|
||||
- **Features**: Lazy loading, proper sizing, responsive images
|
||||
- **Rank Math Integration**: Works with Rank Math's image SEO features
|
||||
|
||||
### 5. Performance Optimizations
|
||||
- **Location**: `inc/performance.php`
|
||||
- **Includes**: Script optimization, CSS optimization
|
||||
- **Core Web Vitals**: Optimized for Google's ranking factors
|
||||
|
||||
## What Rank Math Does
|
||||
|
||||
Rank Math is a comprehensive SEO plugin that handles:
|
||||
|
||||
1. **Meta Tags Management**
|
||||
- Meta Descriptions
|
||||
- Open Graph Tags
|
||||
- Twitter Card Tags
|
||||
- Canonical URLs
|
||||
|
||||
2. **Schema.org Implementation**
|
||||
- Comprehensive structured data for rich snippets
|
||||
- Multiple schema types support
|
||||
- Dynamic schema generation
|
||||
|
||||
3. **Content Analysis**
|
||||
- SEO score for pages/posts
|
||||
- Readability analysis
|
||||
- Keyword optimization suggestions
|
||||
|
||||
4. **XML Sitemaps**
|
||||
- Automatic sitemap generation
|
||||
- News sitemaps
|
||||
- Video sitemaps
|
||||
|
||||
5. **Redirects**
|
||||
- 301 redirects management
|
||||
- URL migration tools
|
||||
|
||||
6. **Search Console Integration**
|
||||
- Direct Google Search Console data integration
|
||||
|
||||
## Rank Math Configuration (Recommended Settings)
|
||||
|
||||
### 1. General Settings
|
||||
```
|
||||
Dashboard > Rank Math > General Settings
|
||||
- Site Title: [Your Site Name]
|
||||
- Tagline: [Your Site Tagline]
|
||||
- Home Page Meta Description: [Your primary description]
|
||||
- Separators: Use " - " or " | " (avoid hyphens in content)
|
||||
```
|
||||
|
||||
### 2. Titles & Meta
|
||||
```
|
||||
Dashboard > Rank Math > Titles & Meta
|
||||
- Post Title: %%title%% - %%sitename%%
|
||||
- Page Title: %%title%% - %%sitename%%
|
||||
- Default Meta Description: [Your default description, 160 chars]
|
||||
- Disable Apus Theme's fallback schema when Rank Math is active
|
||||
```
|
||||
|
||||
### 3. Sitemap Settings
|
||||
```
|
||||
Dashboard > Rank Math > Sitemaps
|
||||
- Enable XML Sitemaps: ON
|
||||
- Include Posts: ON
|
||||
- Include Pages: ON
|
||||
- Include Categories: ON
|
||||
- Include Tags: ON
|
||||
- Exclude: draft posts, password-protected content
|
||||
```
|
||||
|
||||
### 4. Schema.org Settings
|
||||
```
|
||||
Dashboard > Rank Math > Schema > Settings
|
||||
- Organization: Configure with company details
|
||||
- Contact: Add contact information
|
||||
- Local Business (if applicable): Add location, phone, hours
|
||||
- Post Schema: Auto-generated based on content type
|
||||
```
|
||||
|
||||
### 5. Search Console Integration
|
||||
```
|
||||
Dashboard > Rank Math > Search Console
|
||||
- Connect your Google Search Console account
|
||||
- Monitor indexation status
|
||||
- Fix crawl errors
|
||||
- Monitor search query performance
|
||||
```
|
||||
|
||||
### 6. Redirect Manager (if migrating from another theme)
|
||||
```
|
||||
Dashboard > Rank Math > Redirects
|
||||
- Set up 301 redirects for changed URLs
|
||||
- Monitor redirect chains
|
||||
- Keep redirect list clean for performance
|
||||
```
|
||||
|
||||
## How They Work Together
|
||||
|
||||
### No Conflicts
|
||||
|
||||
The Apus Theme is specifically designed to NOT output SEO meta tags when Rank Math is active:
|
||||
|
||||
1. **Title Tags**: WordPress manages via `title-tag` support (works with both)
|
||||
2. **Schema.org**: Theme fallback automatically detects Rank Math and disables
|
||||
3. **Open Graph**: No theme output (Rank Math handles completely)
|
||||
4. **Meta Descriptions**: No theme output (Rank Math handles completely)
|
||||
5. **Canonical URLs**: No theme output (Rank Math handles completely)
|
||||
|
||||
### Smart Detection
|
||||
|
||||
The theme includes detection function:
|
||||
```php
|
||||
function apus_check_rank_math_active() {
|
||||
return defined('RANK_MATH_VERSION');
|
||||
}
|
||||
```
|
||||
|
||||
This ensures theme SEO features integrate properly when Rank Math is active.
|
||||
|
||||
## Header.php Analysis (Clean Check)
|
||||
|
||||
The theme's `header.php` includes:
|
||||
|
||||
### Meta Tags Present (Standard, Non-Duplicating)
|
||||
```html
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="profile" href="https://gmpg.org/xfn/11">
|
||||
```
|
||||
|
||||
### What's Deliberately NOT Included
|
||||
- No meta description (Rank Math handles)
|
||||
- No Open Graph tags (Rank Math handles)
|
||||
- No Twitter Card tags (Rank Math handles)
|
||||
- No canonical URL (Rank Math handles)
|
||||
- No robots meta tag (Rank Math handles)
|
||||
- No generator meta tag (Removed in inc/seo.php)
|
||||
|
||||
This clean approach prevents:
|
||||
- Duplicate meta tags
|
||||
- Conflicting information
|
||||
- Performance overhead
|
||||
- SEO confusion for search engines
|
||||
|
||||
## Theme Functions.php Features
|
||||
|
||||
### 1. Title Tag Support
|
||||
```php
|
||||
add_theme_support('title-tag');
|
||||
```
|
||||
**Status**: ACTIVE
|
||||
**Verification**: Line 30 in functions.php
|
||||
|
||||
### 2. Automatic Feed Links
|
||||
```php
|
||||
add_theme_support('automatic-feed-links');
|
||||
```
|
||||
**Benefits**:
|
||||
- Automatic RSS feed discovery
|
||||
- Better feed integration
|
||||
- Search engine feed indexing
|
||||
|
||||
### 3. HTML5 Markup Support
|
||||
```php
|
||||
add_theme_support('html5', array(
|
||||
'search-form',
|
||||
'comment-form',
|
||||
'comment-list',
|
||||
'gallery',
|
||||
'caption',
|
||||
'style',
|
||||
'script',
|
||||
));
|
||||
```
|
||||
**SEO Benefit**: Modern semantic HTML5 structure is better for search engines
|
||||
|
||||
### 4. Post Thumbnails (Featured Images)
|
||||
```php
|
||||
add_theme_support('post-thumbnails');
|
||||
```
|
||||
**SEO Benefit**:
|
||||
- Enables schema-rich image data
|
||||
- Improves rich snippet eligibility
|
||||
- Better social sharing
|
||||
|
||||
### 5. Content Width Setting
|
||||
```php
|
||||
$GLOBALS['content_width'] = 1200;
|
||||
```
|
||||
**Benefit**: Ensures images display properly, improving user experience signal
|
||||
|
||||
## SEO Best Practices for Content Creation
|
||||
|
||||
### 1. With Rank Math Active
|
||||
|
||||
1. **Write Content**: Use Rank Math's editor panel for guidance
|
||||
2. **Focus Keyword**: Set 1 primary focus keyword
|
||||
3. **Meta Description**: Write compelling description (160 chars)
|
||||
4. **Schema Selection**: Let Rank Math auto-detect or manually select
|
||||
5. **Internal Linking**: Use Rank Math's internal linking suggestions
|
||||
6. **Readability**: Follow Rank Math's readability guidelines
|
||||
|
||||
### 2. Image Optimization
|
||||
|
||||
1. **Alt Text**: Required by Rank Math (shown in schema)
|
||||
2. **File Size**: Keep images optimized (theme supports lazy loading)
|
||||
3. **Format**: Use WebP with fallbacks
|
||||
4. **Naming**: Use descriptive filenames with hyphens
|
||||
|
||||
### 3. Site Structure
|
||||
|
||||
1. **Navigation**: Keep clear, logical hierarchy
|
||||
2. **Categories/Tags**: Use consistently for clustering
|
||||
3. **Internal Links**: Link related content
|
||||
4. **Breadcrumbs**: Rank Math can auto-generate
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
### Before Launch
|
||||
- [ ] Rank Math plugin installed and activated
|
||||
- [ ] Google Search Console connected
|
||||
- [ ] XML Sitemaps generated and submitted
|
||||
- [ ] robots.txt configured properly
|
||||
- [ ] Google Analytics configured
|
||||
- [ ] Favicon set and visible
|
||||
- [ ] Mobile responsiveness tested (all browsers)
|
||||
- [ ] Page speed optimized (Google PageSpeed Insights)
|
||||
- [ ] Structured data validated (schema.org/validator)
|
||||
|
||||
### After Launch
|
||||
- [ ] Monitor Search Console for indexation issues
|
||||
- [ ] Check for crawl errors
|
||||
- [ ] Monitor Core Web Vitals
|
||||
- [ ] Review search query performance
|
||||
- [ ] Update sitemaps for new content
|
||||
- [ ] Monitor internal link health
|
||||
- [ ] Fix broken links immediately
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Issue: Duplicate Meta Descriptions
|
||||
**Solution**: Disable theme meta description output (already done), ensure Rank Math is handling them
|
||||
|
||||
### Issue: Schema Validation Errors
|
||||
**Solution**:
|
||||
1. Check Rank Math schema settings
|
||||
2. Verify theme fallback isn't conflicting
|
||||
3. Use Google's Rich Results Test: https://search.google.com/test/rich-results
|
||||
|
||||
### Issue: Missing Meta Tags in Page Source
|
||||
**Solution**:
|
||||
1. Wait for Rank Math to process (1-2 minutes)
|
||||
2. Check Rank Math is activated
|
||||
3. Verify page is published (not draft)
|
||||
4. Check privacy settings in Rank Math
|
||||
|
||||
### Issue: Slow Page Load
|
||||
**Solution**:
|
||||
1. Disable unused Rank Math modules
|
||||
2. Enable Rank Math's caching options
|
||||
3. Check theme performance settings
|
||||
4. Optimize images with theme tools
|
||||
|
||||
## Plugin Recommendations
|
||||
|
||||
### Essential
|
||||
- **Rank Math**: SEO Management (as per this setup)
|
||||
- **Updraftplus/BackWPup**: Backups (required)
|
||||
|
||||
### Recommended for Blog Sites
|
||||
- **Akismet**: Comment spam protection
|
||||
- **MonsterInsights**: Google Analytics integration (optional, Rank Math has some analytics)
|
||||
|
||||
### Optional Performance
|
||||
- **W3 Total Cache** or **WP Super Cache**: Caching (if needed with Rank Math)
|
||||
- **ShortPixel**: Image optimization (complements theme optimization)
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- **Rank Math Documentation**: https://rankmath.com/kb/
|
||||
- **Rank Math YouTube Channel**: https://www.youtube.com/channel/UCVVQhKuL0l0xaPRZ6OLhFyA
|
||||
- **Google Search Central Blog**: https://developers.google.com/search/blog
|
||||
- **Schema.org Documentation**: https://schema.org/
|
||||
- **Google Search Console Help**: https://support.google.com/webmasters/
|
||||
|
||||
## Theme Version Information
|
||||
|
||||
- **Theme Name**: Apus Theme
|
||||
- **Theme Version**: 1.0.0
|
||||
- **Rank Math Compatibility**: Full (all versions)
|
||||
- **WordPress Minimum**: 5.0+
|
||||
- **PHP Minimum**: 7.4+
|
||||
|
||||
## Support and Updates
|
||||
|
||||
For issues with:
|
||||
- **Theme SEO**: Check this documentation first
|
||||
- **Rank Math Integration**: Visit Rank Math support
|
||||
- **Theme Updates**: Will be released through WordPress admin
|
||||
- **Compatibility Issues**: Report with WordPress version and active plugins
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: November 3, 2025
|
||||
**Theme Author**: Apus Theme Development Team
|
||||
**Documentation Version**: 1.0.0
|
||||
@@ -1,252 +0,0 @@
|
||||
# Apus Theme - Documentación de Templates
|
||||
|
||||
## Templates Principales Creados
|
||||
|
||||
### 1. single.php
|
||||
**Propósito:** Template para posts individuales de blog
|
||||
|
||||
**Características:**
|
||||
- Imagen destacada con lazy loading
|
||||
- Badge de categoría con estilos personalizados
|
||||
- Título H1 semántico
|
||||
- Meta información (fecha de publicación, fecha de actualización, autor)
|
||||
- Tiempo estimado de lectura
|
||||
- Contenido completo del post
|
||||
- Etiquetas (tags)
|
||||
- Enlaces de edición para usuarios con permisos
|
||||
- Navegación anterior/siguiente
|
||||
- Soporte para comentarios
|
||||
- Hooks para TOC (`apus_before_post_content`)
|
||||
- Hooks para posts relacionados (`apus_after_post_content`)
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/single.php`
|
||||
|
||||
---
|
||||
|
||||
### 2. page.php
|
||||
**Propósito:** Template para páginas estáticas
|
||||
|
||||
**Características:**
|
||||
- Imagen destacada (hero image)
|
||||
- Título H1
|
||||
- Contenido completo
|
||||
- Soporte para páginas paginadas (<!--nextpage-->)
|
||||
- Enlaces de edición para usuarios con permisos
|
||||
- Soporte para comentarios
|
||||
- Layout limpio y enfocado en contenido
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/page.php`
|
||||
|
||||
---
|
||||
|
||||
### 3. archive.php
|
||||
**Propósito:** Template para archivos (categorías, etiquetas, fechas, autor)
|
||||
|
||||
**Características:**
|
||||
- Título dinámico según el tipo de archivo
|
||||
- Descripción del archivo (si existe)
|
||||
- Loop de posts con thumbnails
|
||||
- Vista de rejilla con imagen y extracto
|
||||
- Badge de categoría en cada post
|
||||
- Meta información (fecha, autor)
|
||||
- Enlaces "Leer más"
|
||||
- Paginación completa
|
||||
- Responsive design
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/archive.php`
|
||||
|
||||
---
|
||||
|
||||
### 4. 404.php
|
||||
**Propósito:** Página de error 404 cuando no se encuentra contenido
|
||||
|
||||
**Características:**
|
||||
- Mensaje de error claro y amigable
|
||||
- Lista de sugerencias para el usuario
|
||||
- Posts recientes (últimos 5)
|
||||
- Categorías principales (top 5 por cantidad)
|
||||
- Enlace a página principal
|
||||
- Diseño centrado y accesible
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/404.php`
|
||||
|
||||
---
|
||||
|
||||
### 5. search.php
|
||||
**Propósito:** Template que SIEMPRE retorna 404 (búsqueda desactivada)
|
||||
|
||||
**Características:**
|
||||
- Fuerza status HTTP 404
|
||||
- Desactiva caché
|
||||
- Mensaje claro de que la búsqueda está deshabilitada
|
||||
- Lista de categorías para navegación alternativa
|
||||
- Posts recientes
|
||||
- Sin funcionalidad de búsqueda activa
|
||||
|
||||
**Nota:** La búsqueda está desactivada a nivel de tema mediante:
|
||||
- `template-functions.php` con hooks que redireccionan búsquedas a 404
|
||||
- Widget de búsqueda desregistrado
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/search.php`
|
||||
|
||||
---
|
||||
|
||||
### 6. front-page.php
|
||||
**Propósito:** Template para la portada estática del sitio
|
||||
|
||||
**Características:**
|
||||
- Hero section con imagen destacada de ancho completo
|
||||
- Título H1
|
||||
- Contenido completo de la página
|
||||
- Soporte para páginas paginadas
|
||||
- Hook `apus_front_page_content` para contenido adicional
|
||||
- Diseño especial para página principal
|
||||
- Compatible con página estática en Settings > Reading
|
||||
|
||||
**Ubicación:** `/wp-content/themes/apus-theme/front-page.php`
|
||||
|
||||
---
|
||||
|
||||
## Jerarquía de Templates WordPress
|
||||
|
||||
WordPress usa los templates en el siguiente orden de prioridad:
|
||||
|
||||
```
|
||||
Portada:
|
||||
1. front-page.php
|
||||
2. home.php
|
||||
3. index.php
|
||||
|
||||
Posts individuales:
|
||||
1. single-{post-type}.php
|
||||
2. single.php
|
||||
3. singular.php
|
||||
4. index.php
|
||||
|
||||
Páginas:
|
||||
1. page-{slug}.php
|
||||
2. page-{id}.php
|
||||
3. page.php
|
||||
4. singular.php
|
||||
5. index.php
|
||||
|
||||
Archivos:
|
||||
1. archive-{post-type}.php
|
||||
2. archive.php
|
||||
3. index.php
|
||||
|
||||
Categorías:
|
||||
1. category-{slug}.php
|
||||
2. category-{id}.php
|
||||
3. category.php
|
||||
4. archive.php
|
||||
5. index.php
|
||||
|
||||
Etiquetas:
|
||||
1. tag-{slug}.php
|
||||
2. tag-{id}.php
|
||||
3. tag.php
|
||||
4. archive.php
|
||||
5. index.php
|
||||
|
||||
Búsqueda:
|
||||
1. search.php
|
||||
2. index.php
|
||||
|
||||
404:
|
||||
1. 404.php
|
||||
2. index.php
|
||||
```
|
||||
|
||||
## Archivos de Soporte Creados
|
||||
|
||||
### inc/template-tags.php
|
||||
Funciones reutilizables para templates:
|
||||
- `apus_post_meta()` - Meta información de posts
|
||||
- `apus_post_categories()` - Categorías del post
|
||||
- `apus_pagination()` - Paginación personalizada
|
||||
- `apus_breadcrumbs()` - Migas de pan
|
||||
- `apus_archive_title()` - Título de archivo
|
||||
- `apus_archive_description()` - Descripción de archivo
|
||||
|
||||
### inc/template-functions.php
|
||||
Funciones auxiliares y filtros:
|
||||
- `apus_body_classes()` - Clases personalizadas del body
|
||||
- `apus_post_classes()` - Clases personalizadas de posts
|
||||
- `apus_get_excerpt()` - Extracto por caracteres
|
||||
- `apus_disable_search()` - Desactiva búsqueda
|
||||
- `apus_redirect_search_to_404()` - Redirige búsquedas a 404
|
||||
- `apus_remove_search_widget()` - Elimina widget de búsqueda
|
||||
|
||||
## Estilos CSS Agregados
|
||||
|
||||
Se han agregado estilos específicos en `style.css` para:
|
||||
- Layout de contenido (content-wrapper)
|
||||
- Posts individuales (single)
|
||||
- Archivos (archive)
|
||||
- Paginación
|
||||
- Navegación de posts
|
||||
- Página 404
|
||||
- Front page
|
||||
- Thumbnails y media
|
||||
- Responsive design
|
||||
|
||||
## HTML5 Semántico y Accesibilidad
|
||||
|
||||
Todos los templates incluyen:
|
||||
- Elementos semánticos (`<article>`, `<nav>`, `<aside>`, `<header>`, `<footer>`)
|
||||
- Atributos ARIA apropiados
|
||||
- Roles WAIARIA
|
||||
- Texto para lectores de pantalla
|
||||
- Enlaces de salto al contenido
|
||||
- Tamaños mínimos de toque (44px)
|
||||
- Contraste de colores adecuado
|
||||
- Estructura de encabezados correcta
|
||||
|
||||
## WordPress Coding Standards
|
||||
|
||||
Todos los archivos cumplen con:
|
||||
- WordPress PHP Coding Standards
|
||||
- Escapado de salida apropiado
|
||||
- Sanitización de entradas
|
||||
- Traducciones i18n/l10n
|
||||
- Documentación PHPDoc
|
||||
- Nombres de funciones con prefijo `apus_`
|
||||
|
||||
## Hooks Disponibles
|
||||
|
||||
### Actions
|
||||
- `apus_before_post_content` - Antes del contenido del post (ideal para TOC)
|
||||
- `apus_after_post_content` - Después del contenido del post (ideal para posts relacionados)
|
||||
- `apus_front_page_content` - Contenido adicional en front page
|
||||
|
||||
### Filters
|
||||
- `body_class` - Clases del body
|
||||
- `post_class` - Clases de posts
|
||||
- `apus_content_width` - Ancho del contenido
|
||||
|
||||
## Personalización
|
||||
|
||||
Para personalizar los templates, puedes:
|
||||
|
||||
1. **Crear un Child Theme** (recomendado)
|
||||
2. **Usar Hooks** para agregar funcionalidad
|
||||
3. **Sobrescribir templates** copiándolos al child theme
|
||||
4. **Agregar template parts** en `/template-parts/`
|
||||
|
||||
## Performance
|
||||
|
||||
Todos los templates están optimizados para:
|
||||
- Minimal DOM
|
||||
- Lazy loading de imágenes
|
||||
- Sin JavaScript innecesario
|
||||
- CSS crítico inline (future)
|
||||
- Cache-friendly markup
|
||||
- Core Web Vitals
|
||||
|
||||
---
|
||||
|
||||
**Versión del tema:** 1.0.0
|
||||
**Última actualización:** 2025-11-03
|
||||
**WordPress requerido:** 6.0+
|
||||
**PHP requerido:** 8.0+
|
||||
@@ -1,367 +0,0 @@
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ APUS THEME - OPTIONS PANEL STRUCTURE ║
|
||||
║ Issue #14 - Complete ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
apus-theme/
|
||||
│
|
||||
├── 📁 inc/
|
||||
│ ├── 📄 theme-options-helpers.php (318 lines, 6.5KB)
|
||||
│ │ └── 30+ helper functions to access theme options
|
||||
│ │
|
||||
│ └── 📁 admin/
|
||||
│ ├── 📄 theme-options.php (214 lines, 7.0KB)
|
||||
│ │ └── Admin menu registration, AJAX handlers, enqueue scripts
|
||||
│ │
|
||||
│ ├── 📄 options-api.php (282 lines, 11KB)
|
||||
│ │ └── Settings API implementation, sanitization functions
|
||||
│ │
|
||||
│ ├── 📄 options-page-template.php (661 lines, 42KB)
|
||||
│ │ └── Complete HTML template with 5 tabs, 39+ options
|
||||
│ │
|
||||
│ ├── 📄 README.md (5.8KB)
|
||||
│ │ └── Complete documentation and usage guide
|
||||
│ │
|
||||
│ ├── 📄 USAGE-EXAMPLES.php (394 lines, 12KB)
|
||||
│ │ └── 20 practical examples of how to use options
|
||||
│ │
|
||||
│ └── 📄 TEST-CHECKLIST.md (11KB)
|
||||
│ └── 200+ testing checkpoints
|
||||
│
|
||||
├── 📁 assets/
|
||||
│ └── 📁 admin/
|
||||
│ ├── 📁 css/
|
||||
│ │ └── 📄 theme-options.css (471 lines, 8.1KB)
|
||||
│ │ └── Modern styling for options panel
|
||||
│ │
|
||||
│ └── 📁 js/
|
||||
│ └── 📄 theme-options.js (440 lines, 16KB)
|
||||
│ └── Tab navigation, image upload, import/export, validation
|
||||
│
|
||||
├── 📄 functions.php (UPDATED)
|
||||
│ └── Added requires for theme options files
|
||||
│
|
||||
└── 📄 ISSUE-14-COMPLETION-REPORT.md (14KB)
|
||||
└── Complete project report and documentation
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ FEATURES IMPLEMENTED ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ 📋 GENERAL TAB (12 options) │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ • Site Logo (Image Upload) │
|
||||
│ • Site Favicon (Image Upload) │
|
||||
│ • Enable Breadcrumbs (Toggle) │
|
||||
│ • Breadcrumb Separator (Text) │
|
||||
│ • Date Format (Text) │
|
||||
│ • Time Format (Text) │
|
||||
│ • Copyright Text (Textarea) │
|
||||
│ • Facebook URL │
|
||||
│ • Twitter URL │
|
||||
│ • Instagram URL │
|
||||
│ • LinkedIn URL │
|
||||
│ • YouTube URL │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ 📝 CONTENT TAB (12 options) │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ • Excerpt Length (Number) │
|
||||
│ • Excerpt More Text (Text) │
|
||||
│ • Default Post Layout (Select: Right/Left/No Sidebar) │
|
||||
│ • Default Page Layout (Select: Right/Left/No Sidebar) │
|
||||
│ • Archive Posts Per Page (Number) │
|
||||
│ • Show Featured Image on Single Posts (Toggle) │
|
||||
│ • Show Author Box (Toggle) │
|
||||
│ • Enable Comments on Posts (Toggle) │
|
||||
│ • Enable Comments on Pages (Toggle) │
|
||||
│ • Show Post Meta (Toggle) │
|
||||
│ • Show Post Tags (Toggle) │
|
||||
│ • Show Post Categories (Toggle) │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ ⚡ PERFORMANCE TAB (7 options) │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ • Enable Lazy Loading (Toggle) │
|
||||
│ • Remove Emoji Scripts (Toggle) │
|
||||
│ • Remove Embeds (Toggle) │
|
||||
│ • Remove Dashicons on Frontend (Toggle) │
|
||||
│ • Defer JavaScript (Toggle) │
|
||||
│ • Minify HTML (Toggle) │
|
||||
│ • Disable Gutenberg (Toggle) │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ 🔗 RELATED POSTS TAB (5 options) │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ • Enable Related Posts (Toggle) │
|
||||
│ • Number of Related Posts (Number: 1-12) │
|
||||
│ • Relate Posts By (Select: Category/Tag/Both) │
|
||||
│ • Related Posts Title (Text) │
|
||||
│ • Columns (Select: 2/3/4) │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ ⚙️ ADVANCED TAB (3 options) │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ • Custom CSS (Code Textarea) │
|
||||
│ • Custom JavaScript - Header (Code Textarea) │
|
||||
│ • Custom JavaScript - Footer (Code Textarea) │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
TOTAL: 39+ Configurable Options
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ SPECIAL FUNCTIONALITIES ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
✅ IMPORT/EXPORT SYSTEM
|
||||
• Export all options to JSON file
|
||||
• Import options from JSON file
|
||||
• JSON validation on import
|
||||
• Automatic file download
|
||||
|
||||
✅ RESET TO DEFAULTS
|
||||
• One-click reset to default values
|
||||
• Confirmation dialog
|
||||
• Auto-reload after reset
|
||||
|
||||
✅ TAB NAVIGATION
|
||||
• 5 organized tabs
|
||||
• URL hash support (#general, #content, etc.)
|
||||
• Browser back/forward compatible
|
||||
• Auto-scroll from URL
|
||||
|
||||
✅ IMAGE UPLOAD
|
||||
• WordPress Media Library integration
|
||||
• Live image preview
|
||||
• Remove image functionality
|
||||
• Support for logo and favicon
|
||||
|
||||
✅ FORM VALIDATION
|
||||
• Required field validation
|
||||
• Number range validation (min/max)
|
||||
• URL validation
|
||||
• Auto-scroll to errors
|
||||
• Field error highlighting
|
||||
|
||||
✅ CONDITIONAL FIELDS
|
||||
• Fields enable/disable based on others
|
||||
• Example: Related posts fields disable when feature is off
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ SECURITY FEATURES IMPLEMENTED ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
🔒 Security Layer 1: NONCE VERIFICATION
|
||||
All AJAX calls verify WordPress nonce
|
||||
|
||||
🔒 Security Layer 2: CAPABILITY CHECKS
|
||||
Verify user has 'manage_options' capability
|
||||
|
||||
🔒 Security Layer 3: INPUT SANITIZATION
|
||||
• Text fields: sanitize_text_field()
|
||||
• URLs: esc_url_raw()
|
||||
• HTML: wp_kses_post()
|
||||
• Integers: absint()
|
||||
• CSS: Custom sanitization (removes <script>)
|
||||
• JS: Custom sanitization (removes <?php>)
|
||||
|
||||
🔒 Security Layer 4: OUTPUT ESCAPING
|
||||
All outputs use esc_html(), esc_attr(), esc_url()
|
||||
|
||||
🔒 Security Layer 5: CSRF PROTECTION
|
||||
WordPress nonce system prevents CSRF
|
||||
|
||||
🔒 Security Layer 6: XSS PREVENTION
|
||||
All user inputs sanitized before saving
|
||||
|
||||
🔒 Security Layer 7: SQL INJECTION PREVENTION
|
||||
Using WordPress prepared statements
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ HELPER FUNCTIONS AVAILABLE ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📦 General Functions:
|
||||
• apus_get_option($name, $default)
|
||||
• apus_is_option_enabled($name)
|
||||
• apus_get_all_options()
|
||||
• apus_reset_options()
|
||||
|
||||
🏷️ Logo & Branding:
|
||||
• apus_get_logo_url()
|
||||
• apus_get_favicon_url()
|
||||
• apus_get_copyright_text()
|
||||
|
||||
🗺️ Breadcrumbs:
|
||||
• apus_show_breadcrumbs()
|
||||
• apus_get_breadcrumb_separator()
|
||||
|
||||
📝 Content:
|
||||
• apus_get_excerpt_length()
|
||||
• apus_get_excerpt_more()
|
||||
• apus_get_default_post_layout()
|
||||
• apus_get_default_page_layout()
|
||||
• apus_show_featured_image_single()
|
||||
• apus_show_author_box()
|
||||
|
||||
💬 Comments:
|
||||
• apus_comments_enabled_for_posts()
|
||||
• apus_comments_enabled_for_pages()
|
||||
|
||||
🔗 Related Posts:
|
||||
• apus_show_related_posts()
|
||||
• apus_get_related_posts_count()
|
||||
• apus_get_related_posts_taxonomy()
|
||||
• apus_get_related_posts_title()
|
||||
|
||||
📱 Social Media:
|
||||
• apus_get_social_links()
|
||||
|
||||
⚡ Performance:
|
||||
• apus_is_lazy_loading_enabled()
|
||||
• apus_is_performance_enabled($optimization)
|
||||
|
||||
📅 Date/Time:
|
||||
• apus_get_date_format()
|
||||
• apus_get_time_format()
|
||||
|
||||
🎨 Advanced:
|
||||
• apus_get_custom_css()
|
||||
• apus_get_custom_js_header()
|
||||
• apus_get_custom_js_footer()
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ BROWSER COMPATIBILITY ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
✅ Chrome (latest) ✅ Safari (latest)
|
||||
✅ Firefox (latest) ✅ Edge (latest)
|
||||
✅ Mobile browsers ✅ Tablet browsers
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ RESPONSIVE BREAKPOINTS ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📱 Mobile: 375px - Stacked layout, touch-friendly
|
||||
📱 Tablet: 768px - Adapted layout, horizontal tabs
|
||||
💻 Laptop: 1366px - Full layout
|
||||
🖥️ Desktop: 1920px - Full layout with spacing
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ ACCESSIBILITY FEATURES ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
♿ WCAG 2.1 Level AA Compliant
|
||||
|
||||
✅ Keyboard Navigation - Full tab navigation support
|
||||
✅ Screen Reader Support - Proper labels and ARIA attributes
|
||||
✅ Focus Indicators - Visible focus states
|
||||
✅ Color Contrast - Minimum 4.5:1 ratio
|
||||
✅ Alt Text - All images have alt text
|
||||
✅ Form Labels - Properly associated labels
|
||||
✅ Error Messages - Descriptive error messages
|
||||
✅ Semantic HTML - Proper HTML5 structure
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ PERFORMANCE METRICS ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📊 File Sizes:
|
||||
CSS: 8.1KB (unminified)
|
||||
JS: 16KB (unminified)
|
||||
|
||||
⚡ Load Time:
|
||||
< 500ms (on options page only)
|
||||
|
||||
🌐 HTTP Requests:
|
||||
+2 requests (CSS + JS, only on options page)
|
||||
|
||||
💾 Database:
|
||||
Single option: 'apus_theme_options' (serialized array)
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ HOW TO ACCESS THE PANEL ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
1. Log in to WordPress admin
|
||||
2. Navigate to: Appearance > Theme Options
|
||||
3. Configure your options across 5 tabs
|
||||
4. Click "Save All Settings"
|
||||
|
||||
Alternative:
|
||||
• Click "Settings" link on theme row in Appearance > Themes
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ USAGE IN TEMPLATES ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
Example 1 - Display Logo:
|
||||
<?php
|
||||
$logo_url = apus_get_logo_url();
|
||||
if ($logo_url) {
|
||||
echo '<img src="' . esc_url($logo_url) . '" alt="Logo" />';
|
||||
}
|
||||
?>
|
||||
|
||||
Example 2 - Check Breadcrumbs:
|
||||
<?php
|
||||
if (apus_show_breadcrumbs()) {
|
||||
// Display breadcrumbs
|
||||
$separator = apus_get_breadcrumb_separator();
|
||||
}
|
||||
?>
|
||||
|
||||
Example 3 - Related Posts:
|
||||
<?php
|
||||
if (apus_show_related_posts()) {
|
||||
$count = apus_get_related_posts_count();
|
||||
$title = apus_get_related_posts_title();
|
||||
// Display related posts
|
||||
}
|
||||
?>
|
||||
|
||||
📚 See inc/admin/USAGE-EXAMPLES.php for 20 detailed examples!
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ PROJECT STATS ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📝 Total Lines of Code: 3,052+
|
||||
📄 Total Files Created: 10 files
|
||||
⚙️ Total Options: 39+ configurable options
|
||||
🔧 Total Helper Functions: 30+ functions
|
||||
📚 Documentation Pages: 3 files
|
||||
🧪 Test Checkpoints: 200+ items
|
||||
|
||||
|
||||
╔══════════════════════════════════════════════════════════════════════════════╗
|
||||
║ STATUS: COMPLETE ║
|
||||
║ Ready for Production Use ║
|
||||
╚══════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
Date Completed: 2025-11-03
|
||||
Version: 1.0.0
|
||||
WordPress: 6.0+
|
||||
PHP: 8.0+
|
||||
|
||||
For detailed documentation, see:
|
||||
• inc/admin/README.md
|
||||
• inc/admin/USAGE-EXAMPLES.php
|
||||
• inc/admin/TEST-CHECKLIST.md
|
||||
• ISSUE-14-COMPLETION-REPORT.md
|
||||
@@ -1,588 +0,0 @@
|
||||
# Guía de Configuración Inicial - Apus Theme
|
||||
|
||||
**Versión:** 1.0.0
|
||||
**Última actualización:** Noviembre 2024
|
||||
|
||||
Esta guía te llevará paso a paso por la configuración inicial del tema Apus después de la instalación.
|
||||
|
||||
---
|
||||
|
||||
## Tabla de Contenidos
|
||||
|
||||
1. [Antes de Comenzar](#antes-de-comenzar)
|
||||
2. [Instalación del Tema](#instalación-del-tema)
|
||||
3. [Configuración de WordPress](#configuración-de-wordpress)
|
||||
4. [Configuración del Tema](#configuración-del-tema)
|
||||
5. [Plugins Recomendados](#plugins-recomendados)
|
||||
6. [Primeros Pasos](#primeros-pasos)
|
||||
7. [Solución de Problemas](#solución-de-problemas)
|
||||
|
||||
---
|
||||
|
||||
## Antes de Comenzar
|
||||
|
||||
### Requisitos del Sistema
|
||||
|
||||
Verifica que tu servidor cumple con los requisitos mínimos:
|
||||
|
||||
**Requisitos Mínimos:**
|
||||
- WordPress 6.0 o superior
|
||||
- PHP 8.0 o superior
|
||||
- MySQL 5.7+ o MariaDB 10.2+
|
||||
- Memoria PHP: 128 MB mínimo
|
||||
- mod_rewrite habilitado
|
||||
|
||||
**Requisitos Recomendados:**
|
||||
- WordPress 6.4 o superior (última versión estable)
|
||||
- PHP 8.1 o superior
|
||||
- MySQL 8.0+ o MariaDB 10.5+
|
||||
- Memoria PHP: 256 MB o más
|
||||
- Certificado SSL (HTTPS)
|
||||
- Gzip o Brotli compression habilitada
|
||||
- OPcache habilitado
|
||||
|
||||
### Verificar Requisitos
|
||||
|
||||
Para verificar tu versión de PHP y WordPress:
|
||||
|
||||
1. Ve al Dashboard de WordPress
|
||||
2. Navega a **Herramientas > Salud del Sitio**
|
||||
3. Haz clic en la pestaña "Información"
|
||||
4. Revisa las secciones "WordPress" y "Servidor"
|
||||
|
||||
---
|
||||
|
||||
## Instalación del Tema
|
||||
|
||||
### Método 1: Via Dashboard de WordPress (Recomendado)
|
||||
|
||||
1. **Descarga el tema**
|
||||
- Descarga el archivo ZIP del tema Apus
|
||||
|
||||
2. **Accede a tu WordPress**
|
||||
- Inicia sesión en tu Dashboard de WordPress
|
||||
- Ve a `Apariencia > Temas`
|
||||
|
||||
3. **Sube el tema**
|
||||
- Haz clic en el botón "Añadir nuevo"
|
||||
- Haz clic en "Subir tema"
|
||||
- Selecciona el archivo ZIP del tema
|
||||
- Haz clic en "Instalar ahora"
|
||||
|
||||
4. **Activa el tema**
|
||||
- Una vez instalado, haz clic en "Activar"
|
||||
- Serás redirigido a la página de temas
|
||||
|
||||
### Método 2: Via FTP
|
||||
|
||||
1. **Descomprime el archivo**
|
||||
- Descomprime el archivo ZIP del tema en tu computadora
|
||||
|
||||
2. **Conecta por FTP**
|
||||
- Usa un cliente FTP (FileZilla, Cyberduck, etc.)
|
||||
- Conecta a tu servidor
|
||||
|
||||
3. **Sube la carpeta del tema**
|
||||
- Navega a `/wp-content/themes/`
|
||||
- Sube la carpeta `apus-theme` completa
|
||||
|
||||
4. **Activa el tema**
|
||||
- Ve a `Apariencia > Temas` en WordPress
|
||||
- Encuentra "Apus Theme" y haz clic en "Activar"
|
||||
|
||||
### Método 3: Via WP-CLI
|
||||
|
||||
Si tienes acceso a WP-CLI:
|
||||
|
||||
```bash
|
||||
# Navega al directorio de WordPress
|
||||
cd /path/to/wordpress
|
||||
|
||||
# Instala el tema
|
||||
wp theme install /path/to/apus-theme.zip
|
||||
|
||||
# Activa el tema
|
||||
wp theme activate apus-theme
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuración de WordPress
|
||||
|
||||
Después de activar el tema, configura estos ajustes básicos de WordPress:
|
||||
|
||||
### 1. Configurar Permalinks (CRÍTICO)
|
||||
|
||||
Los permalinks deben estar configurados para que el tema funcione correctamente.
|
||||
|
||||
**Pasos:**
|
||||
1. Ve a `Ajustes > Enlaces permanentes`
|
||||
2. Selecciona "Nombre de la entrada" o una estructura personalizada
|
||||
- Recomendado: `/%postname%/` o `/%category%/%postname%/`
|
||||
3. Haz clic en "Guardar cambios"
|
||||
|
||||
**IMPORTANTE:** No uses la opción "Simple" (/?p=123). Esto no funcionará correctamente con el tema.
|
||||
|
||||
### 2. Configurar Página de Inicio
|
||||
|
||||
**Opción A: Página Estática (Recomendado para la mayoría de sitios)**
|
||||
|
||||
1. Crea una nueva página:
|
||||
- Ve a `Páginas > Añadir nueva`
|
||||
- Título: "Inicio" o "Home"
|
||||
- Publica la página
|
||||
|
||||
2. Configura como página de inicio:
|
||||
- Ve a `Ajustes > Lectura`
|
||||
- Marca "Una página estática"
|
||||
- En "Página de inicio", selecciona la página que creaste
|
||||
- Haz clic en "Guardar cambios"
|
||||
|
||||
**Opción B: Últimas Entradas (Para Blogs)**
|
||||
|
||||
1. Ve a `Ajustes > Lectura`
|
||||
2. Marca "Tus últimas entradas"
|
||||
3. Configura el número de entradas (recomendado: 10-12)
|
||||
4. Haz clic en "Guardar cambios"
|
||||
|
||||
### 3. Configurar Página de Blog (Opcional)
|
||||
|
||||
Si usas página estática como inicio y quieres una página separada para el blog:
|
||||
|
||||
1. Crea una nueva página:
|
||||
- Ve a `Páginas > Añadir nueva`
|
||||
- Título: "Blog" o "Noticias"
|
||||
- **No agregues contenido** (se mostrará automáticamente el listado de posts)
|
||||
- Publica la página
|
||||
|
||||
2. Asigna como página de entradas:
|
||||
- Ve a `Ajustes > Lectura`
|
||||
- En "Página de entradas", selecciona la página "Blog"
|
||||
- Haz clic en "Guardar cambios"
|
||||
|
||||
### 4. Configurar Zona Horaria y Formato de Fecha
|
||||
|
||||
1. Ve a `Ajustes > Generales`
|
||||
2. Configura:
|
||||
- **Zona horaria:** Tu zona horaria (ej: Ciudad de México)
|
||||
- **Formato de fecha:** `d/m/Y` (ya configurado por el tema)
|
||||
- **Formato de hora:** El que prefieras
|
||||
3. Haz clic en "Guardar cambios"
|
||||
|
||||
### 5. Configurar Medios
|
||||
|
||||
1. Ve a `Ajustes > Medios`
|
||||
2. Configura los tamaños de imagen (ya están configurados por el tema):
|
||||
- Tamaño medio: 800 x 600 (opcional modificar)
|
||||
- Tamaño grande: 1200 x 900 (opcional modificar)
|
||||
3. **IMPORTANTE:** Si tienes contenido existente, regenera las miniaturas
|
||||
|
||||
**Regenerar Miniaturas (Si tienes posts existentes):**
|
||||
|
||||
**Opción A - WP-CLI:**
|
||||
```bash
|
||||
wp media regenerate --yes
|
||||
```
|
||||
|
||||
**Opción B - Plugin:**
|
||||
- Instala el plugin "Regenerate Thumbnails"
|
||||
- Ve a `Herramientas > Regenerar miniaturas`
|
||||
- Haz clic en "Regenerar todas las miniaturas"
|
||||
|
||||
---
|
||||
|
||||
## Configuración del Tema
|
||||
|
||||
### 1. Logo del Sitio
|
||||
|
||||
**Via Customizer:**
|
||||
1. Ve a `Apariencia > Personalizar`
|
||||
2. Navega a `Identidad del sitio > Logo`
|
||||
3. Haz clic en "Seleccionar logo"
|
||||
4. Sube tu logo o selecciona uno de la biblioteca
|
||||
5. Ajusta el recorte si es necesario
|
||||
6. Haz clic en "Publicar"
|
||||
|
||||
**Recomendaciones para el logo:**
|
||||
- Tamaño: 200-250px de ancho máximo
|
||||
- Formato: PNG (con transparencia) o SVG preferiblemente
|
||||
- Altura: 40-60px recomendada
|
||||
- Resolución: @2x para pantallas Retina
|
||||
|
||||
### 2. Menús de Navegación
|
||||
|
||||
El tema incluye 2 ubicaciones de menú:
|
||||
|
||||
#### Menú Principal (Primary Menu)
|
||||
|
||||
1. Ve a `Apariencia > Menús`
|
||||
2. Haz clic en "crear un menú nuevo"
|
||||
3. Nombre: "Menú Principal" (o el que prefieras)
|
||||
4. Marca la casilla "Primary Menu" en "Ajustes del menú"
|
||||
5. Agrega páginas al menú:
|
||||
- Marca las páginas que desees en la columna izquierda
|
||||
- Haz clic en "Añadir al menú"
|
||||
6. Organiza el orden arrastrando los items
|
||||
7. Haz clic en "Guardar menú"
|
||||
|
||||
**Recomendaciones:**
|
||||
- Máximo 7-8 items en el nivel superior
|
||||
- Usa submenús para organizar contenido relacionado
|
||||
- Los submenús funcionan en desktop (hover) y mobile (tap)
|
||||
|
||||
#### Menú Footer (Opcional)
|
||||
|
||||
1. Crea otro menú o usa el mismo proceso
|
||||
2. Marca la casilla "Footer Menu"
|
||||
3. Recomendado: Links legales (Privacidad, Términos, Contacto)
|
||||
|
||||
### 3. Widgets
|
||||
|
||||
El tema incluye 5 áreas de widgets:
|
||||
|
||||
#### Primary Sidebar
|
||||
- Ubicación: Barra lateral derecha en posts y páginas
|
||||
- Widgets sugeridos:
|
||||
- Buscar
|
||||
- Categorías
|
||||
- Entradas recientes
|
||||
- Etiquetas (nube)
|
||||
|
||||
**Configurar:**
|
||||
1. Ve a `Apariencia > Widgets`
|
||||
2. Encuentra "Primary Sidebar"
|
||||
3. Arrastra widgets desde la columna izquierda
|
||||
4. Configura cada widget según tus necesidades
|
||||
|
||||
#### Footer Columns (1-4)
|
||||
|
||||
- Ubicación: 4 columnas en el footer
|
||||
- Grid responsive (4 cols en desktop, 2 en tablet, 1 en mobile)
|
||||
|
||||
**Sugerencias de contenido:**
|
||||
|
||||
**Footer Column 1:**
|
||||
- Widget de texto con descripción del sitio
|
||||
- Logo o nombre del sitio
|
||||
|
||||
**Footer Column 2:**
|
||||
- Menú de navegación
|
||||
- Links útiles
|
||||
|
||||
**Footer Column 3:**
|
||||
- Widget "Entradas recientes"
|
||||
- Widget de categorías
|
||||
|
||||
**Footer Column 4:**
|
||||
- Widget de texto con información de contacto
|
||||
- Redes sociales
|
||||
|
||||
### 4. Theme Options (Panel de Opciones)
|
||||
|
||||
El tema incluye un panel completo de opciones en `Apariencia > Theme Options`.
|
||||
|
||||
Para configuración inicial básica:
|
||||
|
||||
1. Ve a `Apariencia > Theme Options`
|
||||
|
||||
2. **Tab: General Settings**
|
||||
- Sube un favicon si aún no lo has hecho
|
||||
- Configura el texto de copyright para el footer
|
||||
|
||||
3. **Tab: Performance**
|
||||
- Deja las opciones por defecto (ya están optimizadas)
|
||||
- **Lazy Loading:** Activado ✓
|
||||
- **WebP Support:** Activado ✓
|
||||
- **AdSense Delay:** Activar si usas AdSense ✓
|
||||
|
||||
4. **Tab: Content Settings**
|
||||
- **Table of Contents (TOC):**
|
||||
- Enable: ✓ (si deseas TOC automático en posts largos)
|
||||
- Minimum headings: 3 (valor por defecto)
|
||||
- **Related Posts:**
|
||||
- Enable: ✓ (muestra posts relacionados al final)
|
||||
- Number of posts: 4
|
||||
- Order: Recent
|
||||
|
||||
5. **Haz clic en "Save Changes"**
|
||||
|
||||
Ver [02-theme-options.md](02-theme-options.md) para guía completa del panel.
|
||||
|
||||
---
|
||||
|
||||
## Plugins Recomendados
|
||||
|
||||
Instala estos plugins para maximizar el potencial del tema:
|
||||
|
||||
### Esenciales
|
||||
|
||||
#### 1. Rank Math SEO (Recomendado)
|
||||
- **Propósito:** SEO completo, meta tags, schema.org
|
||||
- **Website:** https://rankmath.com/
|
||||
- **Instalación:**
|
||||
1. Ve a `Plugins > Añadir nuevo`
|
||||
2. Busca "Rank Math"
|
||||
3. Instala y activa
|
||||
4. Sigue el asistente de configuración
|
||||
|
||||
**Configuración rápida:**
|
||||
- Modo: Easy (para principiantes) o Advanced
|
||||
- Conecta con Google Search Console (recomendado)
|
||||
- Activa módulos: SEO Analysis, Sitemap, Schema
|
||||
|
||||
#### 2. Contact Form 7
|
||||
- **Propósito:** Formularios de contacto
|
||||
- **Website:** https://contactform7.com/
|
||||
- **El tema ya incluye estilos para CF7**
|
||||
|
||||
### Performance (Opcional pero Recomendado)
|
||||
|
||||
#### WP Rocket
|
||||
- **Propósito:** Cache y optimización
|
||||
- **Tipo:** Premium (vale la pena)
|
||||
- **Configuración:** Automática, solo instala y activa
|
||||
|
||||
#### Autoptimize (Alternativa gratuita)
|
||||
- **Propósito:** Minificación de CSS/JS
|
||||
- **Instalación:** Via directorio de plugins
|
||||
- **Configuración básica:**
|
||||
- Optimizar HTML ✓
|
||||
- Optimizar CSS ✓
|
||||
- Optimizar JavaScript ✓
|
||||
- Aggregate inline JS ✗ (puede causar problemas)
|
||||
|
||||
### Imágenes
|
||||
|
||||
#### Smush (Recomendado)
|
||||
- **Propósito:** Optimización de imágenes
|
||||
- **Website:** https://wpmudev.com/project/wp-smush-pro/
|
||||
- **Configuración:**
|
||||
- Automatic compression ✓
|
||||
- Lazy load (usa el del tema, desactiva el de Smush)
|
||||
|
||||
#### ShortPixel (Alternativa)
|
||||
- **Propósito:** Optimización y conversión a WebP
|
||||
- **Incluye conversión a WebP automática**
|
||||
|
||||
### Seguridad
|
||||
|
||||
#### Wordfence
|
||||
- **Propósito:** Firewall y seguridad
|
||||
- **Configuración:** Valores por defecto están bien
|
||||
|
||||
---
|
||||
|
||||
## Primeros Pasos
|
||||
|
||||
### 1. Crea Contenido de Prueba
|
||||
|
||||
Antes de crear contenido real, prueba con contenido de ejemplo:
|
||||
|
||||
**Crear Posts de Prueba:**
|
||||
1. Ve a `Entradas > Añadir nueva`
|
||||
2. Título: "Post de Prueba 1"
|
||||
3. Agrega contenido (usa el editor clásico o Gutenberg)
|
||||
4. **Importante:** Agrega una imagen destacada
|
||||
5. Asigna una categoría
|
||||
6. Publica
|
||||
|
||||
Crea 4-5 posts de prueba para ver cómo se ven:
|
||||
- En el blog/home
|
||||
- En el single post
|
||||
- Posts relacionados
|
||||
- En archives
|
||||
|
||||
**Crear Páginas de Prueba:**
|
||||
1. Ve a `Páginas > Añadir nueva`
|
||||
2. Crea páginas como:
|
||||
- Acerca de
|
||||
- Servicios
|
||||
- Contacto
|
||||
|
||||
### 2. Verifica la Página de Inicio
|
||||
|
||||
1. Visita tu sitio en un navegador
|
||||
2. Verifica que se vea la página que configuraste como inicio
|
||||
3. Revisa que el menú se muestre correctamente
|
||||
4. Verifica el footer
|
||||
|
||||
### 3. Verifica un Post Individual
|
||||
|
||||
1. Haz clic en uno de tus posts de prueba
|
||||
2. Verifica que se muestre:
|
||||
- Featured image (si la agregaste)
|
||||
- Badge de categoría
|
||||
- Meta info (fecha, autor)
|
||||
- Table of Contents (si el post tiene varios H2/H3)
|
||||
- Posts relacionados al final
|
||||
|
||||
### 4. Prueba el Responsive Design
|
||||
|
||||
1. Redimensiona tu navegador
|
||||
2. O usa Chrome DevTools (F12 > Toggle device toolbar)
|
||||
3. Prueba en:
|
||||
- Desktop (1920px)
|
||||
- Tablet (768px)
|
||||
- Mobile (375px)
|
||||
4. Verifica que el menú hamburguesa funcione en mobile
|
||||
|
||||
### 5. Verifica la Velocidad
|
||||
|
||||
1. Ve a [PageSpeed Insights](https://pagespeed.web.dev/)
|
||||
2. Ingresa la URL de tu sitio
|
||||
3. Espera el análisis
|
||||
4. Deberías ver:
|
||||
- Performance: 90+ en desktop
|
||||
- Performance: 80+ en mobile (depende de hosting)
|
||||
- Accessibility: 95+
|
||||
- Best Practices: 95+
|
||||
- SEO: 100
|
||||
|
||||
Si los scores son bajos:
|
||||
- Verifica que el tema esté configurado correctamente
|
||||
- Considera instalar WP Rocket o plugin de cache
|
||||
- Revisa los plugins instalados (desactiva los que no uses)
|
||||
|
||||
---
|
||||
|
||||
## Solución de Problemas
|
||||
|
||||
### El menú no se muestra
|
||||
|
||||
**Problema:** El header aparece pero sin menú.
|
||||
|
||||
**Solución:**
|
||||
1. Ve a `Apariencia > Menús`
|
||||
2. Verifica que un menú esté asignado a "Primary Menu"
|
||||
3. Si no existe, crea un menú y asígnalo
|
||||
|
||||
### Las imágenes destacadas no se ven
|
||||
|
||||
**Problema:** Los posts no muestran imágenes.
|
||||
|
||||
**Solución 1 - Agrega imágenes:**
|
||||
1. Edita el post
|
||||
2. En la columna derecha, busca "Imagen destacada"
|
||||
3. Haz clic en "Establecer la imagen destacada"
|
||||
4. Sube o selecciona una imagen
|
||||
5. Actualiza el post
|
||||
|
||||
**Solución 2 - Verifica opciones del tema:**
|
||||
1. Ve a `Apariencia > Theme Options > Content Settings`
|
||||
2. Verifica que "Show Featured Images" esté activado
|
||||
3. Guarda cambios
|
||||
|
||||
### El tema se ve sin estilos
|
||||
|
||||
**Problema:** El sitio se ve sin CSS, todo texto plano.
|
||||
|
||||
**Solución 1 - Permalinks:**
|
||||
1. Ve a `Ajustes > Enlaces permanentes`
|
||||
2. Simplemente haz clic en "Guardar cambios" (sin cambiar nada)
|
||||
3. Esto regenera las reglas de reescritura
|
||||
|
||||
**Solución 2 - Cache:**
|
||||
1. Si usas un plugin de cache, limpia el cache
|
||||
2. Limpia el cache del navegador (Ctrl+F5 o Cmd+Shift+R)
|
||||
|
||||
**Solución 3 - Permisos:**
|
||||
1. Verifica que los archivos del tema tengan los permisos correctos
|
||||
2. Directorios: 755
|
||||
3. Archivos: 644
|
||||
|
||||
### El TOC no aparece
|
||||
|
||||
**Problema:** La tabla de contenidos no se muestra en los posts.
|
||||
|
||||
**Solución:**
|
||||
1. El post debe tener al menos 3 headings (H2 o H3)
|
||||
2. Verifica en `Apariencia > Theme Options > Content Settings`
|
||||
3. Asegúrate de que TOC esté activado
|
||||
4. Ajusta el "Minimum headings" si es necesario
|
||||
|
||||
### Los posts relacionados no aparecen
|
||||
|
||||
**Problema:** No se muestran posts relacionados al final del post.
|
||||
|
||||
**Solución:**
|
||||
1. Verifica que el post tenga una categoría asignada
|
||||
2. Verifica que existan otros posts en la misma categoría
|
||||
3. Ve a `Apariencia > Theme Options > Content Settings`
|
||||
4. Asegúrate de que Related Posts esté activado
|
||||
|
||||
### Error 500 o sitio en blanco
|
||||
|
||||
**Problema:** El sitio muestra error 500 o pantalla en blanco.
|
||||
|
||||
**Solución:**
|
||||
1. Verifica los requisitos de PHP (PHP 8.0+)
|
||||
2. Aumenta la memoria de PHP:
|
||||
- Edita `wp-config.php`
|
||||
- Agrega: `define('WP_MEMORY_LIMIT', '256M');`
|
||||
3. Revisa el error log del servidor
|
||||
4. Desactiva todos los plugins
|
||||
5. Si funciona, reactiva plugins uno por uno para encontrar el conflicto
|
||||
|
||||
### El footer no muestra widgets
|
||||
|
||||
**Problema:** El footer está vacío.
|
||||
|
||||
**Solución:**
|
||||
1. Ve a `Apariencia > Widgets`
|
||||
2. Agrega widgets a las áreas "Footer Column 1-4"
|
||||
3. Si no agregas widgets, el footer solo mostrará el copyright
|
||||
|
||||
---
|
||||
|
||||
## Siguientes Pasos
|
||||
|
||||
Una vez completada la configuración inicial:
|
||||
|
||||
1. **Lee la documentación completa:**
|
||||
- [02-theme-options.md](02-theme-options.md) - Guía del panel de opciones
|
||||
- [03-performance-seo.md](03-performance-seo.md) - Optimización avanzada
|
||||
|
||||
2. **Configura Rank Math:**
|
||||
- Conecta Google Search Console
|
||||
- Configura schema.org para tu tipo de sitio
|
||||
- Optimiza tus primeros posts
|
||||
|
||||
3. **Optimiza rendimiento:**
|
||||
- Instala plugin de cache
|
||||
- Configura lazy loading (ya incluido en el tema)
|
||||
- Optimiza imágenes existentes
|
||||
|
||||
4. **Crea tu contenido:**
|
||||
- Borra los posts de prueba
|
||||
- Crea contenido real
|
||||
- Optimiza cada post con Rank Math
|
||||
|
||||
5. **Monitorea:**
|
||||
- Instala Google Analytics (via Theme Options)
|
||||
- Configura Search Console
|
||||
- Monitorea Core Web Vitals
|
||||
|
||||
---
|
||||
|
||||
## Recursos Útiles
|
||||
|
||||
- **Documentación de WordPress:** https://wordpress.org/support/
|
||||
- **Bootstrap Documentation:** https://getbootstrap.com/docs/5.3/
|
||||
- **Rank Math Knowledge Base:** https://rankmath.com/kb/
|
||||
- **PageSpeed Insights:** https://pagespeed.web.dev/
|
||||
- **Google Search Console:** https://search.google.com/search-console/
|
||||
|
||||
---
|
||||
|
||||
## Soporte
|
||||
|
||||
Si tienes problemas que no se resuelven con esta guía:
|
||||
|
||||
1. Revisa la documentación completa en `/docs/`
|
||||
2. Verifica los requisitos del sistema
|
||||
3. Reporta issues en el repositorio de GitHub
|
||||
4. Contacta al equipo de desarrollo
|
||||
|
||||
---
|
||||
|
||||
**¡Felicidades!** Tu tema Apus está configurado y listo para usar. 🎉
|
||||
@@ -1,951 +0,0 @@
|
||||
# Guía del Panel de Opciones - Apus Theme
|
||||
|
||||
**Versión:** 1.0.0
|
||||
**Última actualización:** Noviembre 2024
|
||||
|
||||
Esta guía detalla todas las opciones disponibles en el panel de administración del tema Apus.
|
||||
|
||||
---
|
||||
|
||||
## Tabla de Contenidos
|
||||
|
||||
1. [Acceder al Panel](#acceder-al-panel)
|
||||
2. [Estructura del Panel](#estructura-del-panel)
|
||||
3. [Tab 1: General Settings](#tab-1-general-settings)
|
||||
4. [Tab 2: Performance](#tab-2-performance)
|
||||
5. [Tab 3: SEO Settings](#tab-3-seo-settings)
|
||||
6. [Tab 4: Typography](#tab-4-typography)
|
||||
7. [Tab 5: Content Settings](#tab-5-content-settings)
|
||||
8. [Tab 6: Advanced](#tab-6-advanced)
|
||||
9. [Guardar y Gestionar Opciones](#guardar-y-gestionar-opciones)
|
||||
10. [Mejores Prácticas](#mejores-prácticas)
|
||||
|
||||
---
|
||||
|
||||
## Acceder al Panel
|
||||
|
||||
1. Inicia sesión en WordPress como administrador
|
||||
2. Ve a `Apariencia > Theme Options` en el menú lateral
|
||||
3. Verás el panel dividido en 6 tabs (pestañas)
|
||||
|
||||
**Nota:** Solo los administradores pueden acceder a este panel.
|
||||
|
||||
---
|
||||
|
||||
## Estructura del Panel
|
||||
|
||||
El panel está organizado en 6 tabs principales:
|
||||
|
||||
1. **General Settings** - Logo, favicon, información básica
|
||||
2. **Performance** - Optimizaciones de rendimiento
|
||||
3. **SEO Settings** - Configuraciones SEO
|
||||
4. **Typography** - Fuentes y tipografía
|
||||
5. **Content Settings** - TOC, posts relacionados, contenido
|
||||
6. **Advanced** - CSS/JS custom, tracking codes
|
||||
|
||||
Cada tab agrupa opciones relacionadas para facilitar la navegación.
|
||||
|
||||
---
|
||||
|
||||
## Tab 1: General Settings
|
||||
|
||||
Configuraciones generales del sitio.
|
||||
|
||||
### Site Logo
|
||||
|
||||
**Opción:** `apus_site_logo`
|
||||
**Tipo:** Media Upload
|
||||
|
||||
**Descripción:**
|
||||
Sube el logo principal del sitio que aparecerá en el header.
|
||||
|
||||
**Recomendaciones:**
|
||||
- Tamaño: 200-250px de ancho máximo
|
||||
- Formato: PNG con transparencia o SVG
|
||||
- Altura: 40-60px recomendada
|
||||
- Versión @2x para Retina displays
|
||||
|
||||
**Uso desde código:**
|
||||
```php
|
||||
$logo_id = apus_get_option('apus_site_logo');
|
||||
$logo_url = wp_get_attachment_image_url($logo_id, 'full');
|
||||
```
|
||||
|
||||
### Favicon
|
||||
|
||||
**Opción:** `apus_favicon`
|
||||
**Tipo:** Media Upload
|
||||
|
||||
**Descripción:**
|
||||
Icono que aparece en la pestaña del navegador.
|
||||
|
||||
**Recomendaciones:**
|
||||
- Tamaño: 32x32px o 64x64px
|
||||
- Formato: .ico, .png
|
||||
- Diseño simple (se ve muy pequeño)
|
||||
|
||||
**Nota:** WordPress también permite configurar favicon en `Apariencia > Personalizar > Identidad del sitio > Icono del sitio`
|
||||
|
||||
### Site Tagline
|
||||
|
||||
**Opción:** `apus_site_tagline`
|
||||
**Tipo:** Text
|
||||
|
||||
**Descripción:**
|
||||
Lema o descripción breve del sitio.
|
||||
|
||||
**Ejemplo:**
|
||||
- "Análisis de Precios Unitarios Profesionales"
|
||||
- "Tu fuente confiable de información"
|
||||
|
||||
**Uso desde código:**
|
||||
```php
|
||||
$tagline = apus_get_option('apus_site_tagline', 'Default tagline');
|
||||
```
|
||||
|
||||
### Copyright Text
|
||||
|
||||
**Opción:** `apus_copyright_text`
|
||||
**Tipo:** Textarea
|
||||
|
||||
**Descripción:**
|
||||
Texto de copyright que aparece en el footer.
|
||||
|
||||
**Valores por defecto:**
|
||||
```
|
||||
© 2024 Apus Theme. Todos los derechos reservados.
|
||||
```
|
||||
|
||||
**Variables disponibles:**
|
||||
- `{year}` - Año actual (automático)
|
||||
- `{site_name}` - Nombre del sitio
|
||||
|
||||
**Ejemplo:**
|
||||
```
|
||||
© {year} {site_name}. Todos los derechos reservados.
|
||||
```
|
||||
|
||||
### Timezone
|
||||
|
||||
**Opción:** `apus_timezone`
|
||||
**Tipo:** Select
|
||||
|
||||
**Descripción:**
|
||||
Zona horaria del sitio.
|
||||
|
||||
**Opciones comunes:**
|
||||
- America/Mexico_City (GMT-6)
|
||||
- America/Bogota (GMT-5)
|
||||
- America/Buenos_Aires (GMT-3)
|
||||
- Etc/UTC (GMT+0)
|
||||
|
||||
**Nota:** También se puede configurar en `Ajustes > Generales > Zona horaria`
|
||||
|
||||
---
|
||||
|
||||
## Tab 2: Performance
|
||||
|
||||
Optimizaciones de rendimiento y Core Web Vitals.
|
||||
|
||||
### Enable Lazy Loading
|
||||
|
||||
**Opción:** `apus_enable_lazy_loading`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Activa lazy loading nativo del navegador para imágenes e iframes.
|
||||
|
||||
**Efecto:**
|
||||
- Las imágenes fuera del viewport no se cargan inmediatamente
|
||||
- Mejora LCP (Largest Contentful Paint)
|
||||
- Reduce uso de ancho de banda
|
||||
|
||||
**Recomendación:** Mantener activado siempre.
|
||||
|
||||
### Enable Image Optimization
|
||||
|
||||
**Opción:** `apus_enable_image_optimization`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Activa el módulo de optimización de imágenes del tema.
|
||||
|
||||
**Características:**
|
||||
- Genera srcset responsive automáticamente
|
||||
- Lazy loading condicional
|
||||
- Preload para imágenes críticas (featured images)
|
||||
|
||||
**Recomendación:** Mantener activado. Combinar con plugin de optimización como Smush.
|
||||
|
||||
### Enable WebP Support
|
||||
|
||||
**Opción:** `apus_enable_webp`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Activa soporte para imágenes WebP.
|
||||
|
||||
**Requisitos:**
|
||||
- Servidor con soporte WebP
|
||||
- O plugin de conversión (ShortPixel, Smush Pro)
|
||||
|
||||
**Beneficios:**
|
||||
- Imágenes 25-35% más ligeras
|
||||
- Mejor performance
|
||||
- Misma calidad visual
|
||||
|
||||
**Recomendación:** Activar si tu servidor/plugin soporta WebP.
|
||||
|
||||
### Enable CSS Minification
|
||||
|
||||
**Opción:** `apus_enable_css_minification`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Minifica los archivos CSS del tema.
|
||||
|
||||
**Nota:** Si usas un plugin de cache (WP Rocket, Autoptimize), déjalo desactivado para evitar doble minificación.
|
||||
|
||||
### Enable JS Minification
|
||||
|
||||
**Opción:** `apus_enable_js_minification`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Minifica los archivos JavaScript del tema.
|
||||
|
||||
**Nota:** Similar a CSS, si usas plugin de cache, déjalo desactivado.
|
||||
|
||||
### Enable Resource Hints
|
||||
|
||||
**Opción:** `apus_enable_resource_hints`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Activa resource hints (dns-prefetch, preconnect, preload).
|
||||
|
||||
**Beneficios:**
|
||||
- Precarga de recursos críticos
|
||||
- Mejora tiempos de carga
|
||||
- Optimiza Core Web Vitals
|
||||
|
||||
**Recomendación:** Mantener activado.
|
||||
|
||||
### AdSense Delay Loading
|
||||
|
||||
**Opción:** `apus_enable_adsense_delay`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Retrasa la carga de AdSense hasta la primera interacción del usuario (scroll, touch, click).
|
||||
|
||||
**Beneficios:**
|
||||
- Mejora dramática en LCP
|
||||
- Mejora TBT (Total Blocking Time)
|
||||
- AdSense se carga, pero sin afectar performance
|
||||
|
||||
**Cómo usar:**
|
||||
1. Activa esta opción
|
||||
2. Agrega tu código de AdSense normalmente
|
||||
3. El tema interceptará y retrasará la carga
|
||||
|
||||
**Recomendación:** Activar siempre si usas AdSense.
|
||||
|
||||
### Cache Settings
|
||||
|
||||
**Opción:** `apus_cache_duration`
|
||||
**Tipo:** Number
|
||||
**Default:** 3600 (1 hora)
|
||||
|
||||
**Descripción:**
|
||||
Duración del cache en segundos para assets del tema.
|
||||
|
||||
**Valores comunes:**
|
||||
- 3600 = 1 hora
|
||||
- 86400 = 1 día
|
||||
- 604800 = 1 semana
|
||||
- 31536000 = 1 año (para producción)
|
||||
|
||||
**Recomendación:** 31536000 (1 año) en producción, 3600 durante desarrollo.
|
||||
|
||||
---
|
||||
|
||||
## Tab 3: SEO Settings
|
||||
|
||||
Configuraciones SEO básicas (Rank Math maneja el SEO avanzado).
|
||||
|
||||
### Default Meta Description
|
||||
|
||||
**Opción:** `apus_default_meta_description`
|
||||
**Tipo:** Textarea
|
||||
**Max:** 160 caracteres
|
||||
|
||||
**Descripción:**
|
||||
Meta descripción por defecto para páginas sin descripción específica.
|
||||
|
||||
**Ejemplo:**
|
||||
```
|
||||
Encuentra información profesional sobre análisis de precios unitarios,
|
||||
costos de construcción y presupuestos detallados.
|
||||
```
|
||||
|
||||
**Nota:** Rank Math sobrescribe esto si está configurado.
|
||||
|
||||
### Twitter Handle
|
||||
|
||||
**Opción:** `apus_twitter_handle`
|
||||
**Tipo:** Text
|
||||
|
||||
**Descripción:**
|
||||
Tu usuario de Twitter/X (sin @).
|
||||
|
||||
**Ejemplo:**
|
||||
- Correcto: `apustheme`
|
||||
- Incorrecto: `@apustheme`
|
||||
|
||||
**Uso:** Para Twitter Cards en meta tags.
|
||||
|
||||
### Facebook App ID
|
||||
|
||||
**Opción:** `apus_facebook_app_id`
|
||||
**Tipo:** Text
|
||||
|
||||
**Descripción:**
|
||||
ID de tu aplicación de Facebook para Open Graph.
|
||||
|
||||
**Cómo obtenerlo:**
|
||||
1. Ve a https://developers.facebook.com/
|
||||
2. Crea una app
|
||||
3. Copia el App ID
|
||||
|
||||
### Default Open Graph Image
|
||||
|
||||
**Opción:** `apus_default_og_image`
|
||||
**Tipo:** Media Upload
|
||||
|
||||
**Descripción:**
|
||||
Imagen por defecto para compartir en redes sociales.
|
||||
|
||||
**Recomendaciones:**
|
||||
- Tamaño: 1200 x 630px
|
||||
- Formato: JPG o PNG
|
||||
- Peso: < 300KB
|
||||
- Sin texto pequeño (se ve en thumbnail)
|
||||
|
||||
### Enable Breadcrumbs
|
||||
|
||||
**Opción:** `apus_enable_breadcrumbs`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Activa breadcrumbs (migas de pan) en posts y páginas.
|
||||
|
||||
**Nota:** El brief original indica "sin breadcrumbs" debido a títulos largos. Activar solo si necesitas.
|
||||
|
||||
### Schema.org Type
|
||||
|
||||
**Opción:** `apus_schema_type`
|
||||
**Tipo:** Select
|
||||
**Default:** Organization
|
||||
|
||||
**Descripción:**
|
||||
Tipo de schema para tu sitio.
|
||||
|
||||
**Opciones:**
|
||||
- Organization (empresa, sitio corporativo)
|
||||
- Person (blog personal)
|
||||
- LocalBusiness (negocio local)
|
||||
|
||||
**Nota:** Rank Math maneja schema avanzado.
|
||||
|
||||
---
|
||||
|
||||
## Tab 4: Typography
|
||||
|
||||
Configuración de fuentes del tema.
|
||||
|
||||
### Font Provider
|
||||
|
||||
**Opción:** `apus_font_provider`
|
||||
**Tipo:** Radio
|
||||
**Default:** System Fonts
|
||||
|
||||
**Descripción:**
|
||||
Elige el proveedor de fuentes.
|
||||
|
||||
**Opciones:**
|
||||
|
||||
#### System Fonts (Recomendado)
|
||||
- **Ventajas:**
|
||||
- Rendimiento óptimo (0 requests externos)
|
||||
- Privacy-friendly
|
||||
- Siempre disponible
|
||||
- **Desventajas:**
|
||||
- Menos opciones de diseño
|
||||
- Se ve diferente en cada SO
|
||||
|
||||
#### Google Fonts
|
||||
- **Ventajas:**
|
||||
- Miles de fuentes disponibles
|
||||
- Fácil de usar
|
||||
- **Desventajas:**
|
||||
- Request externo
|
||||
- Privacy concerns en Europa
|
||||
|
||||
#### Bunny Fonts
|
||||
- **Ventajas:**
|
||||
- GDPR-compliant
|
||||
- Clon de Google Fonts
|
||||
- Privacy-friendly
|
||||
- **Desventajas:**
|
||||
- Request externo (pero menor latencia que Google en EU)
|
||||
|
||||
### Heading Font Family
|
||||
|
||||
**Opción:** `apus_heading_font_family`
|
||||
**Tipo:** Select
|
||||
**Default:** Depends on provider
|
||||
|
||||
**Descripción:**
|
||||
Fuente para títulos (H1-H6).
|
||||
|
||||
**System Fonts disponibles:**
|
||||
- System Default
|
||||
- -apple-system
|
||||
- Georgia
|
||||
- Times New Roman
|
||||
|
||||
**Google/Bunny Fonts:** Lista dinámica de fuentes populares.
|
||||
|
||||
### Body Font Family
|
||||
|
||||
**Opción:** `apus_body_font_family`
|
||||
**Tipo:** Select
|
||||
**Default:** Depends on provider
|
||||
|
||||
**Descripción:**
|
||||
Fuente para texto del cuerpo (párrafos, etc.).
|
||||
|
||||
### Base Font Size
|
||||
|
||||
**Opción:** `apus_base_font_size`
|
||||
**Tipo:** Number
|
||||
**Default:** 16
|
||||
**Unit:** px
|
||||
|
||||
**Descripción:**
|
||||
Tamaño de fuente base en píxeles.
|
||||
|
||||
**Recomendaciones:**
|
||||
- 16px: Estándar, muy legible
|
||||
- 18px: Para sitios con mucho texto
|
||||
- 14px: Solo para UIs compactas (no recomendado)
|
||||
|
||||
### Heading Font Weight
|
||||
|
||||
**Opción:** `apus_heading_font_weight`
|
||||
**Tipo:** Select
|
||||
**Default:** 700 (Bold)
|
||||
|
||||
**Opciones:**
|
||||
- 300 (Light)
|
||||
- 400 (Regular)
|
||||
- 500 (Medium)
|
||||
- 600 (Semi-bold)
|
||||
- 700 (Bold)
|
||||
- 800 (Extra-bold)
|
||||
|
||||
### Body Font Weight
|
||||
|
||||
**Opción:** `apus_body_font_weight`
|
||||
**Tipo:** Select
|
||||
**Default:** 400 (Regular)
|
||||
|
||||
**Recomendación:** 400 para texto normal, 500 si usas font size pequeña.
|
||||
|
||||
### Line Height
|
||||
|
||||
**Opción:** `apus_line_height`
|
||||
**Tipo:** Number
|
||||
**Default:** 1.6
|
||||
**Range:** 1.2 - 2.0
|
||||
|
||||
**Descripción:**
|
||||
Altura de línea (interlineado).
|
||||
|
||||
**Recomendaciones:**
|
||||
- 1.4: Texto muy compacto
|
||||
- 1.6: Estándar, muy legible (recomendado)
|
||||
- 1.8: Para textos largos, blogs
|
||||
- 2.0: Muy espaciado
|
||||
|
||||
---
|
||||
|
||||
## Tab 5: Content Settings
|
||||
|
||||
Configuraciones de contenido y funcionalidades.
|
||||
|
||||
### Table of Contents (TOC)
|
||||
|
||||
#### Enable TOC
|
||||
|
||||
**Opción:** `apus_enable_toc`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Activa tabla de contenidos automática en posts.
|
||||
|
||||
#### TOC Title
|
||||
|
||||
**Opción:** `apus_toc_title`
|
||||
**Tipo:** Text
|
||||
**Default:** "Tabla de Contenidos"
|
||||
|
||||
**Descripción:**
|
||||
Título que aparece encima del TOC.
|
||||
|
||||
**Ejemplos:**
|
||||
- "Contenido"
|
||||
- "En este artículo"
|
||||
- "Índice"
|
||||
|
||||
#### TOC Position
|
||||
|
||||
**Opción:** `apus_toc_position`
|
||||
**Tipo:** Select
|
||||
**Default:** "before_content"
|
||||
|
||||
**Opciones:**
|
||||
- `before_content` - Antes del contenido (arriba del post)
|
||||
- `sidebar` - En el sidebar (sticky)
|
||||
|
||||
**Recomendación:** `before_content` para posts cortos, `sidebar` para posts largos.
|
||||
|
||||
#### Minimum Headings
|
||||
|
||||
**Opción:** `apus_toc_min_headings`
|
||||
**Tipo:** Number
|
||||
**Default:** 3
|
||||
|
||||
**Descripción:**
|
||||
Número mínimo de headings para mostrar el TOC.
|
||||
|
||||
**Lógica:**
|
||||
- Si post tiene menos headings que este número, no se muestra TOC
|
||||
- Evita TOC en posts cortos
|
||||
|
||||
**Recomendación:** 3-4 headings mínimo.
|
||||
|
||||
#### Heading Depth
|
||||
|
||||
**Opción:** `apus_toc_heading_depth`
|
||||
**Tipo:** Select
|
||||
**Default:** "h2,h3"
|
||||
|
||||
**Opciones:**
|
||||
- `h2` - Solo H2
|
||||
- `h2,h3` - H2 y H3
|
||||
- `h2,h3,h4` - H2, H3 y H4
|
||||
- `h2,h3,h4,h5,h6` - Todos
|
||||
|
||||
**Recomendación:** `h2,h3` para mayoría de posts.
|
||||
|
||||
### Related Posts
|
||||
|
||||
#### Enable Related Posts
|
||||
|
||||
**Opción:** `apus_enable_related_posts`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Muestra posts relacionados al final del post.
|
||||
|
||||
**Criterio:** Posts de la misma categoría.
|
||||
|
||||
#### Related Posts Title
|
||||
|
||||
**Opción:** `apus_related_posts_title`
|
||||
**Tipo:** Text
|
||||
**Default:** "Artículos Relacionados"
|
||||
|
||||
**Ejemplos:**
|
||||
- "También te puede interesar"
|
||||
- "Más sobre este tema"
|
||||
- "Lectura recomendada"
|
||||
|
||||
#### Number of Related Posts
|
||||
|
||||
**Opción:** `apus_related_posts_count`
|
||||
**Tipo:** Number
|
||||
**Default:** 4
|
||||
**Range:** 2-12
|
||||
|
||||
**Descripción:**
|
||||
Cuántos posts relacionados mostrar.
|
||||
|
||||
**Recomendaciones:**
|
||||
- 3-4: Para layouts estrechos
|
||||
- 6: Estándar
|
||||
- 8-12: Para sitios con mucho contenido
|
||||
|
||||
#### Related Posts Order
|
||||
|
||||
**Opción:** `apus_related_posts_order`
|
||||
**Tipo:** Select
|
||||
**Default:** "date"
|
||||
|
||||
**Opciones:**
|
||||
- `date` - Más recientes primero
|
||||
- `random` - Orden aleatorio (bueno para SEO interno)
|
||||
- `comment_count` - Más comentados primero
|
||||
- `modified` - Recientemente actualizados
|
||||
|
||||
**Recomendación:** `random` para variar el contenido mostrado.
|
||||
|
||||
#### Show Thumbnails in Related Posts
|
||||
|
||||
**Opción:** `apus_related_posts_show_thumbnail`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Muestra imagen destacada en cada post relacionado.
|
||||
|
||||
#### Show Excerpt in Related Posts
|
||||
|
||||
**Opción:** `apus_related_posts_show_excerpt`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Muestra excerpt breve debajo del título.
|
||||
|
||||
**Nota:** Activar solo si tienes excerpts bien escritos.
|
||||
|
||||
#### Show Date in Related Posts
|
||||
|
||||
**Opción:** `apus_related_posts_show_date`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Muestra fecha de publicación.
|
||||
|
||||
### Other Content Settings
|
||||
|
||||
#### Excerpt Length
|
||||
|
||||
**Opción:** `apus_excerpt_length`
|
||||
**Tipo:** Number
|
||||
**Default:** 55
|
||||
**Unit:** words
|
||||
|
||||
**Descripción:**
|
||||
Longitud del excerpt en número de palabras.
|
||||
|
||||
**Recomendaciones:**
|
||||
- 30-40: Muy corto, para grids compactos
|
||||
- 55: Estándar (WordPress default)
|
||||
- 80-100: Para layouts amplios
|
||||
|
||||
#### Read More Text
|
||||
|
||||
**Opción:** `apus_read_more_text`
|
||||
**Tipo:** Text
|
||||
**Default:** "Leer más"
|
||||
|
||||
**Ejemplos:**
|
||||
- "Continuar leyendo"
|
||||
- "Ver más"
|
||||
- "Leer artículo completo"
|
||||
|
||||
#### Show Featured Images in Archives
|
||||
|
||||
**Opción:** `apus_show_featured_in_archives`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Activado ✓
|
||||
|
||||
**Descripción:**
|
||||
Muestra imágenes destacadas en listados de posts.
|
||||
|
||||
#### Show Author Bio
|
||||
|
||||
**Opción:** `apus_show_author_bio`
|
||||
**Tipo:** Checkbox
|
||||
**Default:** Desactivado
|
||||
|
||||
**Descripción:**
|
||||
Muestra biografía del autor al final del post.
|
||||
|
||||
**Requisito:** El autor debe tener información biográfica en su perfil.
|
||||
|
||||
---
|
||||
|
||||
## Tab 6: Advanced
|
||||
|
||||
Configuraciones avanzadas para usuarios experimentados.
|
||||
|
||||
### Custom CSS
|
||||
|
||||
**Opción:** `apus_custom_css`
|
||||
**Tipo:** Code Editor (CSS)
|
||||
|
||||
**Descripción:**
|
||||
CSS personalizado que se carga después de todos los estilos del tema.
|
||||
|
||||
**Ejemplo:**
|
||||
```css
|
||||
/* Cambiar color del header */
|
||||
.site-header {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Aumentar tamaño de títulos */
|
||||
h1.entry-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** Usa el Customizer para CSS simple. Esta opción es para CSS avanzado.
|
||||
|
||||
### Custom JavaScript
|
||||
|
||||
**Opción:** `apus_custom_js`
|
||||
**Tipo:** Code Editor (JavaScript)
|
||||
|
||||
**Descripción:**
|
||||
JavaScript personalizado que se carga en el footer.
|
||||
|
||||
**Ejemplo:**
|
||||
```javascript
|
||||
// Log cuando la página carga
|
||||
console.log('Página cargada completamente');
|
||||
|
||||
// Agregar funcionalidad custom
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Tu código aquí
|
||||
});
|
||||
```
|
||||
|
||||
**Advertencia:** JavaScript mal escrito puede romper el sitio. Prueba en entorno de desarrollo primero.
|
||||
|
||||
### Header Scripts
|
||||
|
||||
**Opción:** `apus_header_scripts`
|
||||
**Tipo:** Textarea
|
||||
|
||||
**Descripción:**
|
||||
Scripts que se insertan en el `<head>`. Útil para meta tags, verification codes, etc.
|
||||
|
||||
**Usos comunes:**
|
||||
- Google Site Verification
|
||||
- Facebook Domain Verification
|
||||
- Pinterest Site Verification
|
||||
- Schema markup adicional
|
||||
|
||||
**Ejemplo:**
|
||||
```html
|
||||
<!-- Google Site Verification -->
|
||||
<meta name="google-site-verification" content="tu-codigo-aqui" />
|
||||
```
|
||||
|
||||
### Footer Scripts
|
||||
|
||||
**Opción:** `apus_footer_scripts`
|
||||
**Tipo:** Textarea
|
||||
|
||||
**Descripción:**
|
||||
Scripts que se insertan antes del cierre de `</body>`.
|
||||
|
||||
**Usos comunes:**
|
||||
- Códigos de tracking
|
||||
- Chat widgets
|
||||
- Widgets de redes sociales
|
||||
|
||||
### Google Analytics ID
|
||||
|
||||
**Opción:** `apus_google_analytics_id`
|
||||
**Tipo:** Text
|
||||
**Placeholder:** G-XXXXXXXXXX o UA-XXXXXXXXX-X
|
||||
|
||||
**Descripción:**
|
||||
Tu Google Analytics Measurement ID.
|
||||
|
||||
**Cómo obtenerlo:**
|
||||
1. Ve a https://analytics.google.com/
|
||||
2. Admin > Propiedad > Detalles de la propiedad
|
||||
3. Copia el Measurement ID
|
||||
|
||||
**Formatos:**
|
||||
- GA4: `G-XXXXXXXXXX`
|
||||
- Universal Analytics (legacy): `UA-XXXXXXXXX-X`
|
||||
|
||||
**Nota:** El tema insertará automáticamente el código de tracking.
|
||||
|
||||
### Facebook Pixel ID
|
||||
|
||||
**Opción:** `apus_facebook_pixel_id`
|
||||
**Tipo:** Text
|
||||
**Placeholder:** Número de 15-16 dígitos
|
||||
|
||||
**Descripción:**
|
||||
Tu Facebook Pixel ID para tracking de eventos.
|
||||
|
||||
**Cómo obtenerlo:**
|
||||
1. Ve a https://business.facebook.com/events_manager
|
||||
2. Selecciona tu pixel
|
||||
3. Copia el Pixel ID
|
||||
|
||||
### Custom Tracking Codes
|
||||
|
||||
**Opción:** `apus_custom_tracking`
|
||||
**Tipo:** Textarea
|
||||
|
||||
**Descripción:**
|
||||
Otros códigos de tracking (Hotjar, Microsoft Clarity, etc.).
|
||||
|
||||
**Ejemplo - Hotjar:**
|
||||
```html
|
||||
<!-- Hotjar Tracking Code -->
|
||||
<script>
|
||||
(function(h,o,t,j,a,r){
|
||||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||||
h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
|
||||
a=o.getElementsByTagName('head')[0];
|
||||
r=o.createElement('script');r.async=1;
|
||||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||||
a.appendChild(r);
|
||||
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Guardar y Gestionar Opciones
|
||||
|
||||
### Guardar Cambios
|
||||
|
||||
1. Haz tus cambios en cualquier tab
|
||||
2. Haz clic en "Save Changes" al final de la página
|
||||
3. Verás un mensaje de confirmación: "Settings saved successfully"
|
||||
|
||||
**Nota:** Los cambios se guardan inmediatamente y afectan el sitio en vivo.
|
||||
|
||||
### Reset to Defaults
|
||||
|
||||
1. Haz clic en el botón "Reset to Defaults"
|
||||
2. Confirma la acción en el popup
|
||||
3. Todas las opciones volverán a sus valores por defecto
|
||||
|
||||
**Advertencia:** Esta acción no se puede deshacer.
|
||||
|
||||
### Import/Export Settings
|
||||
|
||||
#### Export (Preparado para futuro)
|
||||
|
||||
1. Haz clic en "Export Settings"
|
||||
2. Se descargará un archivo JSON con todas tus opciones
|
||||
3. Guárdalo como backup
|
||||
|
||||
#### Import (Preparado para futuro)
|
||||
|
||||
1. Haz clic en "Import Settings"
|
||||
2. Selecciona un archivo JSON previamente exportado
|
||||
3. Confirma la importación
|
||||
4. Las opciones se sobrescriben con las del archivo
|
||||
|
||||
**Uso común:**
|
||||
- Backup antes de cambios grandes
|
||||
- Copiar configuración entre sitios
|
||||
- Restaurar configuración anterior
|
||||
|
||||
---
|
||||
|
||||
## Mejores Prácticas
|
||||
|
||||
### Performance
|
||||
|
||||
1. **Activa lazy loading y WebP** siempre
|
||||
2. **AdSense delay** si usas anuncios
|
||||
3. **System fonts** para mejor performance
|
||||
4. **Resource hints** activados
|
||||
5. **No minifiques** CSS/JS si usas plugin de cache (evita conflictos)
|
||||
|
||||
### SEO
|
||||
|
||||
1. **Deja que Rank Math maneje el SEO avanzado**
|
||||
2. Usa el panel solo para defaults
|
||||
3. Configura Open Graph image default
|
||||
4. Agrega tracking codes en Advanced tab
|
||||
|
||||
### Content
|
||||
|
||||
1. **TOC:** Activar con mínimo 3-4 headings
|
||||
2. **Related Posts:** 4-6 posts, orden aleatorio
|
||||
3. **Excerpts:** 55-80 palabras
|
||||
4. **Featured images:** Activar en archives
|
||||
|
||||
### Typography
|
||||
|
||||
1. **System fonts** para mejor performance
|
||||
2. **Base font size:** 16-18px
|
||||
3. **Line height:** 1.6-1.8 para legibilidad
|
||||
4. **Heading weight:** 700 (bold)
|
||||
|
||||
### Development
|
||||
|
||||
1. **Prueba en staging** antes de producción
|
||||
2. **Exporta settings** antes de cambios grandes
|
||||
3. **Custom CSS/JS:** Usar con precaución
|
||||
4. **Header/Footer scripts:** Validar código antes de insertar
|
||||
|
||||
---
|
||||
|
||||
## Acceso desde Código
|
||||
|
||||
Todos los helpers están disponibles en `inc/theme-options-helpers.php`:
|
||||
|
||||
```php
|
||||
// Obtener cualquier opción
|
||||
$value = apus_get_option('apus_option_name', 'default_value');
|
||||
|
||||
// Ejemplos específicos
|
||||
$enable_toc = apus_enable_toc(); // bool
|
||||
$toc_title = apus_get_toc_title(); // string
|
||||
$related_count = apus_get_related_posts_count(); // int
|
||||
$logo_id = apus_get_option('apus_site_logo'); // attachment ID
|
||||
|
||||
// Verificaciones
|
||||
if (apus_enable_lazy_loading()) {
|
||||
// Agregar lazy loading
|
||||
}
|
||||
|
||||
if (apus_enable_related_posts()) {
|
||||
// Mostrar related posts
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Soporte
|
||||
|
||||
Si tienes dudas sobre alguna opción:
|
||||
|
||||
1. Lee esta documentación completa
|
||||
2. Revisa [01-initial-setup.md](01-initial-setup.md) para configuración básica
|
||||
3. Revisa [03-performance-seo.md](03-performance-seo.md) para optimizaciones
|
||||
4. Reporta issues en GitHub si algo no funciona
|
||||
|
||||
---
|
||||
|
||||
**Tip final:** No actives todas las opciones a la vez. Ve agregando funcionalidades gradualmente y verifica que funcionen correctamente antes de agregar más.
|
||||
@@ -1,987 +0,0 @@
|
||||
# Guía de Performance y SEO - Apus Theme
|
||||
|
||||
**Versión:** 1.0.0
|
||||
**Última actualización:** Noviembre 2024
|
||||
|
||||
Esta guía detalla todas las optimizaciones de rendimiento y SEO implementadas en el tema Apus, y cómo maximizar el performance de tu sitio.
|
||||
|
||||
---
|
||||
|
||||
## Tabla de Contenidos
|
||||
|
||||
1. [Core Web Vitals](#core-web-vitals)
|
||||
2. [Optimizaciones del Tema](#optimizaciones-del-tema)
|
||||
3. [Configuración de Rank Math](#configuración-de-rank-math)
|
||||
4. [Plugins Recomendados](#plugins-recomendados)
|
||||
5. [Hosting y Servidor](#hosting-y-servidor)
|
||||
6. [Testing y Monitoreo](#testing-y-monitoreo)
|
||||
7. [Checklist de Optimización](#checklist-de-optimización)
|
||||
8. [Solución de Problemas](#solución-de-problemas)
|
||||
|
||||
---
|
||||
|
||||
## Core Web Vitals
|
||||
|
||||
### ¿Qué son los Core Web Vitals?
|
||||
|
||||
Los Core Web Vitals son métricas de Google que miden la experiencia del usuario:
|
||||
|
||||
1. **LCP (Largest Contentful Paint)**: Tiempo que tarda en cargarse el contenido principal
|
||||
- **Bueno:** < 2.5 segundos
|
||||
- **Necesita mejora:** 2.5 - 4.0 segundos
|
||||
- **Pobre:** > 4.0 segundos
|
||||
|
||||
2. **FID (First Input Delay) / INP (Interaction to Next Paint)**: Tiempo de respuesta a la primera interacción
|
||||
- **Bueno:** < 100ms (FID) / < 200ms (INP)
|
||||
- **Necesita mejora:** 100-300ms / 200-500ms
|
||||
- **Pobre:** > 300ms / > 500ms
|
||||
|
||||
3. **CLS (Cumulative Layout Shift)**: Estabilidad visual durante la carga
|
||||
- **Bueno:** < 0.1
|
||||
- **Necesita mejora:** 0.1 - 0.25
|
||||
- **Pobre:** > 0.25
|
||||
|
||||
### Objetivos del Tema Apus
|
||||
|
||||
El tema Apus está diseñado para lograr:
|
||||
|
||||
**Desktop:**
|
||||
- Performance: 95-100
|
||||
- Accessibility: 95-100
|
||||
- Best Practices: 95-100
|
||||
- SEO: 100
|
||||
|
||||
**Mobile:**
|
||||
- Performance: 80-95 (depende del hosting)
|
||||
- Accessibility: 95-100
|
||||
- Best Practices: 95-100
|
||||
- SEO: 100
|
||||
|
||||
---
|
||||
|
||||
## Optimizaciones del Tema
|
||||
|
||||
### 1. Asset Optimization
|
||||
|
||||
#### CSS Modular
|
||||
|
||||
El tema usa CSS modular en lugar de un solo archivo gigante:
|
||||
|
||||
```
|
||||
assets/css/
|
||||
├── accessibility.css (12 KB)
|
||||
├── animations.css (11 KB)
|
||||
├── footer.css (11 KB)
|
||||
├── header.css (12 KB)
|
||||
├── related-posts.css (10 KB)
|
||||
├── responsive.css (6 KB)
|
||||
├── theme.css (13 KB)
|
||||
├── toc.css (7 KB)
|
||||
└── utilities.css (8 KB)
|
||||
```
|
||||
|
||||
**Ventajas:**
|
||||
- Solo se carga lo necesario
|
||||
- Fácil de mantener
|
||||
- Cacheable individualmente
|
||||
|
||||
#### JavaScript Mínimo
|
||||
|
||||
**Total JS del tema:** ~100 KB (incluyendo Bootstrap)
|
||||
|
||||
- `bootstrap.bundle.min.js` (79 KB) - Necesario para componentes
|
||||
- `header.js` (9 KB) - Navegación y sticky header
|
||||
- `toc.js` (6 KB) - Table of contents
|
||||
- `adsense-loader.js` (2 KB) - AdSense delay
|
||||
|
||||
**Sin jQuery:** Todo en vanilla JavaScript.
|
||||
|
||||
#### Bootstrap Local
|
||||
|
||||
Bootstrap se sirve localmente, no desde CDN:
|
||||
|
||||
**Ventajas:**
|
||||
- 0 requests externos
|
||||
- No depende de CDN de terceros
|
||||
- Mayor control de versión
|
||||
- Privacy-friendly
|
||||
|
||||
### 2. Image Optimization
|
||||
|
||||
#### Lazy Loading Nativo
|
||||
|
||||
```php
|
||||
// Implementado en inc/image-optimization.php
|
||||
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
|
||||
if ($context === 'the_content') {
|
||||
return 'lazy';
|
||||
}
|
||||
return $value;
|
||||
}, 10, 3);
|
||||
```
|
||||
|
||||
**Beneficios:**
|
||||
- Imágenes fuera del viewport no se cargan
|
||||
- Mejora LCP
|
||||
- Reduce uso de ancho de banda
|
||||
|
||||
#### Responsive Images (srcset)
|
||||
|
||||
```php
|
||||
// Automático en WordPress
|
||||
add_image_size('apus-thumbnail', 400, 300, true);
|
||||
add_image_size('apus-medium', 800, 600, true);
|
||||
add_image_size('apus-large', 1200, 900, true);
|
||||
```
|
||||
|
||||
WordPress genera automáticamente:
|
||||
```html
|
||||
<img src="image-800.jpg"
|
||||
srcset="image-400.jpg 400w,
|
||||
image-800.jpg 800w,
|
||||
image-1200.jpg 1200w"
|
||||
sizes="(max-width: 768px) 100vw, 800px" />
|
||||
```
|
||||
|
||||
#### Preload de Imágenes Críticas
|
||||
|
||||
Featured images en single posts se precargan:
|
||||
|
||||
```php
|
||||
// En inc/image-optimization.php
|
||||
function apus_preload_featured_image() {
|
||||
if (is_singular() && has_post_thumbnail()) {
|
||||
$image_url = get_the_post_thumbnail_url(get_the_ID(), 'apus-featured-large');
|
||||
echo '<link rel="preload" as="image" href="' . esc_url($image_url) . '">';
|
||||
}
|
||||
}
|
||||
add_action('wp_head', 'apus_preload_featured_image', 5);
|
||||
```
|
||||
|
||||
**Beneficio:** Mejora LCP dramáticamente.
|
||||
|
||||
### 3. Resource Hints
|
||||
|
||||
```php
|
||||
// En inc/performance.php
|
||||
function apus_add_resource_hints($hints, $relation_type) {
|
||||
if ('dns-prefetch' === $relation_type) {
|
||||
// Pre-resolve DNS para recursos externos
|
||||
$hints[] = '//fonts.googleapis.com'; // Si usas Google Fonts
|
||||
}
|
||||
|
||||
if ('preconnect' === $relation_type) {
|
||||
// Establecer conexión temprana
|
||||
$hints[] = ['href' => 'https://fonts.gstatic.com', 'crossorigin'];
|
||||
}
|
||||
|
||||
return $hints;
|
||||
}
|
||||
add_filter('wp_resource_hints', 'apus_add_resource_hints', 10, 2);
|
||||
```
|
||||
|
||||
**Resource hints implementados:**
|
||||
- `dns-prefetch`: Pre-resolve DNS
|
||||
- `preconnect`: Establecer conexión temprana
|
||||
- `preload`: Cargar recursos críticos
|
||||
|
||||
### 4. WordPress Bloat Removal
|
||||
|
||||
El tema elimina características innecesarias de WordPress:
|
||||
|
||||
```php
|
||||
// En inc/performance.php
|
||||
|
||||
// Remove emoji scripts
|
||||
remove_action('wp_head', 'print_emoji_detection_script', 7);
|
||||
remove_action('wp_print_styles', 'print_emoji_styles');
|
||||
|
||||
// Remove oEmbed
|
||||
remove_action('wp_head', 'wp_oembed_add_discovery_links');
|
||||
remove_action('wp_head', 'wp_oembed_add_host_js');
|
||||
|
||||
// Remove feeds
|
||||
remove_action('wp_head', 'feed_links', 2);
|
||||
remove_action('wp_head', 'feed_links_extra', 3);
|
||||
|
||||
// Remove RSD & WLW
|
||||
remove_action('wp_head', 'rsd_link');
|
||||
remove_action('wp_head', 'wlwmanifest_link');
|
||||
|
||||
// Remove generator tag
|
||||
remove_action('wp_head', 'wp_generator');
|
||||
|
||||
// Disable Dashicons for non-logged users
|
||||
function apus_dequeue_dashicons() {
|
||||
if (!is_user_logged_in()) {
|
||||
wp_dequeue_style('dashicons');
|
||||
wp_deregister_style('dashicons');
|
||||
}
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'apus_dequeue_dashicons');
|
||||
```
|
||||
|
||||
**Ahorro:** ~50-70 KB y 3-5 requests menos.
|
||||
|
||||
### 5. AdSense Delay Loading
|
||||
|
||||
```javascript
|
||||
// En assets/js/adsense-loader.js
|
||||
let adsenseLoaded = false;
|
||||
const events = ['scroll', 'mousemove', 'touchstart', 'click'];
|
||||
|
||||
function loadAdSense() {
|
||||
if (adsenseLoaded) return;
|
||||
adsenseLoaded = true;
|
||||
|
||||
// Cargar script de AdSense
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
|
||||
script.async = true;
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Remover event listeners
|
||||
events.forEach(event => {
|
||||
window.removeEventListener(event, loadAdSense);
|
||||
});
|
||||
}
|
||||
|
||||
// Agregar event listeners
|
||||
events.forEach(event => {
|
||||
window.addEventListener(event, loadAdSense, { once: true, passive: true });
|
||||
});
|
||||
|
||||
// Fallback: cargar después de 5 segundos
|
||||
setTimeout(loadAdSense, 5000);
|
||||
```
|
||||
|
||||
**Beneficio:** Mejora LCP en 1-2 segundos, TBT en 100-300ms.
|
||||
|
||||
### 6. System Fonts
|
||||
|
||||
Por defecto, el tema usa fuentes del sistema:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-serif: Georgia, "Times New Roman", Times, serif;
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono",
|
||||
Menlo, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-system);
|
||||
}
|
||||
```
|
||||
|
||||
**Ventajas:**
|
||||
- 0 requests de red
|
||||
- 0 latencia
|
||||
- Carga instantánea
|
||||
- Privacy-friendly
|
||||
|
||||
**vs Google Fonts:**
|
||||
- Google Fonts: +100-200ms de latencia
|
||||
- System Fonts: 0ms
|
||||
|
||||
---
|
||||
|
||||
## Configuración de Rank Math
|
||||
|
||||
### Instalación y Setup Inicial
|
||||
|
||||
1. **Instalar Rank Math:**
|
||||
```
|
||||
Plugins > Añadir nuevo > Buscar "Rank Math"
|
||||
```
|
||||
|
||||
2. **Asistente de Configuración:**
|
||||
- Modo: **Easy** (principiantes) o **Advanced** (expertos)
|
||||
- Conectar con Google Search Console (muy recomendado)
|
||||
- Activar módulos recomendados
|
||||
|
||||
### Módulos Recomendados
|
||||
|
||||
**Activar:**
|
||||
- ✓ SEO Analysis
|
||||
- ✓ Sitemap
|
||||
- ✓ Schema Markup
|
||||
- ✓ Local SEO (si es negocio local)
|
||||
- ✓ 404 Monitor (monitorear errores)
|
||||
- ✓ Redirections (gestionar redirecciones)
|
||||
|
||||
**Desactivar:**
|
||||
- ✗ Analytics (si usas Google Analytics directo)
|
||||
- ✗ WooCommerce (si no usas eCommerce)
|
||||
|
||||
### Configuración General
|
||||
|
||||
#### 1. Títulos y Meta
|
||||
|
||||
**Configuración:**
|
||||
```
|
||||
Rank Math > Títulos y Meta
|
||||
```
|
||||
|
||||
**Posts:**
|
||||
- Formato de título: `%title% %sep% %sitename%`
|
||||
- Meta description: Usar plantilla o escribir manual
|
||||
- Mostrar en resultados: ✓
|
||||
|
||||
**Páginas:**
|
||||
- Formato: `%title% %sep% %sitename%`
|
||||
- Meta description: Manual para cada página importante
|
||||
|
||||
**Separador:** `|` o `-` (el que prefieras)
|
||||
|
||||
#### 2. Sitemap
|
||||
|
||||
**Configuración:**
|
||||
```
|
||||
Rank Math > Sitemap Settings
|
||||
```
|
||||
|
||||
**Incluir en sitemap:**
|
||||
- ✓ Posts
|
||||
- ✓ Pages
|
||||
- ✓ Categories
|
||||
- ✗ Tags (opcional, puede causar thin content)
|
||||
- ✗ Authors (a menos que sea blog multi-autor)
|
||||
|
||||
**Frecuencia de actualización:**
|
||||
- Posts: Daily
|
||||
- Pages: Weekly
|
||||
- Categories: Weekly
|
||||
|
||||
**Enviar sitemap a:**
|
||||
- Google Search Console: `https://tudominio.com/sitemap_index.xml`
|
||||
- Bing Webmaster Tools: mismo URL
|
||||
|
||||
#### 3. Schema Markup
|
||||
|
||||
**Configuración:**
|
||||
```
|
||||
Rank Math > Schema Markup
|
||||
```
|
||||
|
||||
**Schema por defecto:**
|
||||
- Organization: Para sitios corporativos
|
||||
- Logo
|
||||
- Social profiles
|
||||
- Contact info
|
||||
|
||||
- Website Schema
|
||||
- Site name
|
||||
- URL
|
||||
|
||||
**Schema para Posts (Article):**
|
||||
- Rank Math lo genera automáticamente
|
||||
- Incluye: headline, image, author, datePublished, dateModified
|
||||
|
||||
**Verificar schema:**
|
||||
1. Ve a https://search.google.com/test/rich-results
|
||||
2. Ingresa URL de un post
|
||||
3. Verifica que Article schema esté correcto
|
||||
|
||||
#### 4. Search Console
|
||||
|
||||
**Conectar Search Console:**
|
||||
```
|
||||
Rank Math > General Settings > Search Console
|
||||
```
|
||||
|
||||
1. Haz clic en "Connect to Google Search Console"
|
||||
2. Autoriza tu cuenta de Google
|
||||
3. Selecciona tu propiedad
|
||||
|
||||
**Beneficios:**
|
||||
- Ver errores de indexación en el dashboard
|
||||
- Monitorear keywords que traen tráfico
|
||||
- Recibir alertas de problemas
|
||||
|
||||
### Optimización de Posts
|
||||
|
||||
#### Meta Box de Rank Math
|
||||
|
||||
Al editar un post, verás el meta box de Rank Math en la parte inferior:
|
||||
|
||||
**1. Focus Keyword:**
|
||||
- Agrega tu keyword principal
|
||||
- Rank Math analizará el post
|
||||
|
||||
**2. SEO Analysis:**
|
||||
Apunta a 80/100 o más:
|
||||
- ✓ Keyword en título
|
||||
- ✓ Keyword en URL
|
||||
- ✓ Keyword en primer párrafo
|
||||
- ✓ Keyword en H2/H3
|
||||
- ✓ Links internos
|
||||
- ✓ Links externos
|
||||
- ✓ Alt text en imágenes
|
||||
|
||||
**3. Content AI (Premium):**
|
||||
- Analiza competencia
|
||||
- Sugiere keywords relacionadas
|
||||
- Recomienda longitud de contenido
|
||||
|
||||
#### Schema por Post
|
||||
|
||||
Puedes personalizar schema por post:
|
||||
|
||||
- **Tipo de artículo:** Article, BlogPosting, NewsArticle
|
||||
- **Author:** Autor del post
|
||||
- **Publisher:** Tu organización
|
||||
- **Image:** Featured image (automático)
|
||||
|
||||
### Local SEO (Si aplica)
|
||||
|
||||
**Para negocios locales:**
|
||||
|
||||
```
|
||||
Rank Math > Local SEO > Business Info
|
||||
```
|
||||
|
||||
Configura:
|
||||
- Tipo de negocio
|
||||
- Dirección completa
|
||||
- Teléfono
|
||||
- Horarios de atención
|
||||
- Área de servicio
|
||||
|
||||
**Beneficio:** Aparece en búsquedas locales de Google Maps.
|
||||
|
||||
---
|
||||
|
||||
## Plugins Recomendados
|
||||
|
||||
### Cache (Esencial)
|
||||
|
||||
#### WP Rocket (Premium, Recomendado)
|
||||
|
||||
**Precio:** ~$59/año
|
||||
**Website:** https://wp-rocket.me/
|
||||
|
||||
**Por qué WP Rocket:**
|
||||
- Configuración automática (funciona out-of-the-box)
|
||||
- Cache de página
|
||||
- Cache de objetos
|
||||
- Minificación CSS/JS
|
||||
- Lazy loading (desactivar, usa el del tema)
|
||||
- Database optimization
|
||||
- CDN integration
|
||||
- Preload de cache
|
||||
|
||||
**Configuración recomendada:**
|
||||
1. Instalar y activar
|
||||
2. Settings > WP Rocket
|
||||
3. **Cache tab:**
|
||||
- Mobile cache: ✓
|
||||
- User cache: ✓ (si tienes usuarios logged)
|
||||
4. **File Optimization:**
|
||||
- Minify CSS: ✓
|
||||
- Minify JS: ✓
|
||||
- Defer JS: ✓
|
||||
- Remove jQuery Migrate: ✓
|
||||
5. **Media:**
|
||||
- Lazy Load: ✗ (el tema ya lo hace)
|
||||
- WebP: ✓ (si tu servidor soporta)
|
||||
6. **Preload:**
|
||||
- Activate preload: ✓
|
||||
- Prefetch DNS: Agregar Google Fonts si los usas
|
||||
7. **Database:**
|
||||
- Post Cleanup: ✓
|
||||
- Comments Cleanup: ✓
|
||||
- Transients Cleanup: ✓
|
||||
- Schedule Automatic Cleanup: Weekly
|
||||
|
||||
#### Autoptimize (Gratuito, Alternativa)
|
||||
|
||||
**Website:** https://autoptimize.com/
|
||||
|
||||
**Configuración:**
|
||||
1. Instalar y activar
|
||||
2. Settings > Autoptimize
|
||||
3. **JS Options:**
|
||||
- Optimize JS: ✓
|
||||
- Aggregate JS: ✓
|
||||
- Force JS in head: ✗
|
||||
4. **CSS Options:**
|
||||
- Optimize CSS: ✓
|
||||
- Aggregate CSS: ✓
|
||||
- Inline CSS: ✓
|
||||
5. **HTML Options:**
|
||||
- Optimize HTML: ✓
|
||||
6. **Extra:**
|
||||
- Remove Google Fonts: ✗ (a menos que uses system fonts)
|
||||
|
||||
### Image Optimization
|
||||
|
||||
#### Smush (Recomendado)
|
||||
|
||||
**Versión gratuita:** Funciona bien
|
||||
**Pro:** $6/mes (bulk optimization, WebP, CDN)
|
||||
|
||||
**Configuración:**
|
||||
1. Instalar y activar
|
||||
2. Settings
|
||||
3. **Automatic:**
|
||||
- Automatically compress images: ✓
|
||||
- Maximum size: 1920px (evita imágenes gigantes)
|
||||
4. **Lazy Load:**
|
||||
- Enable lazy load: ✗ (el tema ya lo hace)
|
||||
5. **Bulk Smush:**
|
||||
- Re-smush todas las imágenes existentes
|
||||
|
||||
#### ShortPixel (Alternativa)
|
||||
|
||||
**Gratis:** 100 imágenes/mes
|
||||
**Paid:** Desde $4.99 por 7,000 imágenes
|
||||
|
||||
**Ventaja:** Conversión automática a WebP
|
||||
|
||||
### Security
|
||||
|
||||
#### Wordfence Security
|
||||
|
||||
**Website:** https://www.wordfence.com/
|
||||
**Gratis:** Versión básica (más que suficiente)
|
||||
|
||||
**Qué hace:**
|
||||
- Firewall
|
||||
- Malware scanner
|
||||
- Login security
|
||||
- 2FA
|
||||
- Block IP addresses
|
||||
|
||||
**Configuración básica:**
|
||||
- Instala y activa
|
||||
- Usa configuración por defecto
|
||||
- Activa 2FA para tu cuenta
|
||||
|
||||
---
|
||||
|
||||
## Hosting y Servidor
|
||||
|
||||
### Requisitos del Servidor
|
||||
|
||||
**Mínimos:**
|
||||
- PHP 8.0+
|
||||
- MySQL 5.7+ / MariaDB 10.2+
|
||||
- 128 MB PHP memory
|
||||
- mod_rewrite enabled
|
||||
|
||||
**Recomendados:**
|
||||
- PHP 8.1+
|
||||
- MySQL 8.0+ / MariaDB 10.5+
|
||||
- 256 MB+ PHP memory
|
||||
- OPcache enabled
|
||||
- Gzip/Brotli compression
|
||||
- HTTP/2 or HTTP/3
|
||||
- SSL certificate
|
||||
|
||||
### Hosting Recomendados
|
||||
|
||||
**Para México/Latinoamérica:**
|
||||
|
||||
1. **SiteGround** (⭐⭐⭐⭐⭐)
|
||||
- Precio: Desde $3.99/mes
|
||||
- Servidores en US/EU
|
||||
- WordPress optimizado
|
||||
- Support 24/7 en español
|
||||
|
||||
2. **Cloudways** (⭐⭐⭐⭐⭐)
|
||||
- Precio: Desde $11/mes
|
||||
- Cloud hosting (DigitalOcean, AWS, etc.)
|
||||
- Rendimiento excelente
|
||||
- Escalable
|
||||
|
||||
3. **Hostinger** (⭐⭐⭐⭐)
|
||||
- Precio: Desde $2.99/mes
|
||||
- Buen rendimiento/precio
|
||||
- Servidores en Latinoamérica
|
||||
|
||||
**No recomendados:**
|
||||
- ❌ GoDaddy (lento, caro, soporte malo)
|
||||
- ❌ Hostgator (overselling, performance inconsistente)
|
||||
- ❌ Bluehost (lento después del primer año)
|
||||
|
||||
### Optimizaciones del Servidor
|
||||
|
||||
#### PHP.ini
|
||||
|
||||
Si tienes acceso a `php.ini`:
|
||||
|
||||
```ini
|
||||
; Memory
|
||||
memory_limit = 256M
|
||||
upload_max_filesize = 64M
|
||||
post_max_size = 64M
|
||||
|
||||
; Execution
|
||||
max_execution_time = 300
|
||||
max_input_time = 300
|
||||
|
||||
; OPcache
|
||||
opcache.enable=1
|
||||
opcache.memory_consumption=128
|
||||
opcache.max_accelerated_files=10000
|
||||
opcache.revalidate_freq=2
|
||||
|
||||
; Sessions
|
||||
session.gc_maxlifetime = 3600
|
||||
```
|
||||
|
||||
#### .htaccess
|
||||
|
||||
El tema incluye optimizaciones en `.htaccess`:
|
||||
|
||||
```apache
|
||||
# Compression
|
||||
<IfModule mod_deflate.c>
|
||||
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
|
||||
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
|
||||
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
|
||||
AddOutputFilterByType DEFLATE image/svg+xml
|
||||
</IfModule>
|
||||
|
||||
# Browser Caching
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresByType image/jpg "access plus 1 year"
|
||||
ExpiresByType image/jpeg "access plus 1 year"
|
||||
ExpiresByType image/gif "access plus 1 year"
|
||||
ExpiresByType image/png "access plus 1 year"
|
||||
ExpiresByType image/svg+xml "access plus 1 year"
|
||||
ExpiresByType text/css "access plus 1 month"
|
||||
ExpiresByType application/javascript "access plus 1 month"
|
||||
ExpiresByType application/pdf "access plus 1 month"
|
||||
ExpiresByType image/x-icon "access plus 1 year"
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
#### MySQL Optimization
|
||||
|
||||
**wp-config.php:**
|
||||
```php
|
||||
// Database optimization
|
||||
define('WP_ALLOW_REPAIR', false); // true solo cuando necesites reparar
|
||||
define('EMPTY_TRASH_DAYS', 7); // Vaciar papelera cada 7 días
|
||||
define('WP_POST_REVISIONS', 5); // Limitar revisiones
|
||||
define('AUTOSAVE_INTERVAL', 300); // Auto-save cada 5 minutos
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing y Monitoreo
|
||||
|
||||
### Herramientas de Testing
|
||||
|
||||
#### 1. PageSpeed Insights
|
||||
|
||||
**URL:** https://pagespeed.web.dev/
|
||||
|
||||
**Qué hace:**
|
||||
- Análisis de Core Web Vitals
|
||||
- Datos de campo (CrUX) reales de usuarios
|
||||
- Datos de laboratorio (Lighthouse)
|
||||
- Sugerencias específicas
|
||||
|
||||
**Cómo interpretar:**
|
||||
- **Verde (90-100):** Excelente
|
||||
- **Amarillo (50-89):** Necesita mejora
|
||||
- **Rojo (0-49):** Pobre
|
||||
|
||||
**Métricas importantes:**
|
||||
- Performance Score
|
||||
- FCP (First Contentful Paint)
|
||||
- LCP (Largest Contentful Paint)
|
||||
- TBT (Total Blocking Time)
|
||||
- CLS (Cumulative Layout Shift)
|
||||
|
||||
#### 2. GTmetrix
|
||||
|
||||
**URL:** https://gtmetrix.com/
|
||||
|
||||
**Qué hace:**
|
||||
- Análisis completo de performance
|
||||
- Waterfall chart (cómo se cargan los recursos)
|
||||
- Video de carga
|
||||
- Comparación histórica
|
||||
|
||||
**Configuración:**
|
||||
- Location: Dallas, US (más cercano a México)
|
||||
- Browser: Chrome (Desktop) y Chrome (Mobile)
|
||||
|
||||
**Métricas:**
|
||||
- GTmetrix Grade (A-F)
|
||||
- Performance
|
||||
- Structure
|
||||
- Fully Loaded Time
|
||||
- Total Page Size
|
||||
- Requests
|
||||
|
||||
#### 3. Lighthouse (Chrome DevTools)
|
||||
|
||||
**Cómo usar:**
|
||||
1. Abre Chrome
|
||||
2. Presiona F12 (DevTools)
|
||||
3. Tab "Lighthouse"
|
||||
4. Selecciona:
|
||||
- Mode: Navigation
|
||||
- Device: Desktop o Mobile
|
||||
- Categories: Todas ✓
|
||||
5. "Analyze page load"
|
||||
|
||||
**Ventajas:**
|
||||
- Local, testing inmediato
|
||||
- Debugging detallado
|
||||
- Oportunidades específicas
|
||||
|
||||
#### 4. WebPageTest
|
||||
|
||||
**URL:** https://www.webpagetest.org/
|
||||
|
||||
**Qué hace:**
|
||||
- Testing muy detallado
|
||||
- Múltiples locaciones
|
||||
- Multiple runs
|
||||
- Video comparison
|
||||
|
||||
**Configuración avanzada:**
|
||||
- Location: México o US-West
|
||||
- Browser: Chrome
|
||||
- Connection: 4G/LTE
|
||||
- Number of Tests: 3 (promedio)
|
||||
|
||||
### Monitoreo Continuo
|
||||
|
||||
#### Google Search Console
|
||||
|
||||
**URL:** https://search.google.com/search-console/
|
||||
|
||||
**Qué monitorear:**
|
||||
1. **Core Web Vitals Report:**
|
||||
- URLs con problemas
|
||||
- Tendencias
|
||||
- Mobile vs Desktop
|
||||
|
||||
2. **Coverage Report:**
|
||||
- Páginas indexadas
|
||||
- Errores de indexación
|
||||
- Páginas excluidas
|
||||
|
||||
3. **Enhancement Reports:**
|
||||
- Mobile usability
|
||||
- Breadcrumbs
|
||||
- Sitelinks searchbox
|
||||
|
||||
#### Google Analytics 4
|
||||
|
||||
**Configurar eventos personalizados para Core Web Vitals:**
|
||||
|
||||
```javascript
|
||||
// En Theme Options > Advanced > Custom JavaScript
|
||||
window.addEventListener('load', function() {
|
||||
// LCP
|
||||
new PerformanceObserver((list) => {
|
||||
const entries = list.getEntries();
|
||||
const lastEntry = entries[entries.length - 1];
|
||||
gtag('event', 'LCP', {
|
||||
event_category: 'Web Vitals',
|
||||
value: Math.round(lastEntry.startTime),
|
||||
event_label: 'LCP'
|
||||
});
|
||||
}).observe({entryTypes: ['largest-contentful-paint']});
|
||||
|
||||
// CLS
|
||||
new PerformanceObserver((list) => {
|
||||
let cls = 0;
|
||||
for (const entry of list.getEntries()) {
|
||||
if (!entry.hadRecentInput) {
|
||||
cls += entry.value;
|
||||
}
|
||||
}
|
||||
gtag('event', 'CLS', {
|
||||
event_category: 'Web Vitals',
|
||||
value: Math.round(cls * 1000),
|
||||
event_label: 'CLS'
|
||||
});
|
||||
}).observe({entryTypes: ['layout-shift']});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checklist de Optimización
|
||||
|
||||
### Setup Inicial (Una vez)
|
||||
|
||||
- [ ] Permalinks configurados (/%postname%/)
|
||||
- [ ] Theme Options configurado correctamente
|
||||
- [ ] System fonts activado (o fuentes optimizadas)
|
||||
- [ ] Lazy loading activado
|
||||
- [ ] Resource hints activados
|
||||
- [ ] AdSense delay activado (si usas AdSense)
|
||||
|
||||
### SEO Setup (Una vez)
|
||||
|
||||
- [ ] Rank Math instalado y configurado
|
||||
- [ ] Google Search Console conectado
|
||||
- [ ] Sitemap enviado a Google
|
||||
- [ ] Schema.org configurado
|
||||
- [ ] Títulos y meta optimizados
|
||||
- [ ] Google Analytics instalado
|
||||
|
||||
### Performance Setup (Una vez)
|
||||
|
||||
- [ ] Plugin de cache instalado (WP Rocket/Autoptimize)
|
||||
- [ ] Plugin de optimización de imágenes (Smush/ShortPixel)
|
||||
- [ ] WebP habilitado
|
||||
- [ ] Database optimization
|
||||
- [ ] .htaccess con compression y caching
|
||||
- [ ] OPcache habilitado en servidor
|
||||
|
||||
### Mantenimiento Regular
|
||||
|
||||
#### Semanal
|
||||
- [ ] Revisar PageSpeed Insights
|
||||
- [ ] Revisar Google Search Console (errores)
|
||||
- [ ] Backup completo del sitio
|
||||
|
||||
#### Mensual
|
||||
- [ ] Database cleanup (revisar revisiones, borradores)
|
||||
- [ ] Actualizar WordPress, plugins, tema
|
||||
- [ ] Revisar broken links
|
||||
- [ ] Regenerar minificación de cache
|
||||
- [ ] Revisar Core Web Vitals trends
|
||||
|
||||
#### Trimestral
|
||||
- [ ] Auditoría SEO completa
|
||||
- [ ] Revisar content por actualizar
|
||||
- [ ] Optimizar imágenes antiguas
|
||||
- [ ] Revisar plugins instalados (borrar los no usados)
|
||||
|
||||
### Por Cada Post Nuevo
|
||||
|
||||
- [ ] Featured image optimizada (< 200 KB)
|
||||
- [ ] Alt text en todas las imágenes
|
||||
- [ ] Focus keyword en Rank Math
|
||||
- [ ] Score de Rank Math > 80/100
|
||||
- [ ] Links internos a otros posts (2-3 mínimo)
|
||||
- [ ] Links externos (1-2 a fuentes confiables)
|
||||
- [ ] Meta description escrita manualmente
|
||||
- [ ] URL slug optimizada (corta, con keyword)
|
||||
- [ ] Categoría asignada
|
||||
- [ ] H2/H3 bien estructurados para TOC
|
||||
|
||||
---
|
||||
|
||||
## Solución de Problemas
|
||||
|
||||
### Performance Score Bajo
|
||||
|
||||
**Problema:** PageSpeed score < 80 en mobile
|
||||
|
||||
**Causas comunes:**
|
||||
1. **Hosting lento:**
|
||||
- Solución: Cambiar a hosting mejor (SiteGround, Cloudways)
|
||||
|
||||
2. **Imágenes no optimizadas:**
|
||||
- Solución: Instalar Smush, optimizar todas las imágenes
|
||||
|
||||
3. **Sin cache:**
|
||||
- Solución: Instalar WP Rocket
|
||||
|
||||
4. **Demasiados plugins:**
|
||||
- Solución: Desactivar plugins no esenciales
|
||||
|
||||
5. **Fuentes externas:**
|
||||
- Solución: Cambiar a system fonts en Theme Options
|
||||
|
||||
### LCP Pobre
|
||||
|
||||
**Problema:** LCP > 2.5 segundos
|
||||
|
||||
**Soluciones:**
|
||||
1. Verifica que featured image tenga preload (el tema lo hace automáticamente)
|
||||
2. Activa AdSense delay (Theme Options > Performance)
|
||||
3. Usa CDN para imágenes
|
||||
4. Optimiza featured image (< 200 KB)
|
||||
5. Usa WebP
|
||||
|
||||
### CLS Alto
|
||||
|
||||
**Problema:** CLS > 0.1
|
||||
|
||||
**Causas comunes:**
|
||||
1. **Imágenes sin dimensiones:**
|
||||
- Asegúrate de que imágenes tengan width/height
|
||||
|
||||
2. **Fuentes web cargando:**
|
||||
- Usa `font-display: swap` (el tema ya lo hace)
|
||||
- O usa system fonts
|
||||
|
||||
3. **Anuncios sin espacio reservado:**
|
||||
- Define contenedores con altura para AdSense
|
||||
|
||||
4. **Contenido dinámico:**
|
||||
- Reserva espacio para content que carga async
|
||||
|
||||
### Sitemap No Se Ve en Google
|
||||
|
||||
**Problema:** Sitemap no aparece en Search Console
|
||||
|
||||
**Solución:**
|
||||
1. Verifica que Rank Math esté activado
|
||||
2. Ve a `Rank Math > Sitemap Settings`
|
||||
3. Verifica que sitemap esté activado
|
||||
4. Accede a `https://tudominio.com/sitemap_index.xml` en navegador
|
||||
5. Si no carga, regenera permalinks (Ajustes > Enlaces permanentes > Guardar)
|
||||
6. Envía manualmente en Search Console
|
||||
|
||||
### Posts No Se Indexan
|
||||
|
||||
**Problema:** Google no indexa nuevos posts
|
||||
|
||||
**Diagnóstico:**
|
||||
1. Ve a Google Search Console > Coverage
|
||||
2. Revisa "Excluded" y "Error" tabs
|
||||
3. Identifica la razón
|
||||
|
||||
**Soluciones comunes:**
|
||||
- **Robots.txt bloqueando:** Verifica `tudominio.com/robots.txt`
|
||||
- **Noindex activado:** Revisa Rank Math meta box del post
|
||||
- **Content duplicado:** Escribe contenido único
|
||||
- **Sitemap no actualizado:** Rank Math lo hace automáticamente, pero verifica
|
||||
|
||||
---
|
||||
|
||||
## Recursos Adicionales
|
||||
|
||||
### Documentación Oficial
|
||||
|
||||
- **WordPress Performance:** https://developer.wordpress.org/advanced-administration/performance/optimization/
|
||||
- **Google Core Web Vitals:** https://web.dev/vitals/
|
||||
- **Rank Math KB:** https://rankmath.com/kb/
|
||||
- **Bootstrap Performance:** https://getbootstrap.com/docs/5.3/customize/optimize/
|
||||
|
||||
### Herramientas Online
|
||||
|
||||
- **PageSpeed Insights:** https://pagespeed.web.dev/
|
||||
- **GTmetrix:** https://gtmetrix.com/
|
||||
- **WebPageTest:** https://www.webpagetest.org/
|
||||
- **Schema Validator:** https://validator.schema.org/
|
||||
- **Rich Results Test:** https://search.google.com/test/rich-results
|
||||
|
||||
### Comunidad y Soporte
|
||||
|
||||
- **WordPress Support:** https://wordpress.org/support/
|
||||
- **Rank Math Support:** https://rankmath.com/support/
|
||||
- **WP Rocket Support:** https://docs.wp-rocket.me/
|
||||
|
||||
---
|
||||
|
||||
**¡Tu sitio está listo para volar!** 🚀
|
||||
|
||||
Con el tema Apus correctamente configurado y siguiendo esta guía, deberías lograr scores de performance excelentes y un SEO sólido.
|
||||
@@ -33,18 +33,18 @@ function apus_enqueue_bootstrap() {
|
||||
// Bootstrap CSS - with high priority
|
||||
wp_enqueue_style(
|
||||
'apus-bootstrap',
|
||||
get_template_directory_uri() . '/assets/css/bootstrap.min.css',
|
||||
get_template_directory_uri() . '/assets/vendor/bootstrap/css/bootstrap.min.css',
|
||||
array('apus-fonts'),
|
||||
'5.3.8',
|
||||
'5.3.2',
|
||||
'all'
|
||||
);
|
||||
|
||||
// Bootstrap JS Bundle - in footer with defer
|
||||
wp_enqueue_script(
|
||||
'apus-bootstrap-js',
|
||||
get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js',
|
||||
get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js',
|
||||
array(),
|
||||
'5.3.8',
|
||||
'5.3.2',
|
||||
array(
|
||||
'in_footer' => true,
|
||||
'strategy' => 'defer',
|
||||
|
||||
@@ -222,7 +222,7 @@ get_header();
|
||||
* Display the sidebar if it's active.
|
||||
*/
|
||||
if ( is_active_sidebar( 'sidebar-1' ) ) :
|
||||
get_sidebar();
|
||||
get_template_part( 'template-parts/sidebar' );
|
||||
endif;
|
||||
?>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user