В тази статия ще ви покажа как да добавите адаптивна карта на Google Maps към уеб страница на WordPress (т.е. за страница с контакти), без да използвате плъгин. Ще използвам WordPress 6.0 за този урок, както и темата Twenty Twenty Two, която е темата по подразбиране за тази версия на WordPress.

 Функцията Google Maps ви позволява да показвате местоположението на вашия бизнес на интерактивна карта, което позволява на посетителите на сайта лесно да видят къде се намирате и да взаимодействат с картата, за да видят какво друго има около вас, да получат указания и т.н. Тя демонстрира на посетителите на сайта че сте местен бизнес и имате реално физическо местоположение. Много често се случва фирмите да имат карта на страницата си за контакти.

Има тонове приставки за Google Maps, но много от тях са тромави и изискват или плащане за пълните функции на приставката, или акаунт в Google Developer със сложни стъпки, които водят до по-малко от желания резултат.

Като се има предвид всичко това, има наистина лесен начин да добавите Google Maps към вашите WordPress 6.0 страници без добавки и без куп сложни стъпки. Нека се потопим в него.

Съдържание

Стъпка 1: Създайте HTML блок

Като за начало, влезте в административната област на вашия WordPress сайт и отворете секцията „Страници“ (червена стрелка в изображението по-горе).

Щракнете върху страницата, към която искате да добавите функцията си на Google Карти (можете да щракнете върху името на страницата, в моя случай „Контакт“ – синя стрелка в горното изображение – или просто да щракнете върху „Редактиране“ под името на страницата).

Ако използвате блокова тема като Twenty Twenty Two, сега ще бъдете в редактора на блокове за вашата страница. Превъртете надолу до мястото, където искате да вмъкнете вашата карта.

След това щракнете върху иконата „+“ („Block Inserter“ – червена стрелка на изображението по-горе), за да вмъкнете блок.

Потърсете „Група“ в полето за търсене (очертано в зелено на снимката) и щракнете, за да добавите груповия блок (червена стрелка). Това ще ви позволи да добавите някои персонализирани настройки към блоковия елемент.

Например щракнете върху опцията „Промяна на подравняването“ (червена стрелка) и изберете „Пълна ширина“ (зелена стрелка). Това ще направи ширината на блока, който ще съдържа нашата интерактивна карта на Google Карти, пълна ширина.

След това щракнете върху големия бутон „+“ в групата (червена стрелка на снимката по-горе). Потърсете „HTML“ в лентата за търсене (очертана в зелено) и щракнете върху блока „Персонализиран HTML“ (синя стрелка).

Ще видите, че сега пише „Напишете html…“ (червена стрелка). Това е мястото, където ще добавим нашата карта.

Опростен WordPress: Как да изградим мощни уебсайтове Курс от Davies Media Design

Стъпка 2: Генерирайте Google Maps Embed HTML

Сега ще трябва да генерираме нашата карта с Google Maps. За да направите това, отворете нов раздел на браузъра и отворете Google.com, ако това не е вашият браузър за търсене по подразбиране.

След това въведете адреса, който искате да покажете на вашата карта. За този пример ще използвам Емпайър Стейт Билдинг (червена стрелка). Можете да използвате точния адрес на вашия бизнес за тази част (т.е. номер на улицата, улица, град, щат и пощенски код – или каквото въведете за международни адреси, ако не сте в САЩ).

Щракнете върху изображението на картата, което се появява за вашия адрес в страницата с резултати от търсачката (червена стрелка в изображението – тя ще бъде или в средата на страницата, или вдясно, в зависимост от това дали сте въвели адрес или името на място, както направих аз).

Вашият адрес ще се появи като маркер на картата на цял екран (червена стрелка в горното изображение). Ще видите и няколко икони под адреса или заглавието на мястото, което сте търсили. Тези икони включват „Упътвания“, „Запазване“, „Наблизо“, „Изпращане до телефона“ и „Споделяне“. Кликнете върху иконата „Споделяне“ (синя стрелка).

В раздела „Споделяне“, който се показва, щракнете върху раздела „Вграждане на карта“ (синя стрелка на снимката по-горе).  

В този раздел ще видите предварителен преглед на вградената ви джаджа на Google Карти. Има падащо меню за размер от лявата страна на кода (зелена стрелка) – можете да изберете предварително зададен размер или да изберете „По избор“, за да зададете свой собствен размер. Ще избера опцията „По избор“ (червена стрелка).

Тук ще видите размерите на моята персонализирана карта. Ще задам височината или първото измерение на 1200 (червена стрелка). Ще оставя ширината зададена на 600. Можете да щракнете върху „Преглед на действителния размер“ (зелена стрелка), за да покажете картата в нов изскачащ прозорец в пълен размер (уверете се, че сте деактивирали всички блокери за изскачащи прозорци, ако ги имате включен, за да избегнете блокиране на прозореца). Излезте от прозореца за визуализация, след като сте готови.

След това щракнете върху връзката „Копиране на HTML“ (синя стрелка). Това е кодът, който ще въведем в нашата WordPress страница.

Стъпка 3: Поставете HTML кода в страницата на WordPress

Върнете се в раздела на браузъра, който съдържа вашия уебсайт WordPress. Кликнете върху празния HTML блок, където пише „Напишете HTML тук…“ и поставете кода (червена стрелка), като натиснете ctrl+v на клавиатурата (cmd+v на Mac).

Ако щракнете върху опцията „Преглед“ в лентата с инструменти за блокиране (червена стрелка), сега ще видите вашата карта, показана на вашата страница (зелена стрелка). Кликнете отново върху опцията „HTML“, за да се върнете към HTML кода (синя стрелка).

Имаме нашата карта, вградена на нашата страница, но тя не реагира – което означава, че ако гледаме картата на по-малък екран, като таблет или телефон, тя няма да коригира размера си, за да пасне на екрана. За да коригираме това, трябва да добавим персонализиран стил към HTML кода.

Стъпка 4: Направете Google Maps Responsive

ще бъда използвайки кода, който получих от този уебсайт за да направите вграждането на Google Maps отзивчиво. Превъртете надолу до раздела с етикет „Как да вградите Google Maps Responsively“ (червена стрелка). След това превъртете надолу до втория набор от кодове (синя стрелка).

Копирайте всичко от „ ”  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: Курс за създаване на мощни уебсайтове на Udemy, или разгледайте другия ми Уроци по WordPress!

Имейл бюлетин за безплатни креативни приложения на Davies Media Design

Абонирайте се за бюлетина на DMD

Регистрирайте се, за да получавате нови уроци, актуализации на курсове и най-новите новини за любимите ви безплатни творчески приложения!

Абонирахте се успешно!

Тя ПИН на Pinterest