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

Текстовый транскрипт видео:

Здравствуйте, в эфире Дмитрий Татаринов, автор блога https://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.

11 мыслей о “Как вставить Яндекс карту на сайт WordPress

  1. Татьяна сказал:

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

    Yandex Map

    . Если не трудно,помогите!Заранее спасибо

    • Дмитрий сказал:

      ОК, Татьяна т.е вы создали пользовательское поле «YandexMap», в него поместили код для динамической версии карты и потом в визуальном редакторе вставили такой шорткод «

      YandexMap

      «, но у вас ничего не показывается, правильно?

      • Татьяна сказал:

        Да,всё верно. Там код картинки остается, и при добавлении шорткода ничего не меняется,картинка остается прежней(не двигается) и

        YandexMap

        является просто записью.

        • Дмитрий сказал:

          ОК, если вам это подходит — пошлите мне админские креды доступа к сайту и страницу на которой вам нужна карта (адрес и url страницы) через страницу «контакты» (не вставляйте их в здесь в комментарии) и я посмотрю в чем может быть проблема.

        • Дмитрий сказал:

          Может и такое быть, можно установить плагин MyShortcodes http://wordpress.org/plugins/my-shortcodes/ и создать шорткод котрый будет содержать код для динамической карты Яндекса.

  2. Федот сказал:

    Зачем так усложнять жизнь, при использовании WordPress, если можно воспользоваться плагином для вставки карт — https://wordpress.org/plugins/oi-yamaps/ который даже не требует ввода ключа Яндекс API.

  3. Людмила сказал:

    Добрый день! А подскажите пожалуйста ответ на такой вопрос: делаю сайт на WP — интегрирую собственную верстку в шаблон. Ну не суть… Дело в том, что надо сделать так, чтобы на всех страницах была Карта. Соответственно разместила ее в отдельном файле footer.php. НО! тут такая ситуация — на странице контакты мне она не нужна… У меня там своя, маленькая.. А как теперь «прогнать» карту футеровскую с этой страницы…

    Подскажите пожалуйста! Заранее очень благодарна.

    • Дмитрий сказал:

      Как вариант можно разместить код карты в виджете и включить его только для нужных типов записей или контролировать на каких страницах появляется виджет с картой с помощью плагина типа https://ru.wordpress.org/plugins/conditional-widgets/

Добавить комментарий