7ba9080f57
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>
589 lines
16 KiB
Markdown
589 lines
16 KiB
Markdown
# 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. 🎉
|