Пропустить

Как добавить интерактивные карты на ваш сайт WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Если вы используете услугу, такую ​​как Google MapsПросто выберите местоположение и вставьте карту на свой сайт. Тем не менее, вы не можете редактировать карты на лету, а также ваши коллеги - что часто необходимо для совместных проектов.

Здесь вступают интерактивные карты. Они позволяют вам размещать мобильные маркеры, которые могут редактировать все члены вашей команды.

В этом уроке мы поговорим о том, когда этот тип карты будет практичным. Кроме того, мы покажем вам, как добавить их двумя способами в WordPress.

Но прежде чем начать, найдите время, чтобы взглянуть на Как установить тему WordPress, Сколько плагинов я должен установить на WordPress.

Тогда мдавай приступим к работе!

Что такое интерактивная карта (и когда ее использовать?)

Добавить карту на сайт довольно просто. Инструменты, такие как Карты Google позволяют встраивать карты в ваши страницы за считанные минуты, Преимущество такого подхода заключается в том, что посетители могут перемещаться по картам, увеличивать, уменьшать и т. Д.

Эти типы карт более интерактивны, чем просто изображения, но они не позволяют вносить изменения после их добавления на веб-сайт.

С другой стороны, интерактивные карты позволяют вам (а в некоторых случаях вашим коллегам) добавлять новые маркеры, значки, текст и многое другое. Например, представьте, что вы планируете встречу для членов вашего сайта. Вы можете настроить карту с несколькими контактами, чтобы предложить местоположения.

Откройте для себя, кстати 5 WordPress плагины для добавления геолокации в ваш блог

Вы также можете использовать интерактивную карту, чтобы ваши пользователи могли делиться своими местоположениями или посещать места, которые они хотят посетить. Чтобы быть более точным, это нишевые приложения. Тем не менее, интерактивные карты может быть полезным в самых разных ситуациях.

Кроме того, их не обязательно сложнее добавлять, чем их аналогов.

Как добавить интерактивные карты на сайт WordPress

Когда дело доходит до интерактивных карт, вы можете разместить их на своем веб-сайте или использовать плагин, который поможет вам сделать это. Первый подход проще, но плагины часто содержат гораздо больше функций, как и следовало ожидать. Давайте рассмотрим подход плагина, чтобы показать, что это за функции.

1. Использовать плагин Карты Marker Pro

Le плагин Карты Marker Pro является уникальным премиальным решением для добавления карт в WordPress. Он предлагает десятки расширенных функций, таких как те, которые позволяют просматривать карты из нескольких служб, а также добавлять и оценивать практически неограниченное количество маркеров на ваших картах. Кроме того, посетители могут фильтровать типы маркеров, которые они хотят видеть на ваших картах.

Другие забавные вещи, которые вы можете сделать с помощью этого плагина, это добавить информацию о расстоянии и маршруте между маркерами. Вы даже можете поделиться своим собственным местоположением в режиме реального времени через карту своего сайта, если вы склонны сделать это. Настройка плагина может занять некоторое время, учитывая множество функций, которые он предлагает.

Однако это не так сложно, как вы могли себе представить.

Для начала настройте и активируйте плагин, как и любой другой. Если вы новичок в WordPress, откройте для себя Как установить плагин в WordPress

Как только плагин будет готов, вам нужно добавить новую карту или слой, что вы можете сделать на вкладке Maps Marker Pro> Добавить новый слой, Здесь определите имя, которое вы можете распознать для вашего слоя, и введите местоположение, которое вы хотите, чтобы оно отображалось, как и в случае с любым другим онлайн-инструментом картирования:

Теперь вы можете настроить размер и уровень масштабирования, которые вы хотите установить по умолчанию, используя левое меню. Существует также опция под названием Кластеризация маркеров , который будет отображать значок с количеством маркеров в области, если вы увеличите масштаб, как в примере ниже:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

опция Маркеры поискаС другой стороны, это довольно явно. Это может быть полезно, если вы хотите добавить дополнительную информацию о ваших маркерах:

Теперь прокрутите вниз и найдите вариант « Добавить новый маркер на этот слой« , На следующем экране вы сможете определить имя и местоположение для вашего маркера, используя ту же карту, что и предыдущая.

Откройте для себя тоже Как сжать и изменить размер изображения на WordPress

Вы также можете выбрать значок и установить контекстный текст для вашего маркера. Это будет появляться, когда посетители нажимают на сам маркер или выбирают его из списка, если вы решили включить его.

В любом случае, не забудьте нажать кнопку публиковать когда вы закончите. После добавления некоторых маркеров ваш начальный слой должен выглядеть следующим образом:

Когда вы будете готовы добавить новую интерактивную карту на одну из своих страниц, вам необходимо использовать короткий код, Прокрутите до верхней части вкладки Редактировать слой и найдите его соответствующий идентификатор:

Теперь поместите шорткод [mapsmarker layer = "X"] в вашей статье или странице. Не забудьте заменить заполнитель X однако по идентификатору вашего "слоя" заранее.

Ваша карта должна быть в рабочем состоянии на вашем сайте! Что еще более важно, вы или кто-либо другой в вашей команде можете редактировать его и добавлять новые маркеры в любое время, не покидая панель управления.

2. Использование встроенной функции встраивания Google Map

Google Maps на самом деле не нужно знакомство - это сервис, который позволяет вам извлекать карты со всего мира, чтобы делиться местами с другими, находить адреса и даже делиться информацией о том, где вы находитесь. Что касается веб-сайтов, вы можете интегрировать Карты Google в свои страницы различными способами.

Тем не менее, большинство карт предлагают ограниченное количество интерактивности. Они позволяют перемещаться по ним, увеличивать, уменьшать и изменять вид, но не более.

Дело в том, что Google Maps предлагает гораздо больше возможностей, чем простое картирование. Например, вы также можете добавить несколько маркеров, измерить расстояния и включить направления в свои карты. Чтобы попробовать эти функции, перейдите на Google My Maps и нажмите на кнопку + Создать новую карту :

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

На следующем экране определите заголовок вашей карты и ее первый слой, на который мы будем опираться. Найдите местоположение, которым вы хотите поделиться, используя панель поиска Google Map в верхней части экрана:

При увеличении масштаба вы можете использовать символ маркера в верхней части экрана, чтобы начать выделять места на вашей карте. Просто щелкните там, где вы хотите разместить свой маркер, затем установите имя и значок для него:

Добавьте маркер на вашу новую карту.

Если у вас есть несколько маркеров, вы можете нарисовать линии между ними, чтобы отобразить расстояния:

Когда ваша карта будет готова, нажмите на кнопку доля в меню слева. Там меняй настройки доступа de частный à общественность :

Вы также можете пригласить членов команды использовать свою электронную почту, чтобы они могли немедленно получить доступ к карте:

В любом случае, вы всегда должны включать свою новую карту в свой веб-сайт. Вы можете сделать это, нажав на трехточечный значок рядом с названием вашей карты и выбрав опцию Вставить эту карту :

Теперь вы можете скопировать и вставить код встраивания на ваших страницах. Ваша новая карта появится там, где вы ее разместите. Кроме того, ваши коллеги смогут редактировать его и добавлять новые маркеры через Google Maps, если это необходимо.

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Ultimate Math Captcha

Ultimate Math Captcha - это премиум плагин для WordPress, который на 100% эффективен. Он позволяет добавлять математическую капчу в формы входа WordPress, регистрацию, восстановление пароля, комментарии, WooCommerce, Easy Digital Downloads и в формы bbPress.

Возможности включают простую настройку и настройку, добавление капчи во многих формах, множественную поддержку капчи на одной странице, настройку сообщений об ошибках и многое другое.

скачать | Демонстрация | веб-хостинг

2. Стандартный платежный шлюз PayPal для форм Ninja

Стандартный шлюз PayPal для форм Ninja позволяет создавать формы, которые легко интегрируются с платежным шлюзом PayPal. Вы сможете создавать персонализированные формы заказов и получать платежи с использованием стандартных учетных записей Paypal.

Его основными функциями являются: простая и быстрая интеграция, интеграция с IPN, возможность включения / отключения шлюза PayPal в отдельных формах, поддержка регулярных платежей и т. Д.

скачать | Демонстрация |веб-хостинг

3. Гравитационные формы - список и редактирование

С этим премиальным плагином WordPress можно изменять или удалять записи, представленные в формах вашего сайта. Особенность, которой очень не хватает в плагине Gravity Forms, поэтому это расширение было создано.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Среди его особенностей отметим среди прочего: мредактирование и сохранение записанных данных,угнетение введенных данных,редактирование и удаление ранее опубликованных статей,Идеальная интеграция с плагинами jQuery Datatables и Гравитационные ФормыПоддержка условной логики, сосуществить и быстро установить, и многое другое.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Откройте для себя другие рекомендуемые ресурсы, которые будут сопровождать вас при создании и управлении вашим сайтом.

Заключение

Вот и все! Это все для этого урока, я надеюсь, что оно позволит вам создавать интерактивные карты на WordPress. Не стесняйтесь поделиться с друзьями в ваших любимых социальных сетях.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
8 акции
доля4
чирикать2
Регистрация2