git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completar eliminación de archivos .md y actualizar referencias

Browse Source 
- 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
2025-11-04 16:11:00 -06:00
parent 784b9ed998
commit b40a6158c6
16 changed files with 5 additions and 6965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
wp-content/themes/apus-theme/docs/01-initial-setup.md
View File

@@ -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. 🎉

951
wp-content/themes/apus-theme/docs/02-theme-options.md
View File

@@ -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.

987
wp-content/themes/apus-theme/docs/03-performance-seo.md
View File

@@ -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.