Вставка карти на сайт WordPress може бути корисною для бізнесу, який хоче показати своє місцезнаходження, або для будь-якого іншого веб-ресурсу, який потребує інтерактивної карти. У цій статті ми розглянемо кілька способів, як можна вставити карту на сайт WordPress.
Google Maps – це один із найпопулярніших способів вставити карту на сайт WordPress. Цей метод простий і не вимагає встановлення додаткових плагінів. Ось детальна покрокова інструкція, як це зробити.
Створення карти в Google Maps
Спочатку потрібно створити карту, яку ви будете вставляти на свій сайт. Відкрийте веб-браузер і перейдіть на сайт Google Maps. У рядку пошуку введіть адресу або назву місця, яке ви хочете відобразити на карті, і натисніть Enter. Після того, як карта буде відображена з потрібним місцем, зверніть увагу на значок меню (три горизонтальні лінії) у верхньому лівому кутку екрана. Натисніть на нього, щоб відкрити додаткові параметри.
У меню, що з’явилося, знайдіть та натисніть кнопку «Поділитися». У вікні, що з’явиться, виберіть вкладку «Вставити карту». Після цього ви побачите HTML-код, який можна вставити на ваш сайт. Скопіюйте цей код.
Вставка карти в WordPress
Тепер, коли ви маєте HTML-код, вам потрібно вставити його на ваш сайт WordPress. Спочатку увійдіть у свою адмін-панель WordPress. Знайдіть у меню ліворуч розділ «Сторінки» або «Записи» залежно від того, куди ви хочете додати карту. Виберіть сторінку або запис, на яку ви хочете вставити карту, і натисніть на її назву, щоб відкрити редактор.
У редакторі WordPress перейдіть у режим «Текст» або «HTML» (залежно від вашої версії WordPress редактор може мати різні назви). У режимі «Текст» ви можете вставляти та редагувати HTML-код безпосередньо. Знайдіть місце у вашому тексті, де ви хочете вставити карту, і вставте туди скопійований HTML-код.
Після вставки HTML-коду поверніться у режим «Візуальний» або залишіться в режимі «Текст», щоб перевірити, як виглядатиме карта на вашій сторінці. Якщо все виглядає правильно, натисніть кнопку «Оновити» або «Опублікувати», щоб зберегти зміни на вашій сторінці або в записі. Тепер ваша карта Google Maps повинна бути відображена на вашому сайті WordPress.
Використання плагінів
Існує безліч плагінів для вставки карт на сайт WordPress, що дозволяють легко і швидко додати інтерактивну карту на ваш сайт. Розглянемо два популярні плагіни – WP Google Maps і Google Maps Widget.
WP Google Maps
Перший крок – це встановлення та активація плагіна WP Google Maps. Увійдіть у адмін-панель WordPress, перейдіть до меню «Плагіни» і натисніть кнопку «Додати новий». У пошуковому полі введіть «WP Google Maps» і натисніть Enter. Знайдіть потрібний плагін у результатах пошуку та натисніть кнопку «Встановити». Після завершення встановлення натисніть «Активувати».
Після активації плагіна перейдіть до його налаштувань, щоб створити нову карту. У меню адмін-панелі з’явиться новий розділ «Maps» або «Карта». Натисніть на нього, щоб перейти до налаштувань плагіна. Натисніть кнопку «Додати нову карту», щоб розпочати створення.
На сторінці створення карти введіть необхідні параметри: назву карти, розміри, центр карти (адресу або координати) та інші налаштування. Після заповнення всіх полів натисніть кнопку «Зберегти карту». Плагін згенерує короткий код (shortcode), який потрібно скопіювати.
Щоб вставити карту на сторінку або в запис, перейдіть до розділу «Сторінки» або «Записи» в адмін-панелі. Виберіть потрібну сторінку або запис і відкрийте його для редагування. Вставте скопійований короткий код у потрібне місце тексту. Збережіть зміни і опублікуйте сторінку або запис. Тепер ваша карта буде відображатися на сайті.
Google Maps Widget
Другий варіант – це використання плагіна Google Maps Widget. Спочатку потрібно встановити та активувати плагін. Увійдіть у адмін-панель WordPress, перейдіть до меню «Плагіни» і натисніть кнопку «Додати новий». У пошуковому полі введіть «Google Maps Widget» і натисніть Enter. Знайдіть потрібний плагін у результатах пошуку та натисніть кнопку «Встановити». Після завершення встановлення натисніть «Активувати».
Після активації плагіна перейдіть до розділу «Віджети» у вашій адмін-панелі WordPress. Ви побачите новий віджет Google Maps, який можна додати до будь-якої області вашого сайту, наприклад, до бокової панелі. Перетягніть віджет Google Maps до потрібної області.
Віджет Google Maps відкриється для налаштувань. Введіть необхідні дані для карти, такі як назва, адреса або координати, розміри віджета та інші параметри. Після заповнення всіх полів натисніть кнопку «Зберегти». Ваша карта буде відображатися в обраній області сайту.
Використання плагінів для вставки карт на сайт WordPress значно спрощує цей процес і дозволяє налаштовувати карти відповідно до ваших потреб. Обидва розглянуті плагіни пропонують широкий спектр налаштувань і можливостей для створення інтерактивних карт.
Використання вбудованих блоків
WordPress є потужною платформою для створення веб-сайтів, яка постійно вдосконалюється та надає користувачам нові інструменти для зручного управління контентом. Одним із таких інструментів є редактор Gutenberg, який дозволяє легко і швидко додавати різноманітні елементи на ваші сторінки та записи. Однією з корисних можливостей Gutenberg є вставка карт без необхідності використання додаткових плагінів. Завдяки вбудованим блокам, ви можете вставляти карти безпосередньо у редакторі, налаштовуючи їх відповідно до своїх потреб. У цьому розділі ми розглянемо, як скористатися цією функцією для додавання карт на ваш сайт WordPress.
Блок «Карта» в Gutenberg:
⭐Відкрийте сторінку або запис у редакторі Gutenberg.
⭐Натисніть на кнопку «Додати блок» і виберіть блок «Карта».
⭐Введіть потрібну адресу або координати, щоб карта з’явилася на сторінці.
⭐Налаштуйте вигляд і розміри карти за допомогою опцій блоку.
Вставка карти на сайт WordPress є досить простою задачею, яка може бути виконана кількома способами. Ви можете скористатися інтеграцією Google Maps, встановити спеціальні плагіни або використати вбудовані блоки у редакторі Gutenberg. Вибір способу залежить від ваших потреб та рівня технічних навичок. Використання карт допоможе вашим користувачам легко знайти вас і покращить зручність користування вашим сайтом.
Поділитися в соціальних мережах: