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

от

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

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

Способ 1: Использование плагина

Для более простого добавления Яндекс Карт вы можете использовать плагин. Один из популярных плагинов – «WP Yandex Map». Вот краткое руководство по его установке:

  1. Перейдите в раздел Плагины в админ-панели.
  2. Нажмите Добавить новый и введите «WP Yandex Map» в строку поиска.
  3. Установите и активируйте плагин.
  4. Перейдите в настройки плагина и введите координаты вашего офиса или адрес.
  5. Сохраните изменения и вставьте шорткод карты на нужной странице или в записи.

Способ 2: Ручной ввод кода

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

  1. Перейдите на сайт Яндекс Карты.
  2. Найдите нужное место и нажмите на кнопку Поделиться.
  3. Выберите вкладку Код для вставки и скопируйте HTML-код.
  4. В админ-панели WordPress создайте или отредактируйте страницу, куда вы хотите вставить карту.
  5. Включите редактор HTML и вставьте скопированный код.
  6. Сохраните изменения и проверьте отображение карты на сайте.

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

Получение ключа для Яндекс Карты

Для того чтобы добавить Яндекс Карту на ваш сайт, вам потребуется API-ключ. Инструкция по его получению приведена ниже:

  1. Войдите в Яндекс или создайте новую учетную запись, если у вас ее нет.
  2. Перейдите в Кабинет разработчика Яндекс и нажмите на кнопку Подключить API.

  1. В появившемся окне выберите JavaScript API и HTTP Геокодер, затем нажмите Продолжить.

  1. Заполните все необходимые поля в форме. В разделе Цель использования выберите Нужен API ключ для конструктора карт, и нажмите на кнопку Отправить.

  1. После отправки данных в кабинете отобразится раздел JavaScript API и HTTP Геокодер. Откройте его и нажмите на кнопку Новый ключ.

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

  1. В дополнение, в настройках вашего ключа можно указать домены, на которых он будет использоваться. Это защитит ваш ключ от несанкционированного использования, если кто-то получит к нему доступ. Нажмите кнопку Изменить, появляющуюся при наведении на ключ, и введите домены с новой строки в поле Ограничение по HTTP Referer.

  • Отлично! Теперь запишите ваш ключ, он понадобится при добавлении карты на сайт.

Доступно 25 000 запросов в сутки для бесплатного использования Яндекс Карт.

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

Если у вас возникнут проблемы или вопросы в процессе работы с API, вы можете обращаться на форумы для разработчиков или обращаться в техподдержку Яндекса для получения помощи.

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

Добавить карту с помощью плагина YaMaps

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

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

Установите и активируйте плагин, после чего перейдите в его настройки в разделе Настройки > YaMaps. Здесь необходимо сделать предварительную настройку плагина.

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

Внизу страницы введите API-ключ, который мы только что создали.

Сохраните внесенные изменения и можно приступать к установке карты на страницу.

Откройте редактор страниц. Если вы используете классический редактор, вы увидите новую кнопку Добавить карту.

Если вы используете редактор Gutenberg, чтобы добавить карту, сначала вставьте блок Классический. Это позволит вам открыть классический редактор, где вы найдете кнопку Добавить карту.

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

Укажите название метки, которое будет отображаться при наведении. Координаты для метки автоматически установятся, как только вы кликнете на нужную точку на карте. Стиль значка и его цвет следует выбирать в соответствии с оформлением вашего сайта. Ссылка – это URL, который откроется при нажатии на метку.

На вкладке Карта обязательно укажите высоту, на которую должна быть установлена карта.

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

  • Карта успешно добавлена!

Вставка карты в код темы

Чтобы вписать карту в любое место в шаблоне, используйте сгенерированный ранее шорткод, применяя функцию do_shortcode().

Например, если вы хотите расположить карту в подвале сайта, откройте файл footer.php и добавьте необходимый код в подходящем месте.

echo do_shortcode('[yamap center="56.8338,60.6182" height="360px" controls="" zoom="12" type="yandex#map" scrollzoom="0" mobiledrag="0"][yaplacemark name="Наш офис" coord="56.8299,60.6066" icon="islands#blueIcon" color="#001df5"][/yamap]');

Не забудьте заменить шорткод на свой собственный.

Если вы сделали всё правильно, Яндекс Карта должна появиться в подвале сайта.

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

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

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

Добавить карту с помощью кода

Ручное добавление карты требует знаний в редактировании файлов шаблона.

Процесс ручного добавления карты включает четыре этапа.

Подключение скриптов

Сначала добавим необходимые скрипты для работы с Яндекс Картами и создадим новый файл JS, названный maps.js, в директории js вашей темы.

add_action( 'wp_enqueue_scripts', 'enqueue_maps_scripts'); function enqueue_maps_scripts() { $api_key = 'ваш API-ключ'; wp_enqueue_script( 'maps', get_template_directory_uri() . '/js/maps.js', [ 'ymaps' ], null, [ 'in_footer' => true ] ); wp_enqueue_script( 'ymaps', 'https://api-maps.yandex.ru/2.1/?apikey=' . $api_key . '&lang=ru_RU', [], null, [ 'in_footer' => true ] ); }

Не забудьте указать ваш полученный API-ключ в переменной $api_key.

Создание контейнера для карты

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

Контейнер обязательно должен содержать id, к которому будет подключена карта.

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

.map-yandex

Добавьте стили в файл style.css вашей активной темы.

Создание карты

Затем откройте файл maps.js, который мы создали на предыдущем шаге, и добавьте в него следующий код:

ymaps.ready(function () { var map = new ymaps.Map('map', { center: [ 56.838011, 60.597474 ], zoom: 12 }); });

Карта будет загружена в контейнер с ID #map. Параметр center устанавливается вручную. Вы можете легко определить координаты, зайдя на сайт yandex.ru/maps. Кликнув на необходимую точку на карте, слева вы увидите координаты этой позиции.

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

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

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

Дополнительные изменения вносим в файл maps.js

ymaps.ready(function () {
var map = new ymaps.Map('map', {
center: [56.838011, 60.597474],
zoom: 12
});
var point = new ymaps.Placemark([56.838011, 60.597474], {
hintContent: 'Наш офис', // Текст, который появляется при наведении на метку
balloonContent: 'Офис компании в Екатеринбурге', // Содержимое всплывающего окна при клике на метку
}, {
preset: 'islands#redIcon' // Выбор стиля метки на карте
});
map.geoObjects.add(point);
});

Мы создали объект метки типа Placemark и добавили его на нашу карту. Метке можно указать тексты, которые будут отображаться при наведении или клике, а также выбрать стиль оформления. Полный список доступных стилей меток можно найти в документации Яндекс Карт.

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

  • На этом все. Мы обсудили два метода добавления Яндекс Карт на сайт WordPress. Если остались вопросы, не стесняйтесь задавать их в комментариях.

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