WP Manifestindependent plugin directory
manifest / media / hotspot-plugin-wordpress

Interactive Hotspot Plugin

by Sebastian Gonzalez · github.com/sebastiangrl/hotspot-plugin-wordpress · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/sebastiangrl/hotspot-plugin-wordpress/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/sebastiangrl/hotspot-plugin-wordpress ↗

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.