Как вставить Яндекс Карту на сайт WordPress
Если вы являетесь разработчиком или владельцем какого-то коммерческого проекта на WordPress, например, интернет-магазина, то на определенном этапе вам может понадобиться указать координаты фирмы, или адрес физического магазина. Конечно, можно написать адрес простым текстом и разместить в контактах, но, с точки зрения удобства для пользователей – это не лучший вариант.
Самым лучшим решением будет размещение карты, со схемой проезда или с меткой на месте расположения офиса.
Ее можно вставить в раздел контактов, чтобы клиенты могли визуально определить, как добраться до вашего офиса. Желательно использовать для этих целей сервис Яндекс, поскольку он больше ориентирован на русскоязычных пользователей.
Вставить Яндекс карту на сайт под управлением WordPress достаточно просто. Можно либо сразу воспользоваться Yandex API, чтобы создать ее и получить код для размещения, либо установить специальный плагин, который с помощью этого же API сделает все за вас.
Содержание
Размещение через Yandex API
Некоторые пользователи WordPress, особенно новички, могут подумать, что использование внешнего интерфейса (API) Yandex – это сложно. На самом деле, пользоваться им не сложнее, чем сделать тот же счетчик посещаемости. Сервис, который предлагает Яндекс, имеет очень удобный конструктор с простым и понятным интерфейсом.
Создание
Конструктор Яндекс позволяет задавать множество параметров для создания карты. Он дает возможность изменить масштаб, поставить метку на любой объект, ввести название и описание для этой метки, а также прочертить линию или прямоугольную область на местности. Можно еще выбрать способ отображения как вид со спутника или гибрид, но на сайт лучше вставить схему. Затем, вы можете указать нужный размер, и выбрать тип из трех вариантов:
- Интерактивная – можно перемещаться по местности, выделять объекты;
- Статическая – изображение в формате PNG с ограничением по количеству объектов;
- Печатная – изображение в высоком разрешении (только для печати).
Для вставки на WordPress сайт подойдет как первый, так и второй вариант, все зависит от того, какие возможности вы хотите предоставить пользователю. Теперь, можно сохранить результат и получить HTML-код для вставки на сайт.
Вставка на сайт
Сгенерированный в Yandex код нужно скопировать и вставить на любую страницу, виджет или пост. Только имейте ввиду, что при вставке обязательно переключать редактор в текстовый режим, иначе на странице будет отображаться простой код.
Теперь, опубликуйте страницу или пост на сайт, и там вы увидите вашу карту. Отредактировать ее можно в любой момент, через тот же конструктор. Вам даже не потребуется заново вставлять код, любые изменения в конструкторе применяются сразу на все вставленные ссылки
Размещение через плагин
Для этих целей есть несколько различных решений, но самый популярный плагин — Oi Yandex.Maps. Он использует Yandex API, но не требует никаких ключей. Вы просто вводите нужный адрес или координаты, а плагин генерирует специальный шорткод, который можно вставить на страницу, пост или виджет. В нем можно задать любое количество меток на нужных объектах. Кроме того, количество шорткодов на одной странице не ограниченно.
Использование Oi Yandex.Maps
После того, как вы установите и активируете этот плагин, в визуальном редакторе страницы или поста появится специальная кнопка для генерации шорткода. При нажатии на нее отображается окно, в котором задаются основные параметры, такие как:
- Адрес – место расположения метки (Город, ул. Название улицы, номер дома);
- Координаты – место расположения метки в координатах (заполняется автоматически при вводе адреса);
- Заголовок балона – текст заголовка в описании, отображаемом при нажатии на метку;
- Контент балона – основной текст этого описания;
- Подвал балона – нижний текст в описании;
- Заголовок метки – текс заголовка, отображаемого над меткой;
- Подсказка метки – короткое описание при наведении на метку.
Кроме этих параметров, есть возможность выбрать центр, масштаб, ширину и высоту, но можно оставить эти поля пустыми, тогда они заполнятся автоматически. Как только все нужные поля будут заполнены, можно нажимать «Insert Map», и сгенерированный шорткод появится в тексте страницы. Он должен выглядеть примерно так:
[showyamap]
[placemark address="Москва, ул. Ленина, 2"
coordinates="55.649479,37.3318"
header="Наш офис"
body="Загляните к нам"
footer="Дополнительная информация"
hint="Офис нашей организации"
iconcontent="Мы находимся здесь"/]
[/showyamap]
Можно отредактировать любой параметр этого шорткода прямо в тексте, либо полностью удалить его и вставить новый, с нужными данными. Кроме того, есть возможность добавить дополнительные метки в этот же шорткод. Для этого нужно поставить курсор в самый конец текста в визуальном редакторе, перед словом «[/showyamap]», и нажать на кнопку генерации. Появившееся окно позволит задать параметры для новой метки, а затем нужно будет нажать «Insert Placemark».
Теперь вы можете добавить любой контент в страницу, рядом с шорткодом, и опубликовать ее. Она уже будет содержать готовую карту с заданными параметрами и описанием.
Настройки Oi Yandex.Maps
Этот плагин практически не имеет настроек, все основные параметры задаются при создании шорткода. Единственное, что вы можете изменить, это параметры по умолчанию, чтобы не вводить их каждый раз. Изменить эти параметры можно в разделе настроек модуля, находящемся в меню общих настроек WordPress.
Вывод
Как видите, оба способа размещения Яндекс карты достаточно простые. Сложности могут возникать только на старых версиях WordPress, но там все решается с помощью шаблонов. Кроме этих двух способов, есть еще несколько других, позволяющих использовать более сложные функции, например, отслеживание транспорта. Эти функции реализуются вручную через Яндекс API, что потребует некоторых навыков программирования.
Загрузка...
