Interactive Hotspot Plugin - VERSIÓN SIMPLIFICADA

Plugin profesional para WordPress que permite crear hotspots interactivos con pins personalizables y modales de información sobre imágenes.

🚨 INSTRUCCIONES DESPUÉS DE ACTUALIZAR

1. Desactiva y Reactiva el Plugin

WordPress Admin → Plugins → Hotspot Plugin → Desactivar → Activar

Esto limpiará la base de datos y aplicará las mejoras.

2. Limpia la Caché

• Navegador: Ctrl+F5 (o Cmd+Shift+R en Mac)
• Plugin de caché: Limpia toda la caché del sitio
• CDN: Si usas Cloudflare u otro CDN, limpia la caché

✅ VERSIÓN SIMPLIFICADA Y ESTABLE

🎯 Una Posición por Pin

• SIMPLIFICADO: Eliminadas las vistas separadas Desktop/Mobile que causaban problemas
• ESTABLE: Una sola posición por pin que funciona en todos los dispositivos
• RESPONSIVO: Los pins se adaptan automáticamente al tamaño de pantalla

💾 Ancho del Modal Funciona Correctamente

• Corregida completamente la lógica de selección y guardado
• Todos los tamaños funcionan: 400px, 600px, 800px, 1000px, 90%
• Se guarda y carga correctamente desde la base de datos

📍 Posicionamiento Exacto y Preciso

• Los pins se posicionan exactamente donde los colocas en el admin
• Sin cálculos complejos ni transformaciones que causen problemas
• Precisión pixel-perfect entre admin y frontend

🔧 Shortcodes Funcionan Perfectamente

• Los shortcodes se procesan correctamente en los modales
• Compatible con shortcodes de otros plugins
• Procesamiento AJAX en tiempo real

🚀 CÓMO USAR

Crear Hotspot:

1. Ve a Hotspots → Nuevo Hotspot
2. Selecciona imagen de fondo
3. Haz clic en "Añadir Pin"
4. Arrastra el pin a la posición deseada
5. Configura el contenido, icono y color
6. Selecciona el ancho del modal
7. Guarda

Mostrar Hotspot:

[hotspot id="1"]

🔧 MEJORAS EN ESTA VERSIÓN

Archivos Simplificados:

• includes/class-hotspot-database.php - Base de datos limpia y estable
• includes/class-hotspot-admin.php - Interface simple y funcional
• includes/class-hotspot-frontend.php - Procesamiento optimizado de shortcodes
• assets/js/admin.js - JavaScript simplificado sin complejidad
• assets/js/frontend.js - Posicionamiento directo y preciso
• templates/admin-form.php - Formulario limpio sin opciones confusas

Base de Datos:

• Eliminada la columna pins_data_mobile que causaba problemas
• Mantenida la columna modal_width que funciona perfectamente
• Limpieza automática al activar el plugin

🎨 CARACTERÍSTICAS

• 🎯 Pins precisos: Posicionamiento exacto sin cálculos complejos
• 🎨 Personalización: Iconos predeterminados o personalizados con colores configurables
• 📱 Responsive: Se adapta automáticamente a cualquier dispositivo
• 🔧 Modales configurables: 5 tamaños diferentes de modal
• 💬 Contenido rico: HTML, texto, imágenes, shortcodes
• ⚡ Optimizado: Código limpio y sin complejidad innecesaria

🛠️ TROUBLESHOOTING

Si algo no funciona:

1. Desactiva/Reactiva el plugin (esto es lo más importante)
2. Limpia caché del navegador (Ctrl+F5)
3. Limpia caché del sitio si usas plugins de caché
4. Revisa logs de error en wp-content/debug.log

Si los shortcodes no funcionan:

1. Abre la consola del navegador (F12)
2. Haz clic en un pin que tenga shortcodes
3. Busca mensajes como:
   • Pin clicked, content: [tu contenido]
   • Procesando contenido con AJAX: [contenido]
   • Respuesta AJAX: {success: true, data: '...'}
4. Si hay errores AJAX, verifica que el plugin esté activado correctamente
5. Prueba con contenido simple primero (solo texto) y luego añade shortcodes

Contenido recomendado para pruebas:

• Texto simple: Hola mundo
• HTML básico: <p><strong>Texto en negrita</strong></p>
• Shortcode WP: [gallery ids="1,2,3"]

⚠️ ARCHIVOS TEMPORALES

Puedes ELIMINAR estos archivos si existen:

• diagnostico.php - Solo para diagnóstico
• force-update.php - Solo para testing
• check-syntax.php - Solo para verificar sintaxis

📞 SOPORTE

• Funcionalidad básica: Crear hotspots, posicionar pins, configurar modales
• Contenido: HTML, texto, shortcodes en modales
• Responsive: Funcionamiento en desktop, tablet y móvil
• Personalización: Iconos, colores, tamaños de modal

Licencia

GPL v2 o posterior - https://www.gnu.org/licenses/gpl-2.0.html

Gestión de Hotspots

• Ver todos: Ve a Hotspots > Todos los Hotspots
• Editar: Haz clic en "Editar" junto al hotspot que quieres modificar
• Eliminar: Haz clic en "Eliminar" (se pedirá confirmación)
• Copiar shortcode: Usa el botón "Copiar" junto al shortcode

Estructura de Archivos

hotspot-plugin/
├── hotspot-plugin.php          # Archivo principal del plugin
├── includes/                   # Clases PHP del plugin
│   ├── class-hotspot-admin.php
│   ├── class-hotspot-database.php
│   └── class-hotspot-frontend.php
├── templates/                  # Plantillas del administrador
│   ├── admin-form.php
│   └── admin-list.php
├── assets/                     # Recursos estáticos
│   ├── css/
│   │   ├── admin.css
│   │   └── frontend.css
│   ├── js/
│   │   ├── admin.js
│   │   └── frontend.js
│   └── images/                 # Iconos por defecto
│       ├── pin1.svg            # Pin rojo con círculo
│       ├── pin2.svg            # Pin azul con check
│       └── pin3.svg            # Pin verde con exclamación
└── README.md                   # Este archivo

Funcionalidades Técnicas

Base de Datos

El plugin crea una tabla wp_hotspot_items que almacena:

• ID del hotspot
• Nombre
• ID e URL de la imagen de fondo
• Datos de los pins (JSON)
• Fechas de creación y modificación

Pins

Cada pin contiene:

• Posición X e Y en píxeles
• Tipo de icono (por defecto o personalizado)
• URL del icono
• Contenido del modal

Shortcode

El shortcode [hotspot id="X"] renderiza:

• La imagen de fondo
• Los pins posicionados absolutamente
• JavaScript para la interactividad
• Modal overlay para mostrar contenido

Personalización

Estilos CSS

Puedes personalizar la apariencia modificando:

• assets/css/frontend.css para el frontend
• assets/css/admin.css para el panel de administración

Iconos

• Los iconos por defecto están en assets/images/
• Son archivos SVG editables
• Puedes añadir más iconos modificando el código

Contenido de Modales

Los modales soportan:

• HTML básico
• Shortcodes de WordPress
• Texto plano
• Imágenes y enlaces

Compatibilidad

• WordPress 5.0+
• PHP 7.4+
• Navegadores modernos
• Dispositivos móviles y tablets

Soporte

El plugin incluye:

• Validación de datos
• Sanitización de entrada
• Verificación de permisos
• Manejo de errores AJAX
• Interfaz responsive

Desarrollo

Para modificar el plugin:

1. PHP: Las clases están en la carpeta includes/
2. JavaScript: Los archivos están en assets/js/
3. CSS: Los estilos están en assets/css/
4. Templates: Las plantillas del admin están en templates/

¡El plugin está listo para usar! Actívalo y comienza a crear hotspots interactivos para tu sitio WordPress.