Донецкий техникум промышленной автоматики

Як додати Google карти в WordPress (3 способи)

  1. Чому потрібно додати Google карти в WordPress
  2. Як додати Google карти в WordPress (3 способи)
  3. 1. Встановіть плагін Google Maps для WordPress.
  4. 2. Використовуйте функцію Embed Google Map
  5. 3. Додати Google карти в WordPress Theme
  6. висновок

Одна з основних функцій бізнес-сайту - дати можливість вашим потенційним клієнтам швидше знаходити вас. Якщо у вас є фізичне місце розташування, вам потрібно переконатися, що ви надаєте відвідувачам всю необхідну їм інформацію про ваше місцезнаходження. У більшості випадків додати Google карти в WordPress набагато краще, ніж просто вказати вашу адресу.

На щастя, WordPress дозволяє додати карту на свій сайт декількома способами. У цій статті ми поговоримо про те, як це зробити, використовуючи:

  1. плагін Google Maps WordPress.
  2. Вбудовану функцію Google Maps.
  3. Тему WordPress.

У нас є багато інформації про те, як додати Google карту в WordPress, так що знаходите швидше своє місце розташування на карті і давайте починати!

Чому потрібно додати Google карти в WordPress

Чому потрібно додати Google карти в WordPress

Карти Google є точними і інтерактивними.

Додавання карти на ваш сайт є набагато кращим варіантом, ніж просте відображення адреси. За допомогою карти люди можуть швидко зрозуміти, на якій вулиці ви знаходитесь, що знаходиться поблизу, і як знайти вас.

Вирішити, який тип карти додати, трохи складніше. Деякі люди просто додають скріншоти з онлайн-джерел. Проте, це простіша альтернатива, коли у вас є така опція, як додавання інтерактивної Google карти , Яку можна використовувати безкоштовно.

Ось кілька причин щоб додати Google карти в WordPress, і поліпшити ваш сайт:

  • Вони інтерактивні, тому відвідувачі можуть переміщувати карту, поки не дізнаються, де ви знаходитесь.
  • Карти Google можна використовувати для виділення будь-якого місця або навіть декількох місць розташування.
  • Відвідувачі можуть перемикатися між видами карти і вулиць, що дозволяє їм бачити, як виглядає ваше місце розташування зовні, не виходячи з дому.
  • Користувачі можуть швидко відправляти карти на свої телефони, де вони можуть отримати інструкції про те, як пройти до вашого місця перебування.

Звичайно, є інші онлайн-карти (Англ), крім Google Maps. Проте, Google - це загальновідоме назва. Тому більшість людей, які відвідують ваш сайт, швидше за все, будуть використовувати для пошуку Google Maps і будуть довіряти його надійності.

Погана новина полягає в тому, що WordPress не містить вбудованих функцій для додавання Google карт на ваш сайт в базовій версії. Однак це те, що ви можете легко виправити, використовуючи плагіни, теми або навіть вбудовані функції Google Maps.

Як додати Google карти в WordPress (3 способи)

По крайней мере, варто спробувати додати Google карти в WordPress на ваш сайт. Ми пропонуємо вашій увазі три способи, якими можна це зробити. Ми почнемо з плагінів, перейдемо до додавання карт вручну і розглянемо теми. Давайте починати!

1. Встановіть плагін Google Maps для WordPress.

Карти Google - популярна функція серед веб-сайтів, так що не дивно, що стільки плагінів Google Maps доступні в WordPress.

Наприклад, за допомогою WP Google Maps (Англ) ви можете додавати карти на свої сторінки за допомогою коротких кодів. Крім того, цей плагін також надає вам варіанти настройки маркерів карти, вибір з кількох тем для ваших карт і багато іншого:

Крім того, цей плагін також надає вам варіанти настройки маркерів карти, вибір з кількох тем для ваших карт і багато іншого:

На нашу думку, WordPress Google Maps є одним з найкращих варіантів, оскільки він також підтримує розширені функції, такі як сумісність з декількома плагінами кешування (Англ) та Мережами Доставки Вмісту (CDN) .

Однак є й інші плагіни, які ви можете використовувати. WD Google Maps (Англ) - це надійний варіант. Цей плагін підтримує кілька маркерів, надає мобільні карти і пропонує декілька режимів:

Коли ви додаєте нову карту за допомогою WD Google Maps, плагін направляє вас по цьому процесу за допомогою інтуїтивно зрозумілого конструктора, який включає в себе вбудовані функції попереднього перегляду.

нарешті, Google Maps Widget (Англ) також є одним з кращих плагінів Google Maps. Цей плагін дуже простий в налаштуванні. Він дозволяє вам додавати карти-мініатюри на бічну панель WordPress (або кінцеві рядки), які відвідувачі можуть розгорнути клацнувши по ним мишкою:

Він дозволяє вам додавати карти-мініатюри на бічну панель WordPress (або кінцеві рядки), які відвідувачі можуть розгорнути клацнувши по ним мишкою:

Це корисний інструмент, якщо вам не вистачає місця на вашому веб-сайті, так як ваша карта може вписуватися в віджети практично в будь-якому місці.

Проте, для бізнес-сайтів ми рекомендуємо повнорозмірні карти, оскільки їх складніше ігнорувати. Маючи це на увазі, давайте поговоримо про те, як використовувати плагін WP Google Maps.

Спочатку перейдіть на панель інструментів WordPress і перейдіть у вкладку Модулі> Додати нову. Використовуйте панель пошуку, щоб знайти плагін WP Google Maps. Коли ви побачите, що він з'являється серед результатів, натисніть кнопку Встановити зараз прямо поруч з ним:

Коли ви побачите, що він з'являється серед результатів, натисніть кнопку Встановити зараз прямо поруч з ним:

Активуйте плагін, і нова вкладка Карти з'явиться на панелі управління. Якщо ви натиснете на неї, в плагін з'явиться коротка вступна сторінка. Тим не менш, ви можете натиснути кнопку Пропустити введення і створити карту, щоб перейти безпосередньо до створення карти:

Тим не менш, ви можете натиснути кнопку Пропустити введення і створити карту, щоб перейти безпосередньо до створення карти:

На наступній сторінці плагін повідомить вам, що для роботи необхідний ключ API Google (Англ). Отримайте свій ключ, натиснувши на посилання Створити ключ API:

Отримайте свій ключ, натиснувши на посилання Створити ключ API:

Google попросить вас погодитися з умовами, перш ніж ви зможете створити додаток і отримати ключ API. Як тільки ви погодитеся, Google створить для вас новий проект, і ви відразу ж зможете згенерувати ключ API:

Як тільки ви погодитеся, Google створить для вас новий проект, і ви відразу ж зможете згенерувати ключ API:

Ми приховуємо ключ API тут, так як ви ніколи не повинні ділитися своїми ключами з іншими людьми. Зрештою, це пов'язано з вашим обліковим записом, і ви не хочете, щоб інші зловживали нею. У будь-якому випадку ваш ключ API буде довгою комбінацією букв і цифр. Після цього поверніться на свою панель інструментів і вставте його у відповідний рядок:

Після цього поверніться на свою панель інструментів і вставте його у відповідний рядок:

Ви повинні побачити повідомлення про успішне завершення, і після цього ви можете працювати над своєю першою картою:

Ви повинні побачити повідомлення про успішне завершення, і після цього ви можете працювати над своєю першою картою:

Як ви можете бачити вище, плагін дозволяє вам налаштувати тестову карту для вас, яку ви можете редагувати і використовувати на своєму веб-сайті. Для цього натисніть кнопку Змінити під назвою карти. Тепер плагін попросить вас вибрати, яку платформа повинна використовувати ваша карта. Виберіть варіант Карти Google:

Виберіть варіант Карти Google:

Перше, що вам потрібно зробити, це встановити назву для вашої карти. Потім ви можете змінити його ширину і висоту. Ширина за замовчуванням 100% автоматично створить карту, яка масштабується з дозволом вашого сайту, так що це майже завжди кращий варіант:

Ширина за замовчуванням 100% автоматично створить карту, яка масштабується з дозволом вашого сайту, так що це майже завжди кращий варіант:

Ви також побачите можливість змінити початковий рівень масштабування вашої карти і вирішити, який тип макета він повинен відображати. Наприклад, ви можете використовувати класичні дорожні карти або карти місцевості. У більшості випадків перший варіант є кращим варіантом, оскільки він найбільш зручний для ваших відвідувачів.

Потім перейдіть до розділу Маркери. Тут ви можете вказати, яке місце розташування ви хочете відобразити на карті, набравши його координати GPS. Ви також можете переміщатися по карті справа і клацнути правою кнопкою миші по будь-якого місця, яке ви хочете відзначити:

Під настройками вашого маркера Адреса / GPS є також варіанти додавання простих анімацій на карту. Наприклад, ви можете додати невеликий відскік на свій маркер, коли карта завантажується, що може бути приємним доповненням. Ви також можете налаштувати свою карту Google для відображення спливаючого вікна поруч з вашим маркером, в якому буде викладено його повну адресу.

Коли ви будете готові, натисніть кнопку Зберегти маркер, і сторінка перезавантажиться. Потім натисніть кнопку Зберегти карту в середині екрану, і плагін збереже всі ваші зміни.

Ви можете вставляти створені вами плагіни WordPress Google Maps, вставляючи їх короткі коди (Англ) в будь-якому місці вашого сайту. Ви можете знайти ці короткі коди на вкладці Карти на панелі управління праворуч від кожного запису:

От і все! Ви тільки що додали свою першу карту Google в WordPress. За допомогою цього плагіна (і інших подібних до нього) ви можете створити стільки карт, скільки захочете.

2. Використовуйте функцію Embed Google Map

Якщо ви не хочете використовувати плагін для створення WordPress Google Maps, ви можете зробити це вручну. Існують вбудовані функції, які ви можете використовувати для того, щоб додати Google карти в WordPress. Однак набагато більш простий підхід - використовувати службу, яка дозволяє вам генерувати коди для Google Maps на льоту.

Embed Google Map (Англ) - відмінний приклад. Він дозволяє переглядати адреси з використанням інтерфейсу Google Maps за замовчуванням і налаштовувати розмір і масштаб, який ви хочете використовувати в своїх картах:

Він дозволяє переглядати адреси з використанням інтерфейсу Google Maps за замовчуванням і налаштовувати розмір і масштаб, який ви хочете використовувати в своїх картах:

Після того, як ви виконали цю невелику налаштування, ви можете натиснути кнопку Отримати HTML-код, і сайт буде генерувати фрагмент коду HTML, який ви можете додати на свій сайт.

Після того, як ви виконали цю невелику налаштування, ви можете натиснути кнопку Отримати HTML-код, і сайт буде генерувати фрагмент коду HTML, який ви можете додати на свій сайт

Перейдіть і скопіюйте цей код, потім поверніться на панель інструментів WordPress. Потім відкрийте редактор для будь-якої сторінки, на яку ви хочете додати свою карту Google. Виберіть вкладку Текст, яка підтримує HTML-код:

Виберіть вкладку Текст, яка підтримує HTML-код:

Вставте код, де б ви не хотіли, щоб ваша карта відображалася на сторінці. Потім збережіть зміни і погляньте на свою сторінку на передній панелі:

Потім збережіть зміни і погляньте на свою сторінку на передній панелі:

Недоліком цього підходу є створення нових кодів для кожної карти, яку ви хочете додати на свій сайт. З позитивного боку, як тільки ви додасте карту через HTML, ви зможете побачити її у вкладці Visual:

З позитивного боку, як тільки ви додасте карту через HTML, ви зможете побачити її у вкладці Visual:

Це дозволить вам продовжувати працювати на ваших сторінках без необхідності робити все за допомогою Текстового редактора.

3. Додати Google карти в WordPress Theme

WordPress Google Maps настільки популярний, що є навіть деякі теми, які дозволяють вам додавати їх на свій сайт за допомогою вбудованих функцій. Це означає, що, вибравши правильну тему вам не потрібно буде використовувати плагін або додавати HTML-код на свій сайт.

Однак пошук теми, що підтримує цю функцію, може зажадати трохи часу. У більшості випадків тільки преміальні теми будуть включати цей варіант, так що цей підхід може зажадати від вас деяких розтрат. Однак, якщо ви купуєте преміум-тему, ви, ймовірно, не робите це тільки тому, що вона підтримує WordPress Google Maps.

Якщо ви не знаєте, з чого почати, багатоцільові теми WordPress, ймовірно, повинні бути вашим першим зупинкою. Ці типи тим пропонують досить функцій, тому ви можете використовувати їх для створення будь-якого типу сайту, який ви можете собі уявити.

Одна з найпопулярніших багатоцільових тим називається Divi (Англ). Ця тема пропонує ряд переваг, у тому числі власний вбудований візуальний конструктор сторінок:

Ця тема пропонує ряд переваг, у тому числі власний вбудований візуальний конструктор сторінок:

Коли ви створюєте сторінки за допомогою Divi Builder (Англ), ви можете розділити їх на рядки і стовпці. Потім ви можете додати певні модулі в відповідні прогалини:

Потім ви можете додати певні модулі в відповідні прогалини:

Ймовірно, ви помітили, що один з модулів на наведеному вище знімку екрана називається Map. Натисніть на нього, і тема попросить вас ввести ключ API Google (Англ). Якщо у вас його немає, ми розглянули процес його створення в рамках першого методу в цій статті.

Після того, як ви вставляєте свій API-ключ, ви можете вибрати, де розмістити свою карту, і додати стільки маркерів, скільки хочете:

Інші приклади тим, які підтримують WordPress Google Maps в базовій версії, включають Travelmatic (Англ), Estato (Англ) та Reales WP (Англ). Це дуже популярна функція серед орієнтованих на подорожі або нерухомість тим, але ви можете знайти її доступною для інших типів тим, якщо ви переглянете деякі з них.

висновок

Немає кращого способу позначити ваш фізичну адресу на сайті, ніж за допомогою інтерактивної онлайн-карти. карти Google дозволяють всім зрозуміти, як дістатися до вашого місця розташування, де б ви не знаходилися, що означає, що ваші користувачі з більшою ймовірністю зможуть відвідати вас. Крім того, додати Google карти в WordPress досить просто, так як є кілька легких способів зробити це.

Чи є у вас які-небудь питання про те, як додати Google карти в WordPress на своєму сайті? Не соромтеся запитувати нас в розділі коментарів нижче!

Чи є у вас які-небудь питання про те, як додати Google карти в WordPress на своєму сайті?