# Ruta RentaCar - Tema WordPress Profesional

Tema profesional de WordPress para empresas de alquiler de vehículos, desarrollado con las mejores prácticas de UI/UX y optimizado con Tailwind CSS.

## 🚗 Características Principales

- **Diseño Moderno y Responsivo**: Adaptable a todos los dispositivos
- **Optimizado para SEO**: Estructura semántica y velocidad de carga optimizada
- **Colores Corporativos**: #0096e2 (Azul primario) y #777777 (Gris secundario)
- **Custom Post Types**: Vehículos y Seguros
- **Sistema de Categorías**: Para organizar vehículos por tipo
- **Formulario de Contacto**: Con envío por AJAX
- **Animaciones Suaves**: Experiencia de usuario mejorada
- **WhatsApp Float Button**: Contacto directo
- **Menú Móvil**: Navegación optimizada para dispositivos móviles

## 📋 Páginas Incluidas

1. **Inicio** (`front-page.php`) - Página principal con hero section, características y vehículos destacados
2. **Nosotros** (`page-nosotros.php`) - Historia, misión, visión y valores de la empresa
3. **Vehículos** (`page-vehiculos.php`) - Catálogo completo con filtros por categoría
4. **Seguros** (`page-seguros.php`) - Planes de seguro disponibles
5. **Contacto** (`page-contacto.php`) - Formulario de contacto y ubicaciones

## 🔧 Instalación

### Requisitos Previos
- WordPress 5.0 o superior
- PHP 7.4 o superior
- MySQL 5.6 o superior

### Pasos de Instalación

1. **Subir el Tema**
   ```bash
   # Comprimir la carpeta del tema
   zip -r rentcar-theme.zip rentcar-theme/
   ```
   - Ve a WordPress Admin → Apariencia → Temas → Añadir Nuevo
   - Haz clic en "Subir tema" y selecciona el archivo ZIP
   - Haz clic en "Instalar ahora"

2. **Activar el Tema**
   - Una vez instalado, haz clic en "Activar"

3. **Configurar el Logo**
   - Ve a Apariencia → Personalizar → Identidad del sitio
   - Sube el logo de Ruta RentaCar
   - El logo ya está incluido en `/images/logo-ruta-web.png`

4. **Crear el Menú Principal**
   - Ve a Apariencia → Menús → Crear un nuevo menú
   - Añade las páginas: Inicio, Nosotros, Vehículos, Seguros, Contacto
   - Asigna el menú a la ubicación "Menú Principal"

5. **Crear las Páginas**
   - Ve a Páginas → Añadir Nueva
   - Crea las siguientes páginas y asigna las plantillas correspondientes:
     * **Inicio**: Plantilla "Página de Inicio"
     * **Nosotros**: Plantilla "Nosotros"
     * **Vehículos**: Plantilla "Vehículos"
     * **Seguros**: Plantilla "Seguros"
     * **Contacto**: Plantilla "Contacto"

6. **Configurar la Página de Inicio**
   - Ve a Ajustes → Lectura
   - Selecciona "Una página estática"
   - Elige la página "Inicio" como página principal

## 📦 Agregar Vehículos

1. Ve a **Vehículos → Agregar Nuevo**
2. Completa los campos:
   - **Título**: Nombre del vehículo (ej: "Kia Picanto / Similar")
   - **Contenido**: Descripción detallada del vehículo
   - **Imagen Destacada**: Foto del vehículo
   - **Categoría**: Selecciona o crea una categoría (Categoría A, B, C, etc.)
   
3. En **Detalles del Vehículo** (meta box), completa:
   - Precio por día
   - Número de pasajeros
   - Número de maletas
   - Transmisión (Manual/Automático)
   - Número de puertas

4. Haz clic en **Publicar**

## 🛡️ Agregar Seguros

1. Ve a **Seguros → Agregar Nuevo**
2. Completa el título y descripción
3. Añade imagen destacada
4. Publica el seguro

## 📝 Uso del Formulario de Contacto

El formulario de contacto está integrado con shortcode:

```php
[rentcar_contact_form]
```

Este shortcode ya está incluido en la página de contacto.

### Configuración del Email
- Los emails se enviarán a la dirección configurada en Ajustes → General → Correo electrónico de administración

## 🎨 Personalización de Colores

Los colores corporativos están definidos en `style.css`:

```css
:root {
  --primary-color: #0096e2;
  --secondary-color: #777777;
  --dark-color: #1a1a1a;
  --light-color: #f8f9fa;
}
```

Para cambiar colores, edita estas variables.

## 📱 Elementos Interactivos

### Botón de WhatsApp Flotante
- Configurado para el número: +593 98 764 5140
- Para cambiar el número, edita `footer.php` línea con `whatsapp-float`

### Botón Scroll to Top
- Aparece automáticamente al hacer scroll
- Configurado en `js/main.js`

## 🔌 Plugins Recomendados

- **Contact Form 7**: Formularios adicionales
- **Yoast SEO**: Optimización SEO
- **Smush**: Optimización de imágenes
- **WP Super Cache**: Cache para mejor rendimiento
- **Wordfence Security**: Seguridad del sitio

## 🌐 Configuración de Redes Sociales

Edita los enlaces de redes sociales en:
- `header.php` (top bar)
- `footer.php` (footer social links)
- `page-contacto.php` (sección de contacto)

Reemplaza los `#` con tus URLs reales:
```php
<a href="https://facebook.com/tupagina">...</a>
<a href="https://instagram.com/tuperfil">...</a>
```

## 📊 Estructura de Archivos

```
rentcar-theme/
├── css/
│   └── custom.css          # Estilos personalizados
├── js/
│   └── main.js             # JavaScript principal
├── images/
│   └── logo-ruta-web.png   # Logo de la empresa
├── functions.php           # Funciones del tema
├── header.php              # Header con navegación
├── footer.php              # Footer con información
├── index.php               # Página principal de blog
├── front-page.php          # Página de inicio
├── single.php              # Post individual / Vehículo
├── page-nosotros.php       # Página Nosotros
├── page-vehiculos.php      # Página Vehículos
├── page-seguros.php        # Página Seguros
├── page-contacto.php       # Página Contacto
└── style.css               # Estilos principales
```

## 🔍 SEO y Optimización

### Meta Tags
- Title automático mediante `add_theme_support('title-tag')`
- Imágenes destacadas para Open Graph

### Velocidad
- CSS y JS minificados
- Lazy loading de imágenes
- Fuentes optimizadas de Google Fonts

### Accesibilidad
- HTML5 semántico
- Contraste de colores WCAG AA
- Navegación por teclado
- Alt text en imágenes

## 🐛 Solución de Problemas

### El menú no aparece
- Verifica que el menú esté asignado a "Menú Principal"
- Si no existe, el tema mostrará un menú predeterminado

### Los vehículos no se muestran
- Asegúrate de haber publicado al menos un vehículo
- Verifica que la plantilla "Vehículos" esté asignada a la página

### El formulario de contacto no envía
- Verifica la configuración del email en WordPress
- Revisa los logs de errores de PHP
- Asegúrate de que el servidor permita enviar emails

### Problemas con estilos
- Limpia la caché del navegador (Ctrl + F5)
- Si usas un plugin de cache, límpialo
- Verifica que `custom.css` se esté cargando

## 📞 Soporte

Para soporte técnico o consultas sobre el tema:
- Email: soporte@rutarentacar.com
- WhatsApp: +593 98 764 5140

## 📄 Licencia

Este tema está licenciado bajo GPL v2 or later.

## 👨‍💻 Créditos

- Desarrollado para Ruta RentaCar Cia. Ltda
- Fuentes: Google Fonts (Montserrat, Poppins)
- Iconos: Font Awesome 6.4.0
- Animaciones: Animate.css

---

**Versión**: 1.0  
**Última actualización**: Febrero 2026  
**Compatible con**: WordPress 5.0+
