Данная инструкция устарела и уже не актуальна. Читайте обновленную версию - Яндекс.Карты для WordPress сайта
Подробная контактная страница на сайте с Яндекс картой значительно упростит жизнь вашим клиентам. Яндекс карту можно использовать как схему проезда или как просто карту с меткой, где находится ваша фирма. Вставить карту на WordPress сайт проще чем вы думаете, но для начала карту нужно получить на Яндексе.
Услуга: Установим Яндекс.Карту на Ваш сайт
Установим и настроим Яндекс.Карту, которая будет решать Ваши задачи. Это может быть одна отметка на карте или динамическая карта в зависимости от выбранных условий. Просто поставьте нам задачу.
от 900 рублей
Получаем Яндекс карту
Получить Яндекс карты и отредактировать под свои потребности можно на этой странице сервиса. Внедрение внешних интерфейсов на сайт, в том числе Яндекс Карт, часто отпугивает новичков псевдо сложностью. На самом деле все достаточно просто и адаптированно для рядовых пользователей и начинающих веб-мастеров.
Создание карты
Создание карты ограничивается тем, что вам нужно просто вставить нужный адрес в поле под картой и найти место на карте. Так же вы можете изменить размеры карты, растягивая ее за правый нижний угол. Еще, есть возможность поменять вид отображения карты и масштаб. Я всегда ставлю "Народная", мне она больше нравится. Затем ставим нужную точку на карте и подписываем ее. Все карта создана.
Просмотр Яндекс карты
После этого можно просмотреть карту, и если что-то не устраивает - поменять. В режиме просмотра нужно выбрать вид карты: для блога или для сайта. Карта для блога получается статичной, и мне она не очень нравится, хотя такой вариант заметно меньше требует времени на загрузку. Я обычно выбираю вариант "карта для сайта" и меня все устраивает.
Получить код Яндекс карты
Далее следует получить код Яндекс карты. Прописываем домен сайта, где будем эту карту использовать, читаем пользовательское соглашение, соглашаемся и получаем код Яндекс карты для сайта.
Вставляем карту Яндекса на WordPress сайт
Теперь у вас есть код Яндекс карты и вы можете вставить карту на свой WordPress сайт.
Полученный код Яндекс карты у вас должен быть примерно следующим:
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<div id="ymaps-map-id_13485848986165892726" style="width: 450px; height: 350px;"></div>
<script type="text/javascript">function fid_13485848986165892726(ymaps) {var map = new ymaps.Map("ymaps-map-id_13485848986165892726", {center: [37.617671, 55.75576799999372], zoom: 10, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));};</script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_13485848986165892726"></script>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->Его можно разделить на две части: сам скрипт и блок DIV. Для отображения Яндекс карты на вашем сайте нужно подключить скрипт к сайту. Вы можете сделать это в файле header.php, но я рекомендую подключить скрипты в файл footer.php. Скрипты нужно подключить до закрывающего тега </body> добавив подобный код (у вас он может быть другим, вы его получили ранее):
<script type="text/javascript">function fid_13485848986165892726(ymaps) {var map = new ymaps.Map("ymaps-map-id_13485848986165892726", {center: [37.617671, 55.75576799999372], zoom: 10, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));};</script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_13485848986165892726"></script>Теперь, для того чтобы карта появилась на вашем WordPress сайте, на нужную страницу нужно добавить блок div. В WordPress нужно отредактировать страницу в режиме HTML и разместить на странице подобный код (вы должны были получить его раннее, если вы этого не сделали, читайте пост выше):
<div id="ymaps-map-id_13485848986165892726" style="width: 450px; height: 350px;"></div>
В этом коде 450px является шириной Яндекс карты, а 350px является высотой Яндекс карты - эти параметры вы можете отредактировать по желанию.
Когда вы сохраните все изменения, на сайте должна будет появиться Яндекс Карта.
