Во оваа статија, ќе ви покажам како да додадете одговорна мапа на Google Maps на веб-страница на WordPress (т.е. за страница за контакт) без користење на приклучок. Ќе користам WordPress 6.0 за ова упатство, како и темата Twenty Twenty Two, која е стандардна тема за оваа верзија на WordPress.

 Функцијата „Карти на Google“ ви овозможува да ја прикажете локацијата на вашиот бизнис на интерактивна мапа, овозможувајќи им на посетителите на страницата лесно да гледаат каде се наоѓате и да комуницираат со мапата за да видат што друго има околу вас, да добијат насоки итн. Тоа им покажува на посетителите на страницата дека сте локален бизнис и имате вистинска, физичка локација. Многу е вообичаено бизнисите да имаат мапа на нивната контакт страница.

Има тони приклучоци за „Карти на Google“ таму, но многу од нив се незгодни и бараат или плаќање за целосните функции на приклучокот или сметка на Google Developer со комплицирани чекори што даваат помалку од посакуван резултат.

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

Содржина

Чекор 1: Создадете HTML блок

За почеток, најавете се во администраторската област на вашата страница на WordPress и одете во делот „Страници“ (црвена стрелка на горната слика).

Кликнете на страницата на која сакате да ја додадете вашата функција на „Карти на Google“ (можете да кликнете на името на страницата, во мојот случај „Контакт“ – сина стрелка на горната слика – или едноставно кликнете „Уреди“ под името на страницата).

Ако користите блок-тема како што е Twenty Twenty Two, сега ќе бидете во Уредникот за блокови за вашата страница. Скролувајте надолу до локацијата каде што сакате да ја вметнете вашата карта.

Следно, кликнете на иконата „+“ („Блок вметнувач“ - црвена стрелка на сликата погоре) за да вметнете блок.

Пребарајте „Група“ во полето за пребарување (на фотографијата со зелена боја) и кликнете за да го додадете групниот блок (црвена стрелка). Ова ќе ви овозможи да додадете некои сопствени поставки на блок елементот.

На пример, кликнете на опцијата „Change Alignment“ (црвена стрелка) и изберете „Full Width“ (зелена стрелка). Ова ќе ја направи ширината на блокот што ќе ја содржи нашата интерактивна карта на „Карти на Google“ целосна ширина.

Следно, кликнете на големото копче „+“ во групата (црвена стрелка на горната фотографија). Пребарајте „HTML“ во лентата за пребарување (оцртана со зелена боја) и кликнете на блокот „Custom HTML“ (сина стрелка).

Ќе видите дека сега вели „Напиши html…“ (црвена стрелка). Ова е местото каде што ќе ја додадеме нашата карта.

WordPress поедноставен: Курс како да изградите моќни веб-страници од Дејвис Медиа Дизајн

Чекор 2: Создадете HTML за вградување на „Карти на Google“.

Сега ќе треба да ја генерираме нашата карта со Google Maps. За да го направите ова, отворете ново јазиче на прелистувачот и одете до Google.com ако тоа не е вашиот стандарден прелистувач за пребарување.

Следно, напишете ја адресата што сакате да ја прикажете на вашата мапа. За овој пример, ќе ја користам Empire State Building (црвена стрелка). Може да ја користите точната адреса на вашиот бизнис за овој дел (т.е. број на улица, улица, град, држава и поштенски број - или што и да напишете за меѓународни адреси ако не сте во САД).

Кликнете на сликата на мапата што се појавува за вашата адреса на страницата со резултати од пребарувачот (црвена стрелка на сликата - ова ќе биде или во средината на страницата или исклучено надесно, во зависност од тоа дали сте внеле адреса или името на место, како што направив јас).

Вашата адреса сега ќе се појави како маркер на мапата на цел екран (црвена стрелка на горната слика). Исто така, ќе видите неколку икони под адресата или насловот на местото што сте го пребарувале. Овие икони вклучуваат „Насоки“, „Зачувај“, „Во близина“, „Испрати на телефон“ и „Сподели“. Кликнете на иконата „Сподели“ (сина стрелка).

Во табулаторот „Сподели“ што се појавува, кликнете на табулаторот „Вгради мапа“ (сината стрелка на горната фотографија).  

Во оваа картичка, ќе видите преглед на вашиот вграден додаток на „Карти на Google“. Има паѓачко мени за големина на левата страна на кодот (зелена стрелка) - можете да изберете претходно направена големина или да изберете „Прилагодено“ за да ја поставите сопствената големина. Ќе ја изберам опцијата „Прилагодено“ (црвена стрелка).

Овде, ќе ги видите димензиите за мојата приспособена мапа. Ќе ја поставам висината, или првата димензија, на 1200 (црвена стрелка). Ќе ја оставам ширината поставена на 600. Можете да кликнете на „Прегледајте ја вистинската големина“ (зелена стрелка) за да ја прикажете картата во нов скокачки прозорец во целосна големина (погрижете се да ги исклучите сите блокатори на скокачки прозорци доколку ги имате вклучено за да избегне блокирање на прозорецот). Излезете од прозорецот за преглед откако ќе завршите.

Следно, кликнете на врската „Копирај HTML“ (сина стрелка). Ова е кодот што ќе го внесеме на нашата страница на WordPress.

Чекор 3: Залепете HTML код на страницата на WordPress

Вратете се назад на јазичето на прелистувачот што ја содржи вашата веб-страница на WordPress. Кликнете на празниот HTML блок каде што пишува „Напиши HTML овде…“ и залепете го кодот (црвена стрелка) со притискање на ctrl+v на вашата тастатура (cmd+v на Mac).

Ако кликнете на опцијата „Преглед“ во лентата со алатки за блокирање (црвена стрелка), сега ќе ја видите вашата карта прикажана на вашата страница (зелена стрелка). Кликнете назад на опцијата „HTML“ за да се вратите на HTML кодот (сина стрелка).

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

Чекор 4: Направете „Карти на Google“ одговорни

ќе бидам користејќи код што го добив од оваа веб-локација за да се направи одговорно вградувањето на „Карти на Google“. Скролувајте надолу до делот означен како „Како одговорно да ги вградите „Карти на Google“ (црвена стрелка). Потоа, скролувајте надолу до вториот сет на кодови (сина стрелка).

Копирај сè од „ ”  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“ (црвена стрелка на горната слика).

Можете да ја тестирате одзивноста со намалување на големината на вашиот прелистувач, а потоа лизгање назад до областа на веб-страницата што ја има мапата.

Тоа е тоа за овој туторијал! Ако ви се допадна и сакате да научите како да направите своја професионална веб-страница на WordPress од нула, можете да се запишете на мојата WordPress поедноставен: Курс како да изградите моќни веб-страници на Udemy, или проверете го мојот друг Упатства за WordPress!

Билтен за е-пошта за бесплатни креативни апликации на Davies Media Design

Претплатете се на билтенот на DMD

Пријавете се за да добивате нови упатства, ажурирања на курсевите и најновите вести за вашите омилени бесплатни креативни апликации!

Успешно сте претплатени!

Пин Тоа на Pinterest