Cómo insertar un mapa 3D de Georivo en WordPress
Inserte un widget de Georivo publicado en WordPress utilizando el bloque HTML personalizado, un contenedor adaptativo, la autorización de dominio y la verificación de la página pública.
Para insertar una historia de ubicación de Georivo en WordPress, primero publique el widget y autorice el dominio exacto del sitio web público en Georivo. Copie el iframe HTTPS generado, agréguelo mediante el elemento HTML o de código compatible de la plataforma, conserve su relación de aspecto y publique la página. Verifique la URL pública en vivo tanto en computadoras de escritorio como en dispositivos móviles, incluyendo el acceso al dominio, la carga, la atribución, el comportamiento de consentimiento y la gestión de alternativas.
Requisitos previos
Antes de integrar historias de ubicación interactivas en 3D en su sitio web de WordPress, debe asegurarse de cumplir con varios requisitos técnicos y administrativos. En primer lugar, debe tener un widget de Georivo publicado y listo en su panel de control activo. Este widget se configura utilizando la dirección de una propiedad específica y puntos de interés cercanos, los cuales el sistema de Georivo convierte en una historia de ubicación interactiva y fotorrealista en 3D que se puede insertar. Esta historia utiliza imágenes geoespaciales con licencia para mostrar el contexto circundante de la propiedad. Dado que el widget debe estar publicado antes de generar el código de integración, verifique que todos los movimientos de cámara programados, los flujos (como Presentación de la propiedad, Historia del barrio o Guía de llegada) y las ubicaciones cercanas estén finalizados.
En segundo lugar, debe contar con acceso de nivel de editor o administrador al sitio de WordPress de destino. La plataforma WordPress implementa políticas de seguridad estrictas con respecto a la ejecución de scripts personalizados y código HTML sin depurar. Específicamente, la capacidad de insertar elementos iframe o HTML sin filtrar está sujeta a restricciones de roles de usuario. Si su cuenta carece de estos privilegios, es posible que el editor de WordPress elimine las etiquetas iframe al guardar o publicar la página. Además, asegúrese de que su plan activo de WordPress y su entorno de alojamiento permitan el uso de código personalizado o integraciones de iframe externas, ya que algunos planes básicos o complementos de seguridad restringen la ejecución de scripts externos.
En tercer lugar, su cuenta de Georivo debe tener autorizado el dominio público exacto de su sitio web de WordPress. Georivo utiliza inserciones vinculadas a dominios para proteger sus imágenes geoespaciales con licencia y evitar que terceros no autorizados enlacen directamente sus recursos interactivos. Por último, es fundamental distinguir claramente esta visualización en 3D de una grabación física realizada con drones. La plataforma Georivo genera una historia de ubicación interactiva utilizando imágenes geoespaciales en 3D fotorrealistas con licencia. No se trata de una grabación física con drones en tiempo real, y no representa las condiciones físicas inmediatas, el clima actual ni detalles de construcción activa. Los usuarios deben comprender que esta es una herramienta de visualización diseñada para comunicar relaciones espaciales y topografía regional, en lugar de una captura física en vivo.
Copiar el código de inserción de Georivo
Una vez cumplidos los requisitos previos, puede obtener el código de integración correcto desde la plataforma Georivo. Inicie sesión en su panel de control, seleccione el proyecto correspondiente a su propiedad y navegue hasta la configuración de publicación o uso compartido. Aquí encontrará el código iframe HTTPS generado, diseñado específicamente para su widget. Este código está vinculado al token único de su proyecto y está estructurado para cargar el entorno interactivo en 3D de forma segura.
De acuerdo con el contrato de inserción, debe utilizar únicamente el código iframe exacto copiado directamente del widget de Georivo publicado. Nunca exponga, modifique ni invente su URL protegida o su token de seguridad. Intentar alterar manualmente la URL de origen o eliminar los parámetros requeridos puede romper la conexión con el motor de renderizado o provocar que se activen bloqueos de seguridad vinculados al dominio.
Copie todo el bloque de código en su portapapeles. Para evitar errores de formato, evite pegar el código en editores de texto enriquecido o procesadores de texto antes de transferirlo a WordPress. Estos programas pueden introducir caracteres de formato ocultos o convertir comillas rectas estándar en comillas tipográficas, lo que dañará la sintaxis HTML. Mantenga el código en su portapapeles o péguelo en un editor de texto sin formato si necesita guardarlo temporalmente.
Agregar un bloque HTML personalizado
WordPress utiliza un editor basado en bloques (Gutenberg) para organizar y renderizar el contenido de las páginas. Para insertar su mapa interactivo en 3D, abra la página o entrada de destino en el editor y busque la sección donde desea que aparezca la visualización. Agregue un nuevo bloque haciendo clic en el icono de suma y buscando el bloque "HTML personalizado". Este bloque está diseñado específicamente para aceptar código HTML sin depurar y códigos iframe sin analizar ni omitir las etiquetas.
Evite utilizar bloques de párrafo estándar, bloques de texto o bloques de inserción de medios predeterminados para esta integración. Los bloques de texto estándar mostrarán el código sin depurar como texto literal en su sitio activo, mientras que los bloques de inserción predeterminados están optimizados para proveedores de oEmbed específicos y no admiten los iframes seguros de Georivo vinculados a dominios. El bloque HTML personalizado ofrece el entorno más limpio y confiable para integraciones de iframe personalizadas.
Pegue el código iframe de Georivo copiado directamente en el área de texto del bloque HTML personalizado. Puede utilizar el botón "Vista previa" en la barra de herramientas del bloque para comprobar si el mapa 3D se inicia correctamente dentro de la interfaz del editor. Si el área de vista previa permanece en blanco o muestra un error, verifique que se haya pegado el código iframe completo sin etiquetas faltantes ni atributos truncados, y confirme que su rol de usuario tiene los permisos necesarios para guardar HTML sin filtrar.
Dimensionamiento adaptativo
Los compradores de propiedades y los clientes del sector inmobiliario ven los anuncios en una amplia gama de dispositivos, incluidos teléfonos móviles, tabletas y monitores de escritorio de alta resolución. Para ofrecer una experiencia de usuario profesional, su mapa 3D insertado debe adaptarse de manera responsiva a todos los tamaños de pantalla. Los iframes estándar suelen cargarse con dimensiones fijas en píxeles, lo que puede provocar que el mapa se desborde en pantallas más pequeñas o se muestre como un cuadro pequeño en pantallas más grandes.
Para garantizar que el mapa siga siendo totalmente adaptativo, debe conservar su relación de aspecto. Esto se puede lograr envolviendo el iframe copiado dentro de un contenedor CSS responsivo. En el bloque HTML personalizado, envuelva el iframe en un elemento div con un nombre de clase personalizado y defina los estilos adaptativos en el personalizador de su tema de WordPress o en la hoja de estilos global. Alternativamente, puede establecer el atributo de ancho del iframe al 100 por ciento y definir una altura relativa o basada en la ventana gráfica.
Este enfoque permite que el mapa interactivo en 3D se expanda a todo el ancho de su contenedor principal, manteniendo al mismo tiempo una altura vertical adecuada para la exploración táctil. Pruebe siempre el comportamiento del diseño cambiando el tamaño de la ventana de su navegador o utilizando los modos de vista previa de dispositivos del editor para asegurarse de que la visualización se adapte sin problemas y sin recortar elementos críticos de la interfaz.
Publicar y verificar
Después de colocar el código iframe y ajustar su estilo adaptativo, haga clic en el botón Publicar o Actualizar en la esquina superior derecha del editor de WordPress para aplicar los cambios en vivo. Una vez publicada la página, navegue a la URL pública en vivo utilizando una ventana de navegación privada o de incógnito. Esto garantiza que esté viendo la página como un visitante estándar, sin sesiones de administrador almacenadas en caché que puedan eludir las reglas de seguridad o de carga.
Realice una verificación exhaustiva de la página en vivo tanto en computadoras de escritorio como en dispositivos móviles. En primer lugar, verifique el acceso al dominio para asegurarse de que el mapa se cargue sin bloqueos de seguridad vinculados al dominio ni errores de autorización. En segundo lugar, compruebe el estado de carga para confirmar que el mapa 3D se inicie por completo y que los movimientos de cámara programados comiencen a reproducirse según lo previsto. En tercer lugar, verifique que la atribución requerida para las imágenes geoespaciales con licencia sea claramente visible y cumpla con los términos de servicio necesarios.
Además, pruebe el comportamiento de consentimiento para asegurarse de que la inserción respete las herramientas de consentimiento de cookies o los banners de privacidad de su sitio web. Por último, verifique la gestión de alternativas en dispositivos o navegadores que puedan restringir el renderizado en 3D. Asegúrese de que el mapa interactivo no bloquee el enfoque táctil del usuario en pantallas móviles, lo que permitirá a los visitantes desplazarse fácilmente más allá del lienzo del mapa para leer el resto de los detalles del anuncio de la propiedad.
Resolución de problemas
Si el mapa interactivo en 3D insertado no se carga correctamente o muestra un error, se deben investigar varios problemas comunes. Un iframe en blanco suele ser el resultado de permisos de seguridad estrictos o restricciones de roles que eliminaron el código HTML personalizado durante el proceso de guardado. Asegúrese de que su cuenta de usuario de WordPress tenga los privilegios necesarios para publicar HTML sin filtrar.
Otro problema común es un dominio bloqueado o que no coincide. Debido a que Georivo utiliza inserciones vinculadas a dominios, el dominio público exacto de su sitio activo debe estar autorizado en su panel de control de Georivo. Esto incluye coincidir con el protocolo exacto (HTTPS) y los subdominios (como la presencia o ausencia del prefijo "www"). Si se produce una discrepancia, el motor de renderizado bloqueará la solicitud para proteger sus imágenes geoespaciales con licencia.
Además, compruebe si hay errores de Política de Seguridad de Contenido (CSP) o de contenido mixto en la consola de desarrollador de su navegador. Los complementos de seguridad estrictos o los encabezados del servidor pueden bloquear las solicitudes externas a Georivo. Si experimenta problemas de altura incorrecta o recortes en dispositivos móviles, revise su contenedor CSS responsivo para asegurarse de que se conserve la relación de aspecto. Por último, borre la caché de su sitio de WordPress, la caché del servidor y la caché del navegador para resolver bloqueos de caché obsoletos o de consentimiento que puedan impedir la carga del código actualizado.
Rendimiento
La integración de contenido geoespacial interactivo y enriquecido en 3D puede afectar la velocidad de carga de las páginas de su sitio web y los Core Web Vitals si no se optimiza correctamente. Para mantener un alto rendimiento y visibilidad en los motores de búsqueda, debe administrar cómo y cuándo se inicia el iframe de Georivo. La técnica de optimización más eficaz es implementar la carga diferida.
Puede agregar el atributo estándar loading="lazy" directamente a su código iframe dentro del bloque HTML personalizado. Este atributo indica al navegador que retrase la carga de los recursos pesados en 3D hasta que el usuario se desplace hacia abajo hasta la sección que contiene el mapa. Esto evita que los elementos interactivos bockeen el renderizado inicial del texto, las imágenes principales y los menús de navegación, lo cual es especialmente beneficioso para los visitantes móviles en redes más lentas.
Considere colocar el mapa 3D debajo de la línea de pliegue del diseño de su página en lugar de en la parte superior. Esta ubicación estratégica garantiza que la métrica de renderizado del elemento de mayor contenido (LCP) de su sitio web se mantenga optimizada, al tiempo que brinda a los visitantes el contexto escrito necesario sobre la propiedad antes de que comiencen a interactuar con la visualización en 3D. Al combinar la carga diferida con un diseño de página bien planificado, puede ofrecer una historia de ubicación inmersiva sin comprometer el rendimiento.
Limitaciones e idoneidad
Utilice este material para presentaciones y apoyo en la toma de decisiones, no como sustituto de información de origen verificada de forma independiente. Confirme rutas, distancias, accesos, disponibilidad, imágenes, límites legales, requisitos de la plataforma y condiciones actuales con la fuente autorizada correspondiente antes de su publicación o uso.
| Tipo de bloque de WordPress | Caso de uso recomendado | Soporte adaptativo | Nivel de seguridad |
|---|---|---|---|
| Bloque HTML personalizado | Código de inserción iframe estándar | Excelente con contenedor CSS | Alto (HTML sin filtrar restringido) |
| Bloque de código corto (Shortcode) | Constructores de páginas heredados | Moderado | Medio |
| Bloque de párrafo | No recomendado (elimina el código) | Ninguno | Bajo |
| Plantilla de tema personalizada | Inserciones globales en todo el sitio | Excelente | Alto |
Pasos para insertar un mapa 3D de Georivo en el bloque de WordPress en minutos después de la integración del widget
- Inicie sesión en su panel de administración de WordPress y navegue hasta la página o entrada de destino.
- Agregue un nuevo bloque HTML personalizado en la ubicación deseada dentro del editor de bloques.
- Pegue el código iframe adaptativo de Georivo copiado directamente en el área de texto del bloque.
- Envuelva el iframe en un contenedor CSS personalizado para conservar la relación de aspecto estándar.
- Previsualice el borrador para comprobar el estado de carga inicial y la alineación del diseño.
- Publique la página y pruebe la URL en vivo en múltiples dispositivos para verificar la autorización del dominio.
Integrar visualizaciones geoespaciales interactivas directamente en los anuncios de propiedades cierra la brecha entre las imágenes estáticas y las visitas físicas al sitio, ofreciendo a los compradores un contexto geográfico inmediato.
Preguntas frecuentes
¿Por qué mi mapa 3D insertado muestra un mensaje de error de dominio?
Este error ocurre cuando el dominio del sitio web de WordPress en vivo no coincide con los dominios autorizados configurados en su panel de control de Georivo. Para solucionarlo, inicie sesión en Georivo, navegue a la configuración de su widget y agregue el dominio exacto de su sitio web a la lista autorizada.
¿Puedo utilizar el bloque de incrustación estándar de WordPress para Georivo?
No, el bloque de incrustación estándar de WordPress está diseñado para proveedores de oEmbed específicos. Debido a que Georivo utiliza iframes seguros vinculados a dominios, debe utilizar el bloque HTML personalizado para pegar el código iframe directo.
¿Cómo hago para que el mapa insertado se cargue más rápido en dispositivos móviles?
Puede optimizar el rendimiento utilizando el atributo loading="lazy" en el iframe. Esto garantiza que los recursos del mapa 3D solo se carguen cuando el usuario se desplace cerca del mapa, conservando las velocidades de carga iniciales de la página móvil.
¿Esta inserción requiere un archivo de video físico tomado con drones?
No, Georivo utiliza imágenes geoespaciales en 3D fotorrealistas con licencia para generar historias de ubicación interactivas. No hay archivos de video pesados que alojar, cargar o transmitir en su servidor de WordPress.
¿Qué sucede si un usuario visita la página con las cookies de terceros bloqueadas?
Las inserciones de Georivo están diseñadas para respetar los estándares de privacidad modernos y no dependen de cookies de seguimiento de terceros para cargar la experiencia básica del mapa 3D, lo que garantiza una alta compatibilidad en navegadores seguros.