Вставляем Яндекс Карту на WordPress сайт

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее

Данная инструкция устарела и уже не актуальна. Читайте обновленную версию - Яндекс.Карты для WordPress сайта

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

Получаем Яндекс карту

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

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

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

Просмотр Яндекс карты

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

Яндекс карта для сайта и блога на WordPress

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

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

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

Вставляем карту Яндекса на 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="http://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="http://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 является высотой Яндекс карты - эти параметры вы можете отредактировать по желанию.

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

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях