Плагин YaMaps для вставки Яндекс карт в WordPress

6 Февраль, 2018

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

Скачать плагин Яндекс.Карт
в репозитории плагинов WordPress.

Проект на GitHub

Основная задача: максимальное удобство и простота интерфейса для конечного пользователя.

Вставка через визуальный редактор

Плагин YaMaps добавляет кнопку в стандартный визуальный редактор TinyMCE:

Плагин YaMaps для Яндекс.Карт в WordPress

Карта для вставки настраивается во всплывающем окне редактора:

Визуальный редактор Яндекс Карт

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

Выбор цвета метки а Яндекс Картах

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

Элементы управления Яндекс Картами

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

Шорткод для вставки Яндекс Карт

Структура кода:

[yamap center="58.0096,56.2455" zoom="16" type="yandex#satellite" controls="typeSelector;zoomControl;searchControl;routeEditor;rulerControl;trafficControl;fullscreenControl;geolocationControl"][yaplacemark coord="58.0096,56.2455" color="#ff0505" name="Тестовая метка"][/yamap]

Описание шорткодов:

  • yamap center — Координаты центра карты
  • yamap zoom — Масштаб карты (от 0 до 19)
  • yamap type — Типа карты (yandex#map, yandex#satellite, yandex#hybrid)
  • yamap scrollzoom – Изменение масштаба колесом мыши (scrollzoom=’0′ чтобы отключить)
  • yamap controls — Элементы управления картой, разделенные точкой с запятой  (typeSelector;zoomControl;searchControl;routeEditor;trafficControl;fullscreenControl;geolocationControl) см. подробнее в документации Яндекс.Карт

 

  • yaplacemark coord — Координаты метки
  • yaplacemark color — Цвет метки
  • yaplacemark name — Название (всплывающая подсказка или содержимое метки)
  • yaplacemark icon — Тип иконки. Можно выбрать и установить вручную из большого списка.

Коллекйия иконок

Вы можете вставлять несколько шорткодов меток внутри шорткода карты:

Код:

[yamap center="58.0102,56.2497" zoom="16" type="yandex#map" controls="typeSelector;zoomControl;searchControl;routeEditor;rulerControl;trafficControl;fullscreenControl;geolocationControl"][yaplacemark coord="58.0096,56.2455" color="#ff0505" name="Метка 1"][yaplacemark coord="58.0106,56.2536" color="#2bab22" name="Метка 2"][/yamap]

Результат:

Несколько маркеров на Яндекс Картах

Как вставить шорткод в шаблон WordPress?

Используйте функцию do_shortcode с вашим шорткодом внутри:

<?php echo do_shortcode('[yamap center="55.7532,37.6225" height="15rem" zoom="12" type="yandex#map" controls="typeSelector;zoomControl"][yaplacemark coord="55.7532,37.6225" icon="islands#blueRailwayIcon" color="#ff751f" name="Placemark"][/yamap]'); ?>

Установка плагина:

1. Загрузить директорию с файлами «yamaps» в папку плагинов WordPress: «/wp-content/plugins/».
2. Активировать на вкладке «Плагины» в меню панели управления WordPress.

История версий:

= 0.4.0 =
* New: Добавление нескольких меток в визуальном редакторе.
* New: Изменено: элемент управления «routeEditor» заменен на «routeButtonControl» для удобства построения маршрутов.

= 0.3.4 =
* New: Добавлена возможность вставки карты в описание продукта WooCommerce (и другие аналогичные плагины, использующие произвольные поля).

= 0.3.0 =
* Fixed: Изменен способ локализации в соответствии с рекомендациями документации ВордПресс. Теперь пользователи могут переводить плагин на свои языки.

= 0.2.4 =
* New: Добавлена возможность отключения масштабирования карты колесом мыши

= 0.2.3 =
* Fixed: Добавление url-ссылки в шорткод из визуального редактора

= 0.2.2 =
* Fixed: Из шорткода принудительно вырезаются тэги форматирования, которые могли попасть из визуального редактора WordPress

= 0.2.1 =
* Fixed: Иноформация о плагине обновлена

= 0.2 =
* New: Добавлена возможность выбора иконки метки
* New: Добавлена возможность добавлять ссылку для перехода при клике на метку
* New: Добавлен параметр «Height» для установки высоты карты
* Fixed: Автоматически передвигаем метку в центр после поиска

= 0.1 =
* Первый релиз плагина

Дальнейшее развитие:

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