WordPress

Как добавить Google карты в WordPress (3 способа)

Добавить гугл карты в Вордпресс

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

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

  1. Плагин Google Maps WordPress.
  2. Встроенную функцию Google Maps.
  3. Тему WordPress.

У нас есть много информации о том, как добавить Google карту в WordPress, так что находите скорее своё местоположение на карте и давайте начинать!

Почему нужно добавить Google карты в WordPress

Добавить Google карты в WordPress

Карты Google являются точными и интерактивными.

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

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

Вот несколько причин чтобы добавить Google карты в WordPress, и улучшить ваш сайт:

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

Конечно, есть другие онлайн-карты (англ), помимо Google Maps. Тем не менее, Google – это общеизвестное название. Поэтому большинство людей, которые посещают ваш сайт, скорее всего, будут использовать для поиска Google Maps и будут доверять его надёжности.

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

Как добавить Google карты в WordPress (3 способа)

По крайней мере, стоит попробовать добавить Google карты в WordPress на ваш сайт. Мы предлагаем вашему вниманию три способа, которыми можно это сделать. Мы начнём с плагинов, перейдём к добавлению карт вручную и рассмотрим темы. Давайте начинать!

1. Установите плагин Google Maps для WordPress.

Карты Google – популярная функция среди веб-сайтов, так что неудивительно, что столько плагинов Google Maps доступны в WordPress.

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

Плагин Google Maps

По нашему мнению, WordPress Google Maps является одним из лучших вариантов, поскольку он также поддерживает расширенные функции, такие как совместимость с несколькими плагинами кеширования (англ) и Сетями Доставки Содержимого (CDN).

Однако есть и другие плагины, которые вы можете использовать. WD Google Maps (англ) – это надёжный вариант. Этот плагин поддерживает несколько маркеров, предоставляет мобильные карты и предлагает несколько настроек:

Установка WP Google Maps

Когда вы добавляете новую карту с помощью WD Google Maps, плагин направляет вас по этому процессу с помощью интуитивно понятного конструктора, который включает в себя встроенные функции предварительного просмотра.

Наконец, Google Maps Widget (англ) также является одним из лучших плагинов Google Maps. Этот плагин очень прост в настройке. Он позволяет вам добавлять карты-миниатюры на боковую панель WordPress (или нижние колонтитулы), которые посетители могут развернуть щёлкнув по ним мышкой:

Виджет Google Maps

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

Тем не менее, для бизнес-сайтов мы рекомендуем полноразмерные карты, поскольку их сложнее игнорировать. Имея это в виду, давайте поговорим о том, как использовать плагин WP Google Maps.

Сначала перейдите на панель инструментов WordPress и перейдите во вкладку Плагины>Добавить новую. Используйте панель поиска, чтобы найти плагин WP Google Maps. Когда вы увидите, что он появляется среди результатов, нажмите кнопку Установить сейчас прямо рядом с ним:

Установить WP Google Maps

Активируйте плагин, и новая вкладка Карты появится на панели управления. Если вы нажмёте на неё, в плагине появится краткая вводная страница. Тем не менее, вы можете нажать кнопку Пропустить ввод и создать карту, чтобы перейти непосредственно к созданию карты:

Интро-страница Google Maps

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

Создать ключ API

Google попросит вас согласиться с условиями, прежде чем вы сможете создать приложение и получить ключ API. Как только вы согласитесь, Google создаст для вас новый проект, и вы сразу же сможете сгенерировать ключ API:

Пример ключа API

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

Куда вставлять ключ API

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

Ваша первая карта

Как вы можете видеть выше, плагин позволяет вам настроить тестовую карту для вас, которую вы можете редактировать и использовать на своём веб-сайте. Для этого нажмите кнопку Изменить под названием карты. Теперь плагин попросит вас выбрать, какую платформа должна использовать ваша карта. Выберите вариант Карты Google:

Выбрать платформу для карты

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

Название карты

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

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

Установить маркеры на карте

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

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

Вы можете вставлять созданные вами плагины WordPress Google Maps, вставляя их короткие коды (англ) в любом месте вашего сайта. Вы можете найти эти короткие коды на вкладке Карты на панели управления справа от каждой записи:

Shortcode карты

Вот и всё! Вы только что добавили свою первую карту Google в WordPress. С помощью этого плагина (и других подобных ему) вы можете создать столько карт, сколько захотите.

2. Используйте функцию Embed Google Map

Если вы не хотите использовать плагин для создания WordPress Google Maps, вы можете сделать это вручную. Существуют встроенные функции, которые вы можете использовать для того, чтобы добавить Google карты в WordPress. Однако гораздо более простой подход – использовать службу, которая позволяет вам генерировать коды для Google Maps на лету.

Embed Google Map (англ) – отличный пример. Он позволяет просматривать адреса с использованием интерфейса Google Maps по умолчанию и настраивать размер и уровень масштабирования, который вы хотите использовать в своих картах:

Embed Google Map

После того, как вы выполнили эту небольшую настройку, вы можете нажать кнопку Получить HTML-код, и сайт будет генерировать фрагмент кода HTML, который вы можете добавить на свой сайт.

Вставить код карты

Перейдите и скопируйте этот код, затем вернитесь на панель инструментов WordPress. Затем откройте редактор для любой страницы, на которую вы хотите добавить свою карту Google. Выберите вкладку Текст, которая поддерживает HTML-код:

Текст "Как нас найти"

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

Пример карты

Недостатком этого подхода является создание новых кодов для каждой карты, которую вы хотите добавить на свой сайт. С положительной стороны, как только вы добавите карту через HTML, вы сможете увидеть её во вкладке Visual:

Visual Tab

Это позволит вам продолжать работать на ваших страницах без необходимости делать всё с помощью Текстового редактора.

3. Добавить Google карты в WordPress Theme

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

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

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

Одна из самых популярных многоцелевых тем называется Divi (англ). Эта тема предлагает ряд преимуществ, в том числе собственный встроенный визуальный конструктор страниц:

Тема Divi

Когда вы создаёте страницы с помощью Divi Builder (англ), вы можете разделить их на строки и столбцы. Затем вы можете добавить определённые модули в соответствующие пробелы:

Пример модуля

Вероятно, вы заметили, что один из модулей на приведённом выше снимке экрана называется Map. Нажмите на него, и тема попросит вас ввести ключ API Google (англ). Если у вас его нет, мы рассмотрели процесс его создания в рамках первого метода в этой статье.

После того, как вы вставляете свой API-ключ, вы можете выбрать, где разместить свою карту, и добавить столько маркеров, сколько хотите:

Добавить новый маркер

Другие примеры тем, которые поддерживают WordPress Google Maps в базовой версии, включают Travelmatic (англ), Estato (англ) и Reales WP (англ). Это очень популярная функция среди ориентированных на путешествия или недвижимость тем, но вы можете найти её доступной для других типов тем, если вы просмотрите некоторые из них.

Вывод

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

Есть ли у вас какие-либо вопросы о том, как добавить Google карты в WordPress на своем сайте? Не стесняйтесь спрашивать нас в разделе комментариев ниже!

Anna Birukova

Анна долгое время работала в сфере социальных сетей и меседжеров, но сейчас активно увлеклась созданием и сопровождением сайтов. Она любит узнавать что-то новое и постоянно находится в поиске новинок и обновлений, чтобы делиться ими с миром. Ещё Анна увлекается изучением иностранных языков. Сейчас её увлёк язык программирования!

Добавить комментарий

Нажмите здесь, чтобы оставить комментарий

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

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00