Добавление виджета на сайт WordPress

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

В этой инструкции мы подготовим виджет в MapFolio, добавим его в код страницы, настроим ширину и отступы, а затем проверим отображение.

Откройте личный кабинет MapFolio и перейдите в раздел «Виджеты». Нажмите на карточку со знаком «+», чтобы перейти к созданию нового виджета.

Если подходящий виджет уже создан, откройте его настройки и перейдите к копированию кода установки.

На странице создания выберите способ установки «Встроенный блок». При таком размещении карта занимает выбранное место на странице и отображается вместе с остальным содержимым сайта.

Укажите понятное название, например «Карта объектов на сайте», или оставьте предложенное. Название помогает отличать виджеты в личном кабинете.

Нажмите «Подтвердить выбор», чтобы перейти к дальнейшей настройке.

Откройте раздел «Код для установки» и нажмите кнопку копирования справа от кода.

Скопируйте код целиком. В нём уже указан ваш виджет и подключён необходимый скрипт. Изменять идентификатор или другие части скопированного кода не требуется.

Если код ещё не появился, сначала сохраните созданный виджет.

Войдите в административную панель WordPress и откройте страницу, на которой планируете разместить карту. Можно использовать существующую страницу или создать новую.

В нашем примере открыта страница «Карта» с пустым полем содержимого. Если на вашей странице уже есть текст, изображения или другие элементы, выберите место, где должен появиться виджет.

На скриншоте используется классический редактор в режиме работы с HTML. Если в вашем редакторе доступны вкладки «Визуально» и «Текст», переключитесь на «Текст» перед вставкой кода. Подробнее о режимах классического редактора WordPress.

Вставьте полный код установки, скопированный из Mapfolio, в выбранное место страницы.

В нашем примере виджет занимает всё содержимое страницы, поэтому код добавлен в пустое поле редактора. Если на странице уже есть другие материалы, сохраните их и вставьте код между нужными элементами.

Нажмите «Обновить», чтобы сохранить изменения на существующей странице. Для новой страницы используйте кнопку «Опубликовать», когда она будет готова к размещению на сайте.

После сохранения откройте страницу на самом сайте. Проверять внешний вид и работу карты удобнее на опубликованной странице, где применяются стили вашей темы WordPress.

Откройте страницу с установленным виджетом и обновите её. Проверьте, что появились объекты, загрузилась карта и открываются карточки.

Также оцените расположение блока: насколько он широкий, какие отступы остаются по краям и удобно ли просматривать карту при текущей высоте.

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

Если размеры и отступы вас устраивают, дополнительная настройка ширины не требуется. Далее рассмотрим, как изменить их при необходимости.

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

Например, на странице с боковой колонкой для карты может оставаться меньше места, чем на странице без неё. Если виджет выглядит слишком узким, сначала проверьте выбранный шаблон и доступные настройки области содержимого.

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

Контейнер — это дополнительный HTML-элемент, внутри которого будет находиться код Mapfolio. Он позволяет управлять расположением блока на странице через CSS.

Оберните полный код установки в элемент с классом mapfolio-site-container, как показано ниже.

Вместо комментария разместите обе части кода, скопированного из личного кабинета: элемент виджета и подключение скрипта.

Сам по себе контейнер не задаёт новую ширину или отступы. Для этого необходимо добавить стили.

В приведённом примере контейнер занимает всю доступную ширину родительского блока и получает внутренние отступы по 10 пикселей с каждой стороны.

При ширине окна от 1300 пикселей включается ограничение максимальной ширины контейнера — 1440 пикселей. Если вокруг него остаётся свободное место, контейнер располагается по центру.

Добавьте следующий блок стилей перед контейнером.

Значения можно изменить под оформление вашего сайта:

• width: 100% — контейнер занимает доступную ширину внутри блока темы.
• max-width: 1440px — ограничивает максимальную ширину контейнера на больших экранах.
• padding-inline: 10px — добавляет внутренние отступы слева и справа.
• margin-inline: auto — центрирует контейнер, когда он уже родительского блока.
• box-sizing: border-box — включает внутренние отступы в заданную ширину.

Если тема уже добавляет достаточно пространства по краям, уменьшите padding-inline или установите 0, чтобы дополнительные отступы не сужали карту.

После добавления контейнера и стилей структура будет выглядеть следующим образом.

Внутри контейнера используйте актуальный код из личного кабинета Mapfolio. Значение ВАШ_ID_ВИДЖЕТА в примере необходимо заменить идентификатором из вашего кода установки; проще всего скопировать обе внутренние строки целиком из личного кабинета.

Замените ранее вставленный код виджета этим вариантом с контейнером, сохранив данные своего виджета. Не добавляйте второй экземпляр рядом с первым.

Нажмите «Обновить» в WordPress, затем откройте страницу сайта и проверьте результат.

Значение width: 100% означает всю доступную ширину родительского блока, а не всю ширину окна браузера.

Например, если тема выделяет для содержимого страницы только 900 пикселей, контейнер внутри этой области не станет шире после установки max-width: 1440px.

Чтобы увеличить доступное пространство, проверьте настройки темы и шаблона страницы. Если предусмотрено оформлением сайта, выберите шаблон без боковой колонки или измените ширину области содержимого. Названия и расположение этих настроек зависят от вашей темы.

Контейнер или тема уже задают ширину и отступы. Высоту карты настроим в личном кабинете MapFolio.

Откройте установленный виджет, перейдите на вкладку «Параметры» и прокрутите страницу до раздела «Десктопные устройства».

В поле «Высота» введите 70vh. Это примерно 70% высоты окна браузера.

Так карта станет компактнее по вертикали, сохранив пространство для просмотра объектов. Нажмите «Сохранить» в MapFolio и обновите страницу сайта.

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

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