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

Александр Писклов
Александр Писклов
Разрабатываю сайты на WordPress с 2011 года.
343
6 минут на чтение

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

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

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

  1. Авторизуйтесь в Яндекс или создайте аккаунт, если у вас его нет.
  2. Зайдите в Кабинет разработчика Яндекс и нажмите на кнопку Подключить API.
  1. Во всплывающем окне выберите JavaScript API и HTTP Геокодер и нажмите Продолжить.
  1. Заполните все данные в форме. В разделе Цель использования отметьте Нужен API ключ для конструктора карт. Нажмите кнопку Отправить.
  1. После отправки данных в кабинете появится раздел JavaScript API и HTTP Геокодер откройте его и нажмите кнопку Новый ключ.
  1. Во всплывающем окне введите название и нажмите Добавить ключ.
  2. После добавления нового ключа, скопируйте его в блоке всех ключей API.
  1. Дополнительно в настройках ключа можно указать список доменов, на которых он будет использоваться. Это защитит ваш ключ от возможного использования на других сайтах, если он попадет в посторонние руки. Нажмите кнопку Изменить, которая появится при наведении на ключ и введите домены с новой строки в поле Ограничение по HTTP Referer.
  • Готово! Теперь сохраните ключ, он понадобится при добавлении карты на сайт.

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

Добавить карту с помощью плагина 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]');

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

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

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

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

Ручное добавление карты состоит из 4 этапов.

#1

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

Подключим скрипты для яндекс карт и создадим новый 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_key полученный API-ключ Яндекс Карт.

#2

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

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

<div id="map" class="map-yandex"></div>

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

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

.map-yandex{
   height: 340px;
   width: 100%;
}

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

#3

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

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

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

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

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

#4

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

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

Дополним код файла 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 и добавили ее на карту. Метке можно задавать тексты при наведении и клике, а также оформление. Все стили меток доступны в документации Яндекс Карт.

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

 

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

Похожие материалы