Если вы являетесь разработчиком или владельцем какого-то коммерческого проекта на 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, что потребует некоторых навыков программирования.
Похожие статьи
wordpresslib.ru
Описание
YaMaps — простейший способ вставить карту на ваш сайт. У плагина дружественный интерфейс. Вы можете визуально ставить метки на Яндекс.Карту, двигать их мышью, менять иконки и многое другое.
Возможности плагина:
- Вы можете добавлять карты без знания кода.
- Вы можете редактировать шорткоды в визуальном редакторе.
- Вы можете добавлять любое количество карт на страницу.
- Вы можете добавлять множество меток на карту.
- Вы можете добавлять гиперссылки для меток.
- Вы можете выбирать иконку и ее цвет в визуальном редакторе.
- Вы можете выбирать тип отображаемой карты (Карта, Спутник, Гибрид), кнопки масштаба и другие элементы управления.
Структура шорткода
- yamap center — Координаты центра карты
- yamap height — Высота карты
- yamap zoom — Масштаб карты (от 0 до 19)
- yamap scrollzoom — Отключить масштаб карты колесом мыши (scrollzoom=’0′ для блокировки)
- yamap type — Тип карты (Например: yandex#map, yandex#satellite, yandex#hybrid)
- yamap controls — Элементы управления картой, разделенные точкой с запятой (typeSelector;zoomControl;searchControl;routeEditor;trafficControl;fullscreenControl;geolocationControl)
-
yamap container — ID существующего блока в теме WP. Карта будет помещена в блок с указанным ID. Новый блок карты в содержимом записи создаваться не будет.
-
yaplacemark coord — Координаты метки
- yaplacemark icon — Иконка
- yaplacemark color — Цвет маркера
- yaplacemark name — Подсказка или содержимое иконки
-
yaplacemark url — URL-адрес или ID записи, которые будут открыты при клике на метку
-
Вы можете добавлять множество меток внутри шорткода карты.
Пример шорткода
[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]
ru.wordpress.org
Здравствуйте !
Прочитав данную статью, вы узнаете как добавить на свой сайт Яндекс карту. Кому может быть полезна данная информация ? В первую очередь, данная информация может быть полезна тем, кто хочет указать на своём сайте, своё местоположение в виде карты, либо местоположение своей компании. Так же, если ваш сайт посвящён туризму, то онлайн карты так же могут быть вам полезны.
Итак, добавлять Яндекс карту на сайт wordpress, мы будем с помощью плагина — Oi Yandex.Maps for WordPress. Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте найденный плагин.
Чтобы попасть на страницу настроек плагина, перейдите по вкладке: Настройки — Яндекс карты.
На странице — Настройки Яндекс карт, можно настроить параметры карт по умолчанию.
— Высота карты, можно указать высоту карты по умолчанию.
— Ширина карты, можно указать ширину карты по умолчанию.
— Масштаб карты, по умолчанию стоит 16, можно указать свой масштаб.
— Стандартная метка, если вы будете указывать на своей карте метку для определённого адреса, то вы можете выбрать для себя метку перейдя по указанной ссылке. Так же, у вас уже будет стоять метка по умолчанию.
— Отображать ссылку на страницу плагина, если поставите галочку, то в углу карты будет отображаться ссылка на сайт автора плагина.
— Информация, здесь можно настроить свой шорткод, для вставки на сайт, по определённым параметрам.
Настроить карту для своего сайта, можно будет прямо из визуального редактора wordpress. При создании записи или страницы, в меню визуального редактора, у вас появится кнопка — Яндекс карта.
Нажав на кнопку — Яндекс карта, у вас появится окно для настройки карты. В настройках можно указать:
— Адрес, укажите здесь адрес, который должен отображаться на карте.
— Координаты, кликните по полю и координаты отобразятся автоматически, но только в том случае, если указан адрес.
— Центр карты, здесь можно ничего не указывать, центром карты будет адрес, который вы указали для карты.
— Заголовок балона, балон — это окно, которое будет появляться при нажатии на метку. Здесь можно указать заголовок балона. Ниже на скриншоте карты будет показан балон.
— Контент балона, здесь можно указать текст, который будет отображаться внутри окна балона.
— Подвал балона, здесь можно указать текст, который будет отображаться внизу окна балона.
— Подсказка метки, здесь можно указать текст, который будет отображаться во всплывающей подсказке, при наведении курсора мыши на метку.
— Высота карты, укажите высоту карты, если не указывать, то высота будет та, которую вы указали в настройках по умолчанию.
— Ширина карты, укажите высоту карты, либо будет значение по умолчанию.
— Масштаб карты, укажите масштаб карты, либо оставьте по умолчанию.
— Заголовок метки, можно указать заголовок для метки.
— Тип метки, тип метки можно поменять в настройках по умолчанию.
— В конце жмём на кнопку — Add shortcode. (создать шорткод)
После того как вы настроите карту в визуальном редакторе и добавите её в запись, у вас появится шорткод, который на сайте преобразуется в готовую карту с вашими настройками.
Ниже на скриншотах, вы можете посмотреть как на карте выглядит метка и балон.
Итак друзья, на этом у меня всё, я надеюсь данная статья помогла вам в решении ваших задач, а я не прощаюсь с вами, до новых встреч !
Как добавить Яндекс карту на любой сайт, без плагина !
wdfiles.ru
Текстовый транскрипт видео:
Здравствуйте, в эфире Дмитрий Татаринов, автор блога http://www.azoogle.ru/!
Для того чтобы создать и добавить Яндекс-карту к себе на сайт, необходимо перейти в конструктор карт Яндекса, ввести необходимый адрес, убедиться, что он правильный, и нажать кнопку «Найти».
После того, как вы определи адрес, вы можете расставить дополнительные опознавательные знаки. Например, точки и подписи. К примеру, если вы хотите сделать, отметить какие-то объекты, то вы можете задать цвет, вставить произвольную подпись, отметить определенный маршрут с помощью рисования линий или при желании отметить отдельные объекты при помощи инструмента «Многоугольник». После того, как вы отметили объект, вы можете также расставить подписи и метки, выбрать различные цвета.
После того, как вы закончили оформление вашей карты, введите название, которое вы хотите использовать для этой карты, и нажмите кнопку «Сохранить и получить код». После этого вы можете выбрать интерактивную или статичную карту. Статичная карта будет отображаться как рисунок, интерактивная карта позволяет увеличивать, менять масштаб, выбирать различную схему отображения. После этого вам будет предоставлен код, который необходимо вставить к себе на сайт.
Если вы хотите вставить Яндекс-карту на WordPress сайт, то здесь есть несколько особенностей, которые надо учитывать.
По умолчанию визуальный редактор WordPress не разрешает использование тегов «скрипт», т.е. не разрешает использования java скрипта напрямую в визуальном редакторе. Т.е. если вы хотите использовать интерактивную карту, то вы можете вставить её в режиме текстового редактора и нажать кнопку «Опубликовать». В данном случае карта отобразится. Но если вы переключитесь на визуальный редактор, то WordPress автоматически уберет запрещенные теги и в следующий раз, когда вы переключитесь на тестовую вкладку, то вы не увидите здесь кода, который вы используете. Поэтому из этой ситуации есть несколько выходов.
Первый – это можно воспользоваться статичной картой. В данном случае карта будет отображаться как рисунок, т.е. вы можете использовать её, вставив её на вкладке текстового редактора. Если вы переключитесь на визуальный, то она будет отображаться как рисунок. Все будет работать, и WordPress не будет убирать код.
Второй — если же вы хотите воспользоваться интерактивной картой и в тоже самое время, чтобы каждый раз не переключаться и не вставлять заново этот код, вы можете воспользоваться плагином «Custom Fields Shortcode».
«Custom Fields Shortcode» позволяет добавить фрагмент кода в пользовательское поле и потом использовать его в любом месте записи. Если по умолчанию у вас панель пользовательских полей не видна, перейдите в «Настройки экрана» и поставьте галочку «Произвольные поля». После этого у вас появится панель «Произвольных полей», где вы можете добавить.
Т.е. если мы сейчас хотим добавить, к примеру, пользовательское поле «Яндекс-карта» и в значении этого пользовательского поля указать, что мы хотим, чтобы при отображении его на сайте включался такой код с картой, т.е. здесь мы можем отредактировать параметры, к примеру, увеличить ширину карты до 640 пикселей при высоте в 450 пиксилей, т.е. если мы сейчас добавим в пользовательском поле Яндекс-карту, то его значение будет непосредственно наша интерактивная карта, т.е. сейчас я добавляю.
Чтобы использовать это значение произвольного поля в редакторе, мне нужно заключить его в шорткод которое выглядит вот так:
[cf][/cf]
, т.е. в custom fields, и внутри написать то поле, которое я хочу использовать. Т.е. в данном случае, если хочу использовать карту «Yandex Map». Т.е. теперь визуальный редактор воспринимает этот код как shortcode, он разрешен и он не будет убирать ваше значение, которое вы туда добавили. Но при отображении, если мы нажмем кнопку «Обновить», на странице будет выводиться значение произвольного поля, что в данном случае будет отображаться как интерактивная карта Яндекс, которую пользователь может точно также использовать, как если бы он находился непосредственно на сайте Яндекс.
Спасибо, что вы посмотрели это видео, мне было приятного его для вас делать. Буду вам благодарен, если вы поделитесь им в социальных сетях. Ставьте палец вверх и подписывайтесь на новые видео. Если у вас возникли вопросы или вам нужна помощь, перейдите по ссылке в описании этого видео и оставьте комментарий, используя форму внизу страницы.
Если у вас возникли проблемы с просмотром – вы можете посмотреть видео «Уроки WordPress Как вставить Яндекс карту на сайт WordPress» на YouTube.
www.azoogle.ru
Нужны ли вам карты
Можно через каждый несколько строчек на своем сайте писать точный адрес заведения и это не даст ровным счетом ничего. Все меньше людей ориентируются по названиям улиц. Основными координатами становятся магазины, парки и т.п.
Что вы представляете, услышав о улице Ленина, которая есть практически в каждом городе? Памятник, близлежащую школу или очередной «Перекресток»? Люди нуждаются в подобных уточнениях, они хотят быть уверены, что точно понимают куда их зовут. Никто не хочет терять время.
Поставив на сайте карту города и отметив там точку, вы получите значительно больше клиентов, нежели сто раз упомянете точный адрес. Те, кто действительно заинтересуется вашим предложением будут уверены, что верно поняли где находится компания и как туда пройти. Это дает +100 к вероятности, что читатель действительно посетит вашу фирму.
Добавление вручную: простота или лишние проблемы
Если говорить о самом конструкторе, то он невероятно прост. Найти его можно, пройдя по ссылке в сервис Яндекс Карты. Чтобы добавить свою метку, вам необходимо зайти на этот сайт под своим аккаунтом. Речь идет всего лишь о пароле и логине на почте Яндекса.
Вводите в поисковую строку адрес, на который будет указывать метка, нажимаете «Найти» и она сразу появляется на карте.
Можно выбрать свой цвет и тип метки.
В центр без труда устанавливается иконка. Осталось только добавить свое описание, если это необходимо и нажать «Готово».
После этого вы можете вводить и другие адреса. Снова нажимать «найти» и метки будут добавляться на эту карту. Нажав на них вы можете перемещаться между метками и удалять их.
Описание можно ввести и в названии самой карты. Осталось только «Сохранить и продолжить».
Выбираете как будет выглядеть ваша карта: сможет ли читатель увеличивать или уменьшать масштаб (интерактивная карта), просто посмотрит где расположены заведения, без дополнительных возможностей (статическая) или вы просто хотите сохранить фотографию вашей карты, чтобы добавить ее на Яндекс Диск, вставить в запись без использования кода (печатная).
Теперь выберите размер, который идеально подойдет, чтобы вставить карту в ваш блог.
Осталось только получить html код. Скопируйте его.
Вы можете создать отдельную страницу с адресами или вставить его в текст статьи. Зайдите в админ панель ВордПресс. Затем откройте редактор публикаций и выберите текстовую версию.
Вставляете полученный код и вуа-ля. Карта добавлена.
Раньше, у вас была возможность проложить маршрут, но теперь читатель может самостоятельно это сделать. Посмотрите на кнопку в левом верхнем углу. Я считаю, что это правильно. Люди должны быть самостоятельнее.
Единственный недостаток, это то, что если вы пользуетесь этим способом, то кликнув по карте, если человек захочет открыть скрипт через сам сервис, то он увидит имя владельца. Советую просто зарегистрировать почту под именем продвигаемого заведения.
Хотя, откровенно говоря, думаю, что нажмут сюда не многие. Так что можно не беспокоиться.
Дополнительные возможности
Я искренне считаю дополнительные возможности лишними. Не нагружайте фото деталями, чтобы человек сам мог разобраться. Не предлагайте ему все и сразу. За обилием сведений он не увидит главного.
И тем не менее, рассказать о них я должен. Иногда эти инструменты могут быть необходимы. Ума не приложу, что это может быть за ситуация – захват Пруссии, война с норманнами… не представляю. Если у вас есть идеи — пишите в комментариях к этой статье.
Линии, благодаря которым можно рисовать вот такие забавные фигуры.
Кликнув на точку вы откроете дополнительное меню. Можно поменять цвет, толщину линии, ее прозрачность и добавить описание.
Сразу вспоминаются фильмы из серии «Код да Винчи». Может благодаря этой штуке вы тоже найдете особые тайные символы и знаки, задуманные архитекторами и правителями при постройке вашего города.
Многоугольники чем-то напоминают линии, но позволяют заполнить определенную территорию цветом.
Нажав на любую точку, вы можете выбрать один из пунктов: удалить эту ерунду, завершить рисование или добавить внутренний контур.
Ну и пробки. Изначально идея добавить такую карту кажется очень классной. Но на деле… не все поедут к вам на машине, а долго смотреть на такую новогоднюю елку из карты мало кто захочет. Сейчас в дизайне главенствует минимализм.
Ну вот и все. Теперь давайте поговорим о плагинах. Не уверен, что они вам нужны, ведь вы не будете использовать карты на каждой странице и добавлять новые каждый день. Конечно, если вы не планируете создать исторический сайт о самых популярных сражениях или делать обзоры достопримечательностей или ресторанов по всему миру.
Хотя и в этом случае не вижу смысла нагружать сайт лишними приложениями. Если есть возможность, то лучше обойтись без них.
Однако, возможно у вас другое мнение, так что пару слов о плагинах.
start-luck.ru
Особенность карт на WordPress
При установке на WordPress учтите одну небольшую особенность. Визуальный редактор вордпресс не разрешает использовать тега скрипт в визуальном редакторе.
Если захотите установить интерактивную карту, ее сначала поместите в запись в режиме текстового редактора. При таком варианте карта нормально отобразится.
Теперь после переключения в визуальный редактор, движок сам уберет все теги. Следующий раз при переключении в текстовый режим кода не будет.
Решение в данной ситуации имеется. Можно использовать статичную карту. При переключении в визуальный режим вордпресс будет отображать ее как рисунок и не будет убирать код.
Если надо использовать интерактивную карту, и иметь возможность переключаться, не вставляя заново код, можно воспользоваться специальным плагином fields shortcode.
При помощи данного плагина можно поместить фрагмент кода в пользовательском поле. После этого его можно добавлять в любое место записи.
Хочу еще отметить, что существует еще один способ. Это использование api карт от Яндекса. Данный способ требует определенных умений программирования.
Самое главное, что такой способ предлагает более расширенный варианты настройки карты.
Итак, используя данные методы, можно поместить Яндекс.Карту, на интернет – проект, который работает на WordPress.
В первую очередь такую карту полезно установить на таких площадках, которые занимаются коммерческой деятельностью, или осуществляют продажи товаров (интернет — магазины).
Также это может быть любой блог, в котором необходим непосредственный контакт с посетителями.
seoslim.ru
Создание и настройка яндекс карты
Для начала нам нужно создать карту расположения объекта на Яндекс.Картах. Для этого необходимо:
- 1.Перейти на страницу сервиса. Это можно сделать двумя путями:
- Открыть страницу поиска Яндекс, и кликнуть по ссылке «Карты», которая находится над строкой поиска.
- Ввести в адресной строке браузера адрес сервиса: maps.yandex.ru.
- 2.На стартовой странице сайта кликаем на ссылку «Создать карту».
- 3.После чего, перед нами откроется «Конструктор карт». Где необходимо войти в учетную запись в Яндексе, и вам станет доступно создание новой карты.
- 4.В открывшемся окне нам необходимо найти местоположение нашего офиса. Это можно сделать при помощи поиска или вручную.
- 5.Далее, при помощи инструментов, наносим на яндекс карту точное местоположение офиса и схему проезда к нему, что бы вашим клиентам можно было легче сориентироваться.
Для нанесения графических обозначений нам доступны следующие инструменты:- Метки – предназначены для указания конкретного местоположения объекта.
- Линии – используются для нанесения схемы проезда к объекту.
- Многоугольник – позволяет обозначить территорию, прилегающую к объекту.
- 6.Когда вы задали свое местоположение и нанесли схему проезда к нему, задайте название и краткое описание к создаваемой карте. Нажимаем кнопку «Сохранить и продолжить».
- 7.Далее, выбираем тип карты. Доступны три варианта:
- Интерактивная – данный тип позволяет пользователю перемещаться по карте масштабировать ее, что бы подробнее рассмотреть маршрут и местоположение.
- Статическая – на выходе вы получите статическую картинку, заданного размера, в формате .png. Никаких действий с картой осуществлять нельзя.
- Печатная – похожа на статическую карту, с отличием в том, что изображение будет опубликовано в высоком разрешении и пользователь сможет ее распечатать.
- 8.Далее, вам необходимо задать размер карты, который будет соответствовать выделенному под нее области на странице вашего сайта WordPress. Это можно сделать в ручную, путем перетягивания уголков выделенной области на карте, либо задать ширину и высоту в соответствующих полях.
- 9.Нажимаем «Получить код карты» и в открывшемся окошке мы видим тот самый с генерированный код, который нам нужно скопировать.
Вставка кода яндекс карты на сайт WordPress
Теперь, полученный код скрипта яндекс карты, нужно вставить в код страницы на вашем сайте WordPress. Для этого делаем следующее:
- 1.Переходим в административную часть нашего WordPress сайта и открываем нужную нам страницу, на который мы хотим разместить карту.
- 2.Обязательно, переходим на вкладку «Текст» и вставляем код яндекс карты
- 3.Жмем кнопку «Обновить», после чего, можно перейти на страницу и посмотреть, что у нас получилось.
Так же, вы можете разместить карту в шаблон страницы сайта, или если вам это понадобиться, в сайдбар. В этом случае, яндекс карта будет доступна на всех страницах сайта WordPress.
Как видите вставить яндекс карту на сайт WordPress очень просто, и вряд ли это займет у вас много времени. Но, если у вас появятся какие-то проблемы с созданием и вставкой карты, вы всегда можете задать мне вопрос в комментария.
На этом у меня сегодня все. Надеюсь, данная статья будет для вас полезна. Пишите комментарии, подписывайтесь на мой канал на YouTube и на мою рассылку.
До новых встреч в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
От автора: приветствую вас, друзья! В этой небольшой статье мы с вами узнаем, как вставить Яндекс карту на сайт WordPress. Вопрос добавления карты на любой сайт довольно популярен среди пользователей, что не удивительно. Ведь практически на любом сайте есть страница контактов и, если имеется физический адрес, скажем магазина или студии, тогда его проще и лучше продемонстрировать в понятной для посетителя форме — на Яндекс карте.
Итак, для добавления карты на сайт ее сначала нужно создать. Сделать это можно, воспользовавшись конструктором сайт от сервиса Яндекс. Доступен этот сервис по следующему адресу — https://tech.yandex.ru/maps/tools/constructor/.
Как видим, нам предлагают выбрать уже готовую карту либо же создать новую. Обратите внимание, для создания карты, впрочем, как и для работы с другими сервисами от Яндекс, вам необходима учетная запись на Яндксе. Если у вас ее нет или вы не авторизованы, тогда Яндекс предложит вам создать свою учетную запись или авторизоваться в уже имеющейся. Итак, нажимаем кнопку Создать новую карту и, скорее всего, вы увидите карту того города, в котором находитесь.
Если это будет не ваш город или вам просто нужен другой город, тогда мы его сможем изменить далее при поиске необходимого адреса или объекта на карте.
В качестве примера давайте создадим карту, на которой будет главная улица Киева — Крещатик. Для этого воспользуемся поисковой строкой вверху карты и наберем интересующий нас адрес.
В результате будет найдена искомая улица или точный адрес, если вы его вводили. Далее можно воспользоваться набором кнопок под строкой поиска, в частности кнопкой Метки, которая позволяет установить метку на нужный объект карты.
Для метки можно задать текст (описание), установить ее цвет и тип. После этого нажимаем кнопку Готово. После этого в левой части страницы найдем кнопку Сохранить карту и получить ссылку и нажмем ее.
После сохранения мы увидим предпросмотр карты, где можно настроить ее размер простым перетаскиванием ползунков по бокам карты.
Изменяя размер Яндекс карты, в левой части страницы мы сразу же будем видеть параметры ее ширины и высоты и это очень удобно. После завершения изменений жмем кнопку Получить код карты.
После нажатия кнопки в тултипе увидим готовый код карты, который остается вставить на нужную страницу WordPress.
У меня уже есть страница контактов на сайте WordPress, на эту страницу я и вставлю скопированный код. Обратите внимание, это код HTML, подключающий скрипт, поэтому данный код обязательно нужно вставлять на страницу не в визуальном режиме а в режиме Текст.
Сохраним страницу и посмотрим изменения в пользовательской части сайта WordPress. Как видим, Яндекс карта успешно появилась на сайте WordPress.
Все крайне просто и весь процесс занял буквально считанные минуты. Что очень удобно, так это то, что мы можем при желании Яндекс карту разместить на любой странице сайта WordPress и даже в любой части сайта. Например, мы вполне можем сформировать миниатюрную карту и вставить ее в сайдбар. Для этого достаточно использовать виджет Текст, который позволяет вставлять код HTML. Ну а у меня на этом все. Удачи!
webformyself.com