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

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-04 09:31:47 -06:00
parent 12285bec3c
commit 7ba9080f57
67 changed files with 21825 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,588 @@
# 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. 🎉