Как настроить плагин яндекс карты для wordpress

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

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

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

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

Видеоинструкция

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

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

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

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

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

ВНИМАНИЕ! Для корректной работы поиска по карте и составления маршрутов Яндекс начал требовать подключать API-ключ (JavaScript API и HTTP Геокодер) на странице настроек плагина. Если вы видите ошибку «Сервер не смог обработать запрос» — причина именно в этом.

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

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

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

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

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

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

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

Результат:

Страница настроек плагина

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

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

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

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

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

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

* Исправлено: Если вызов функции wp_footer() отсутствует в подвале шаблона, вызов API делается альтернативным способом.

* Изменено: Если не введен API-ключ Яндекс.Карт не введен на странице настроек плагина, поисковое поле в редакторе карт не отображается.

* Загрузка Yandex Map Api перемещена в подвал для ускорения загрузки контента.

* Улучшена совместимость со сторонними редакторами блоков (Elementor, BuildPress и др.)

* Исправлено: Поддержка WP 5.3

* Новое: На странице настроек вы можете ввести API-ключ, если есть проблемы с лимитами использования.

* Исправлено: Одновременное отображение карты в виджете и на странице могло вызывать ошибку.

* Кнопка «Открыть на большой карте»/«Как добраться» может быть включена в настройках плагина.

* Убрана кнопка перехода на Яндекс карты.

* Исправлено: Улучшена совместимость с другими плагинами.

* Исправлено: В редких случаях проблемы с загрузкой API с произвольными полями.

* Исправлено: Исправлен конфликт со счетчиком Яндекс.Метрики

* Новое: Плагин работоспособен в редакторе Elementor

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

* Новое: Перетаскивание карты можно отключить для мобильных устройств.

* Новое: Вы можете использовать собственные иконки. Вставьте ссылку на файл в поле типа иконки (адрес должен содержать «http»).

* Новое: Кнопка сброса настроек по умолчанию.

* Некорректный элемент управления «111» в настройках блокировал отображение элементов на новой карте.

* Новое: Ссылки для помощи добавления элементов управления на странице настроек плагина.

* Новое: Ссылка на страницу плагина (может быть отключена в настройках).

* Добавлена страница настроек плагина. Вы можете выставить центр карты по умолчанию в нужном вам городе, выбрать цвет метки и другое.

* Новое: Добавлены стили для блока классического редактора в Гутенберг.

* Новое: Визуальное редактирование существующих карт.
* Новое: Красивый шаблон шорткода в визуальном редакторе TinyMCE с кнопкой редактирования
* Рефакторинг кода.
* Исправлены ошибки.

* New: Вкладка «Дополнительно».
* New: Вместо URL-адреса ссылки можно ставить ID записи.
* New: Вы можете поместить карту в существующий блок в теме ВордПресс. Если поле заполнено, новый блок карты в содержимом создаваться не будет.

= 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 =
* Первый релиз плагина

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

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

Источник

Как вставить Яндекс карту на сайт WordPress

Дата публикации: 2016-02-23

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

Итак, для добавления карты на сайт ее сначала нужно создать. Сделать это можно, воспользовавшись конструктором сайт от сервиса Яндекс. Доступен этот сервис по следующему адресу — //tech.yandex.ru/maps/tools/constructor/.

Как видим, нам предлагают выбрать уже готовую карту либо же создать новую. Обратите внимание, для создания карты, впрочем, как и для работы с другими сервисами от Яндекс, вам необходима учетная запись на Яндксе. Если у вас ее нет или вы не авторизованы, тогда Яндекс предложит вам создать свою учетную запись или авторизоваться в уже имеющейся. Итак, нажимаем кнопку Создать новую карту и, скорее всего, вы увидите карту того города, в котором находитесь.

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

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

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

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

Для метки можно задать текст (описание), установить ее цвет и тип. После этого нажимаем кнопку Готово. После этого в левой части страницы найдем кнопку Сохранить карту и получить ссылку и нажмем ее.

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

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

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

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

Сохраним страницу и посмотрим изменения в пользовательской части сайта WordPress. Как видим, Яндекс карта успешно появилась на сайте WordPress.

Все крайне просто и весь процесс занял буквально считанные минуты. Что очень удобно, так это то, что мы можем при желании Яндекс карту разместить на любой странице сайта WordPress и даже в любой части сайта. Например, мы вполне можем сформировать миниатюрную карту и вставить ее в сайдбар. Для этого достаточно использовать виджет Текст, который позволяет вставлять код HTML. Ну а у меня на этом все. Удачи!

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Источник

Как быстро вставлять Яндекс Карты на сайт WordPress при помощи плагина и без него

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

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

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

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

Однако, если говорить непосредственно о плагинах, то их у Яндекса в разы меньше, но так ли они нужны? Может все-таки дело в том, что ресурс настолько удобен, что в отличие от Гугловских продуктов они просто не нуждаются в дополнительном упрощении?

Давайте это выясним.

Нужны ли вам карты

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

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

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

Добавление вручную: простота или лишние проблемы

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

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

Можно выбрать свой цвет и тип метки.

В центр без труда устанавливается иконка. Осталось только добавить свое описание, если это необходимо и нажать «Готово».

После этого вы можете вводить и другие адреса. Снова нажимать «найти» и метки будут добавляться на эту карту. Нажав на них вы можете перемещаться между метками и удалять их.

Описание можно ввести и в названии самой карты. Осталось только «Сохранить и продолжить».

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

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

Осталось только получить html код. Скопируйте его.

Вы можете создать отдельную страницу с адресами или вставить его в текст статьи. Зайдите в админ панель ВордПресс. Затем откройте редактор публикаций и выберите текстовую версию.

Вставляете полученный код и вуа-ля. Карта добавлена.

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

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

Хотя, откровенно говоря, думаю, что нажмут сюда не многие. Так что можно не беспокоиться.

Дополнительные возможности

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

И тем не менее, рассказать о них я должен. Иногда эти инструменты могут быть необходимы. Ума не приложу, что это может быть за ситуация – захват Пруссии, война с норманнами… не представляю. Если у вас есть идеи — пишите в комментариях к этой статье.

Линии, благодаря которым можно рисовать вот такие забавные фигуры.

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

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

Многоугольники чем-то напоминают линии, но позволяют заполнить определенную территорию цветом.

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

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

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

Хотя и в этом случае не вижу смысла нагружать сайт лишними приложениями. Если есть возможность, то лучше обойтись без них.

Однако, возможно у вас другое мнение, так что пару слов о плагинах.

Плагины добавления

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

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

Расскажу лишь про бесплатное расширение Oi Yandex.Maps for WordPress . После установки в визуальном редакторе записей появляется кнопка «Яндекс карты».

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

В этом случае карта будет выглядеть вот так.

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

Ну вот и все. Теперь вы знаете как создать и добавить Яндекс Карту на сайт ВордПресс. Если вам была полезна эта статья, подписывайтесь на рассылку и узнавайте больше о правильной и простой работе по созданию и обслуживанию сайтов.

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

Ничто лучше не покажет вашу работу заказчику, чем реальные обращения от клиентов. Как и Яндекс.Карты установить эту опцию можно проще простого. Для этого есть сервис Callbackkiller ( https://callbackkiller.com ). Через него можно говорить и тогда вам придется оплачивать минуты разговора, а можно просто получать письма на почту. И это совершенно бесплатно.

Я желаю удачи в ваших начинаниях. До новых встреч.

Источник