roi-theme/wp-content/themes/apus-theme/docs/01-initial-setup.md

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
2. Instalación del Tema
3. Configuración de WordPress
4. Configuración del Tema
5. Plugins Recomendados
6. Primeros Pasos
7. 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:

# 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:

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 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
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 - Guía del panel de opciones
   • 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. 🎉