Как встроить 3D-карту Georivo в WordPress
Встройте опубликованный виджет Georivo в WordPress с помощью блока Произвольный HTML, адаптивной оболочки, авторизации домена и проверки публичной страницы.
Чтобы встроить интерактивную презентацию локации Georivo в WordPress, сначала опубликуйте виджет и авторизуйте точный публичный домен вашего сайта в Georivo. Скопируйте сгенерированный код iframe HTTPS, добавьте его через поддерживаемый платформой элемент HTML или кода, сохраните соотношение сторон и опубликуйте страницу. Проверьте опубликованный URL-адрес на компьютерах и мобильных устройствах, включая доступ к домену, загрузку, указание авторства, работу согласия на файлы cookie и резервные сценарии.
Предварительные требования
Перед интеграцией интерактивных 3D-презентаций локаций на ваш сайт WordPress необходимо убедиться в выполнении нескольких технических и административных требований. Во-первых, в вашем личном кабинете должен быть готов опубликованный виджет Georivo. Этот виджет настраивается на основе конкретного адреса объекта недвижимости и близлежащих достопримечательностей, которые система Georivo преобразует во встраиваемую интерактивную фотореалистичную 3D-презентацию. В этой презентации используются лицензированные геопространственные снимки для отображения окружения объекта. Поскольку виджет должен быть опубликован до генерации кода интеграции, убедитесь, что все запрограммированные движения камеры, сценарии (такие как Презентация объекта, Обзор района или Руководство по прибытию) и близлежащие локации окончательно настроены.
Во-вторых, у вас должен быть доступ уровня редактора или администратора к целевому сайту WordPress. Платформа WordPress применяет строгие политики безопасности в отношении выполнения пользовательских скриптов и необработанного HTML-кода. В частности, возможность вставки неотфильтрованного HTML или элементов iframe зависит от ограничений ролей пользователей. Если у вашей учетной записи нет таких прав, редактор WordPress может удалить теги iframe при сохранении или публикации страницы. Кроме того, убедитесь, что ваш текущий тарифный план WordPress и хостинг-среда разрешают использование пользовательского кода или интеграцию внешних iframe, так как некоторые базовые тарифы или плагины безопасности ограничивают выполнение внешних скриптов.
В-третьих, в вашей учетной записи Georivo должен быть авторизован точный публичный домен вашего сайта WordPress. Georivo использует привязанные к домену встраивания для защиты лицензированных геопространственных снимков и предотвращения несанкционированного прямого связывания ваших интерактивных ресурсов сторонними лицами. Наконец, крайне важно четко отличать эту 3D-визуализацию от реальной съемки с дрона. Платформа Georivo отрисовывает интерактивную презентацию локации с использованием лицензированных фотореалистичных 3D-геоданных. Это не физическая съемка с дрона в реальном времени, и она не отображает текущие физические условия, погоду или ход активных строительных работ. Пользователи должны понимать, что это инструмент визуализации, предназначенный для демонстрации пространственных связей и регионального рельефа, а не живая съемка на месте.
Копирование кода встраивания Georivo
После выполнения предварительных требований вы можете получить необходимый код интеграции на платформе Georivo. Войдите в свой личный кабинет, выберите проект, соответствующий вашему объекту недвижимости, и перейдите в настройки публикации или обмена. Здесь вы найдете сгенерированный код iframe HTTPS, созданный специально для вашего виджета. Этот код привязан к уникальному токену вашего проекта и структурирован для безопасной загрузки интерактивной 3D-среды.
Согласно правилам встраивания, вы должны использовать только точный код iframe, скопированный непосредственно из опубликованного виджета Georivo. Никогда не раскрывайте, не изменяйте и не создавайте самостоятельно защищенный URL-адрес или токен безопасности. Попытки вручную изменить исходный URL-адрес или удалить обязательные параметры могут нарушить соединение с движком рендеринга или вызвать срабатывание блокировок безопасности, привязанных к домену.
Скопируйте весь блок кода в буфер обмена. Чтобы избежать ошибок форматирования, не вставляйте код в текстовые редакторы с форматированием или текстовые процессоры перед переносом в WordPress. Эти программы могут добавлять скрытые символы форматирования или преобразовывать стандартные прямые кавычки в фигурные, что нарушит синтаксис HTML. Сохраняйте код в буфере обмена или вставьте его в простой текстовый редактор, если требуется временное хранение.
Добавление блока Произвольный HTML
WordPress использует блочный редактор (Gutenberg) для организации и отображения содержимого страниц. Чтобы вставить интерактивную 3D-карту, откройте целевую страницу или запись в редакторе и найдите раздел, где должна появиться визуализация. Добавьте новый блок, нажав на значок плюса и введя в поиске блок "Произвольный HTML". Этот блок специально разработан для работы с необработанным HTML-кодом и тегами iframe без их искажения или экранирования.
Избегайте использования стандартных абзацев, текстовых блоков или стандартных блоков встраивания медиафайлов для этой интеграции. Обычные текстовые блоки отобразят необработанный код как простой текст на вашем сайте, а стандартные блоки встраивания оптимизированы под конкретных провайдеров oEmbed и не поддерживают защищенные iframe с привязкой к домену, используемые Georivo. Блок Произвольный HTML обеспечивает наиболее чистую и надежную среду для интеграции пользовательских iframe.
Вставьте скопированный код iframe Georivo непосредственно в текстовую область блока Произвольный HTML. Вы можете использовать кнопку "Предпросмотр" на панели инструментов блока, чтобы проверить, правильно ли инициализируется 3D-карта в интерфейсе редактора. Если область предпросмотра остается пустой или отображает ошибку, убедитесь, что код iframe был вставлен полностью, без пропущенных тегов или усеченных атрибутов, а также подтвердите, что у вашей роли пользователя есть необходимые разрешения для сохранения неотфильтрованного HTML.
Адаптивный размер
Покупатели недвижимости и клиенты просматривают объявления на самых разных устройствах, включая мобильные телефоны, планшеты и мониторы ПК с высоким разрешением. Чтобы обеспечить профессиональный пользовательский опыт, ваша встроенная 3D-карта должна адаптивно масштабироваться под любые размеры экрана. Стандартные iframe часто загружаются с фиксированными размерами в пикселях, из-за чего карта может выходить за пределы экрана на мобильных устройствах или выглядеть как маленькое окно на больших дисплеях.
Чтобы карта оставалась полностью адаптивной, необходимо сохранить ее соотношение сторон. Этого можно добиться, поместив скопированный iframe внутрь адаптивного CSS-контейнера. В блоке Произвольный HTML оберните iframe в элемент div с пользовательским классом и определите адаптивные стили в настройщике вашей темы WordPress или в глобальной таблице стилей. В качестве альтернативы вы можете установить атрибут ширины iframe на 100 процентов и задать относительную высоту или высоту на основе области просмотра (viewport).
Такой подход позволяет интерактивной 3D-карте растягиваться на всю ширину родительского контейнера, сохраняя при этом удобную вертикальную высоту для сенсорного управления. Всегда тестируйте поведение макета, изменяя размер окна браузера или используя режимы предварительного просмотра на различных устройствах в редакторе, чтобы убедиться, что визуализация масштабируется плавно и важные элементы интерфейса не обрезаются.
Публикация и проверка
После размещения кода iframe и настройки его адаптивности нажмите кнопку Опубликовать или Обновить в правом верхнем углу редактора WordPress, чтобы применить изменения. Как только страница будет опубликована, перейдите по ее публичному URL-адресу в режиме инкогнито или приватного просмотра. Это позволит вам увидеть страницу глазами обычного посетителя, без кэшированных сессий администратора, которые могут обходить правила безопасности или загрузки.
Проведите тщательную проверку опубликованной страницы как на компьютерах, так и на мобильных устройствах. Во-первых, проверьте доступ к домену, чтобы убедиться, что карта загружается без блокировок безопасности или ошибок авторизации домена. Во-вторых, проверьте состояние загрузки, чтобы подтвердить, что 3D-карта полностью инициализируется и все запрограммированные движения камеры воспроизводятся должным образом. В-третьих, убедитесь, что обязательное указание авторства для лицензированных геоданных четко видно и соответствует условиям использования.
Кроме того, протестируйте работу согласия пользователя, чтобы убедиться, что встроенный элемент уважает настройки файлов cookie вашего сайта или баннеры конфиденциальности. Наконец, проверьте работу резервных сценариев на устройствах или в браузерах, которые могут ограничивать рендеринг 3D. Убедитесь, что интерактивная карта не перехватывает фокус прокрутки на экранах мобильных устройств, позволяя посетителям легко прокручивать страницу мимо карты для чтения остальных деталей объявления.
Устранение неполадок
Если встроенная 3D-карта загружается некорректно или выдает ошибку, следует проверить несколько распространенных причин. Пустой iframe часто является результатом строгих настроек безопасности или ограничений ролей, из-за которых пользовательский HTML-код был удален в процессе сохранения. Убедитесь, что ваша учетная запись WordPress имеет необходимые права для публикации неотфильтрованного HTML.
Еще одна частая проблема заключается в заблокированном или несовпадающем домене. Поскольку Georivo использует встраивание с привязкой к домену, точный публичный домен вашего работающего сайта должен быть авторизован в панели управления Georivo. Это включает в себя точное соответствие протокола (HTTPS) и поддоменов (например, наличие или отсутствие префикса "www"). В случае несовпадения движок рендеринга заблокирует запрос для защиты ваших лицензированных геоданных.
Кроме того, проверьте консоль разработчика в браузере на наличие ошибок политики безопасности контента (CSP) или смешанного содержимого. Строгие плагины безопасности или серверные заголовки могут блокировать внешние запросы к Georivo. Если вы столкнулись с неправильной высотой или обрезкой на мобильных устройствах, проверьте адаптивную CSS-оболочку, чтобы убедиться в сохранении соотношения сторон. Наконец, очистите кэш сайта WordPress, кэш сервера и кэш браузера, чтобы устранить устаревший кэш или блокировки согласия, которые могут мешать загрузке обновленного кода.
Производительность
Интеграция насыщенного интерактивного 3D-геопространственного контента может повлиять на скорость загрузки страниц вашего сайта и показатели Core Web Vitals, если она не оптимизирована должным образом. Чтобы сохранить высокую производительность и видимость в поисковых системах, вам следует управлять тем, как и когда инициализируется iframe Georivo. Наиболее эффективным методом оптимизации является внедрение отложенной загрузки (lazy loading).
Вы можете добавить стандартный атрибут loading="lazy" непосредственно в код iframe внутри блока Произвольный HTML. Этот атрибут указывает браузеру отложить загрузку тяжелых 3D-ресурсов до тех пор, пока пользователь не прокрутит страницу до раздела с картой. Это предотвращает блокировку интерактивными элементами первоначального рендеринга текста, основных изображений и меню навигации, что особенно полезно для мобильных посетителей с медленным интернетом.
Рассмотрите возможность размещения 3D-карты ниже первого экрана страницы, а не в самом верху. Такое стратегическое расположение гарантирует оптимизацию показателя Largest Contentful Paint (LCP) вашего сайта, одновременно предоставляя посетителям необходимый текстовый контекст об объекте недвижимости до того, как они начнут взаимодействовать с 3D-визуализацией. Сочетая отложенную загрузку с продуманным дизайном страницы, вы сможете предложить захватывающую презентацию локации без ущерба для производительности.
Ограничения и применимость
Используйте эти материалы для презентации и поддержки принятия решений, но не в качестве замены независимо проверенной исходной информации. Перед публикацией или использованием подтвердите маршруты, расстояния, доступность, наличие свободных объектов, изображения, юридические границы, требования платформы и текущие условия у соответствующих официальных источников.
| Тип блока WordPress | Рекомендуемый сценарий использования | Адаптивная поддержка | Уровень безопасности |
|---|---|---|---|
| Блок Произвольный HTML | Стандартный код встраивания iframe | Отличная с CSS-оболочкой | Высокий (ограничение на неотфильтрованный HTML) |
| Блок шорткода | Устаревшие конструкторы страниц | Средняя | Средний |
| Блок абзаца | Не рекомендуется (удаляет код) | Отсутствует | Низкий |
| Пользовательский шаблон темы | Глобальное встраивание по всему сайту | Отличная | Высокий |
Шаги по встраиванию 3D-карты Georivo в блок WordPress за несколько минут после интеграции интеграции виджета
- Войдите в панель администратора WordPress и перейдите к целевой странице или записи.
- Добавьте новый блок Произвольный HTML в нужном месте в редакторе блоков.
- Вставьте скопированный адаптивный код iframe Georivo непосредственно в текстовую область блока.
- Оберните iframe в пользовательский CSS-контейнер для сохранения стандартного соотношения сторон.
- Используйте предпросмотр черновика, чтобы проверить начальное состояние загрузки и выравнивание макета.
- Опубликуйте страницу и протестируйте рабочий URL-адрес на нескольких устройствах для проверки авторизации домена.
Интеграция интерактивных геопространственных визуализаций непосредственно в объявления о недвижимости сокращает разрыв между статичными изображениями и физическим посещением объекта, предоставляя покупателям мгновенный географический контекст.
Частые вопросы
Почему моя встроенная 3D-карта показывает сообщение об ошибке домена?
Эта ошибка возникает, когда домен работающего сайта WordPress не совпадает с авторизованными доменами, настроенными в вашем личном кабинете Georivo. Чтобы решить эту проблему, войдите в Georivo, перейдите в настройки виджета и добавьте точный домен вашего сайта в список разрешенных.
Могу ли я использовать стандартный блок встраивания WordPress для Georivo?
Нет, стандартный блок встраивания WordPress разработан для конкретных провайдеров oEmbed. Поскольку Georivo использует защищенные iframe с привязкой к домену, вы должны использовать блок Произвольный HTML для вставки прямого кода iframe.
Как сделать так, чтобы встроенная карта загружалась быстрее на мобильных устройствах?
Вы можете оптимизировать производительность, используя атрибут loading="lazy" для iframe. Это гарантирует, что ресурсы 3D-карты будут загружаться только тогда, когда пользователь прокрутит страницу ближе к карте, сохраняя начальную скорость загрузки страницы на мобильных устройствах.
Требует ли это встраивание физического видеофайла с дрона?
Нет, Georivo использует лицензированные фотореалистичные 3D-геоданные для создания интерактивных презентаций локаций. Вам не нужно размещать, загружать или транслировать тяжелые видеофайлы на вашем сервере WordPress.
Что произойдет, если пользователь посетит страницу с заблокированными сторонними файлами cookie?
Встраиваемые элементы Georivo разработаны с учетом современных стандартов конфиденциальности и не полагаются на сторонние отслеживающие файлы cookie для загрузки базовой 3D-карты, что обеспечивает высокую совместимость в защищенных браузерах.