У гэтым артыкуле я пакажу вам, як дадаць адаптыўную карту Google Maps на вэб-старонку WordPress (напрыклад, на старонку кантактаў) без выкарыстання плагіна. Для гэтага падручніка я буду выкарыстоўваць WordPress 6.0, а таксама тэму Twenty Twenty Two, якая з'яўляецца тэмай па змаўчанні для гэтай версіі WordPress.
Функцыя Google Maps дазваляе адлюстроўваць месцазнаходжанне вашага бізнесу на інтэрактыўнай карце, дазваляючы наведвальнікам сайта лёгка бачыць, дзе вы знаходзіцеся, і ўзаемадзейнічаць з картай, каб убачыць, што яшчэ вакол вас, атрымаць маршрут і г.д. Гэта дэманструе наведвальнікам сайта што вы з'яўляецеся мясцовым прадпрыемствам і маеце рэальнае фізічнае месцазнаходжанне. Для прадпрыемстваў вельмі часта ёсць карта на старонцы кантактаў.
Існуе мноства плагінаў Google Maps, але многія з іх нязграбныя і патрабуюць альбо аплаты за ўсе функцыі плагіна, альбо ўліковага запісу распрацоўшчыка Google са складанымі крокамі, якія даюць не вельмі жаданы вынік.
З улікам усяго сказанага, ёсць вельмі просты спосаб дадаць Google Maps на вашы старонкі WordPress 6.0 без убудоў і без мноства складаных крокаў. Давайце акунемся ў гэта.
Крок 1: Стварыце блок HTML
Для пачатку ўвайдзіце ў вобласць адміністратара вашага сайта WordPress і перайдзіце ў раздзел «Старонкі» (чырвоная стрэлка на малюнку вышэй).
Пстрыкніце старонку, на якую хочаце дадаць сваю функцыю Google Maps (вы можаце націснуць назву старонкі, у маім выпадку «Кантакт» — сіняя стрэлка на малюнку вышэй — або проста націснуць «Рэдагаваць» пад назвай старонкі).
Калі вы выкарыстоўваеце тэму блокаў, напрыклад, Twenty Twenty Two, вы зараз апынецеся ў рэдактары блокаў для сваёй старонкі. Пракруціце ўніз да месца, куды вы хочаце ўставіць карту.
Затым націсніце на значок «+» («Інструмент устаўкі блокаў» - чырвоная стрэлка на малюнку вышэй), каб уставіць блок.
Знайдзіце «Група» ў полі пошуку (абведзены зялёным на фота) і націсніце, каб дадаць блок групы (чырвоная стрэлка). Гэта дазволіць вам дадаць некаторыя ўласныя налады да элемента блока.
Напрыклад, націсніце на опцыю «Змяніць выраўноўванне» (чырвоная стрэлка) і выберыце «У поўную шырыню» (зялёная стрэлка). Гэта зробіць шырыню блока, які будзе змяшчаць нашу інтэрактыўную карту Google Maps, поўнай шырынёй.
Затым націсніце вялікую кнопку «+» у групе (чырвоная стрэлка на фота вышэй). Знайдзіце «HTML» у радку пошуку (абведзены зялёным) і націсніце на блок «Карыстальніцкі HTML» (сіняя стрэлка).
Цяпер вы ўбачыце надпіс «Напісаць html…» (чырвоная стрэлка). Тут мы дадамо нашу карту.
Крок 2: Стварыце Google Maps Embed HTML
Цяпер нам трэба стварыць нашу карту з Google Maps. Каб зрабіць гэта, адкрыйце новую ўкладку браўзера і перайдзіце на Google.com, калі гэта не ваш браўзер па змаўчанні.
Затым увядзіце адрас, які вы хочаце адлюстраваць на карце. У гэтым прыкладзе я буду выкарыстоўваць Эмпайр-Стэйт-Білдынг (чырвоная стрэлка). Вы можаце выкарыстоўваць дакладны адрас вашай кампаніі для гэтай часткі (г.зн. нумар вуліцы, вуліца, горад, штат і паштовы індэкс – або любы іншы, які вы ўводзіце для міжнародных адрасоў, калі вы не ў ЗША).
Націсніце на выяву карты, якая з'яўляецца для вашага адраса на старонцы вынікаў пошукавай сістэмы (чырвоная стрэлка на малюнку - яна будзе знаходзіцца ў сярэдзіне старонкі або справа, у залежнасці ад таго, увялі вы адрас або імя месца, як і я).
Цяпер ваш адрас з'явіцца ў якасці маркера на поўнаэкраннай карце (чырвоная стрэлка на малюнку вышэй). Вы таксама ўбачыце некалькі значкоў пад адрасам або назвай месца, якое вы шукалі. Гэтыя значкі ўключаюць «Напрамкі», «Захаваць», «Побач», «Адправіць на тэлефон» і «Падзяліцца». Націсніце на значок «Падзяліцца» (сіняя стрэлка).
На ўкладцы «Падзяліцца», якая з'явіцца, націсніце на ўкладку «Уставіць карту» (сіняя стрэлка на фота вышэй).
На гэтай укладцы вы ўбачыце папярэдні прагляд вашага ўбудаванага віджэта Google Maps. У левым баку кода (зялёная стрэлка) ёсць выпадальны спіс памераў - вы можаце выбраць загадзя створаны памер або выбраць «Карыстальніцкі», каб усталяваць уласны памер. Я выберу опцыю «На заказ» (чырвоная стрэлка).
Тут вы ўбачыце памеры маёй індывідуальнай карты. Я ўсталюю вышыню або першы памер 1200 (чырвоная стрэлка). Я пакіну шырыню 600. Вы можаце націснуць «Папярэдні прагляд фактычнага памеру» (зялёная стрэлка), каб паказаць карту ў новым усплывальным акне ў поўным памеры (пераканайцеся, што вы адключылі ўсе блакіроўшчыкі ўсплывальных вокнаў, калі яны ў вас ёсць уключаны, каб пазбегнуць блакавання акна). Пасля завяршэння выйдзіце з акна папярэдняга прагляду.
Затым націсніце спасылку «Капіяваць HTML» (сіняя стрэлка). Гэта код, які мы ўнясем на нашу старонку WordPress.
Крок 3: Устаўце HTML-код на старонку WordPress
Перайдзіце назад на ўкладку браўзера, якая змяшчае ваш сайт WordPress. Націсніце на пусты блок HTML, дзе напісана «Напішыце HTML тут…» і ўстаўце код (чырвоная стрэлка), націснуўшы ctrl+v на клавіятуры (cmd+v на Mac).
Калі вы націснеце опцыю «Папярэдні прагляд» на панэлі інструментаў блакіроўкі (чырвоная стрэлка), вы ўбачыце карту, адлюстраваную на вашай старонцы (зялёная стрэлка). Пстрыкніце назад на опцыі «HTML», каб вярнуцца да HTML-коду (сіняя стрэлка).
Наша карта ўбудавана на нашу старонку, але яна не рэагуе, гэта значыць, калі мы праглядаем карту на меншым экране, напрыклад, на планшэце або тэлефоне, яна не будзе падганяць свой памер пад экран. Каб выправіць гэта, нам трэба дадаць нестандартны стыль у код HTML.
Крок 4: Зрабіце Google Maps адаптыўнымі
Я буду выкарыстоўваючы код, які я атрымаў з гэтага сайта каб зрабіць убудаваныя карты Google спагаднымі. Пракруціце ўніз да раздзела з надпісам «Як хутка ўбудаваць Google Maps» (чырвоная стрэлка). Затым пракруціце ўніз да другога набору кода (сіняя стрэлка).
Скапіруйце ўсё з « ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
Перайдзіце назад у WordPress. Пстрыкніце мышкай у самым пачатку кода HTML, каб уставіць гэты новы код у пачатак (чырвоная стрэлка). Каб уставіць код, націсніце ctrl+v.
Нарэшце, пстрыкніце ў самым канцы кода HTML (чырвоная стрэлка) і ўвядзіце « », каб усё зачыніць. Па сутнасці, тое, што вы толькі што зрабілі, гэта загарнулі свой HTML-код у карыстацкі стыль. Гэты стыль загадвае браўзеру наведвальніка змяніць памер карты ў залежнасці ад памеру акна, у якім яны яе праглядаюць.
Крок 5: Адрэгулюйце суадносіны бакоў інтэрактыўнай карты
Ёсць апошняе, што нам трэба зрабіць - пракруціць назад да верхняй часткі кода, пакуль не ўбачыце «padding-bottom: 75%;» (чырвоная стрэлка). Гэты фрагмент кода вызначае суадносіны бакоў карты.
Паколькі я змяніў памер сваёй карты да 1200 x 600, яна мае суадносіны бакоў 2:1. Для гэтага мне трэба змяніць працэнт на «50%» (чырвоная стрэлка).
Калі вы не ўпэўненыя, які працэнт вы павінны выкарыстоўваць для вашай карты, проста вазьміце суадносіны бакоў (напрыклад, 16:9) і падзяліце другое лік на першае, каб атрымаць працэнт (9, падзеленае на 16, складае 56.25%).
Націсніце «Абнавіць», каб прымяніць змены (сіняя стрэлка на малюнку вышэй), затым націсніце «Праглядзець старонку» ў левым ніжнім куце, каб убачыць вынік.
Цяпер вы павінны ўбачыць ваш віджэт Google Maps (чырвоная стрэлка на малюнку вышэй).
Вы можаце праверыць хуткасць рэагавання, паменшыўшы памер браўзера, а затым пракруціўшы назад да вобласці вэб-старонкі, дзе ёсць карта.
Вось і ўсё для гэтага падручніка! Калі вам гэта спадабалася і вы хочаце навучыцца ствараць уласны прафесійны сайт WordPress з нуля, вы можаце зарэгістравацца ў маім Курс WordPress 6.0 для карыстальнікаў, якія не карыстаюцца кодам, на Udemy, або праверце іншыя мае падручнікі!
