Sa artikulong ito, ipapakita ko sa iyo kung paano magdagdag ng tumutugon na mapa ng Google Maps sa isang WordPress webpage (ibig sabihin, para sa pahina ng Contact) nang hindi gumagamit ng plugin. Gagamitin ko ang WordPress 6.0 para sa tutorial na ito, pati na rin ang Twenty Twenty Two na tema, na siyang default na tema para sa bersyong ito ng WordPress.
Ang tampok na Google Maps ay nagbibigay-daan sa iyo na ipakita ang lokasyon ng iyong negosyo sa isang interactive na mapa, na nagbibigay-daan sa mga bisita sa site na madaling makita kung saan ka matatagpuan at makipag-ugnayan sa mapa upang makita kung ano pa ang nasa paligid mo, kumuha ng mga direksyon, atbp. Ito ay nagpapakita sa mga bisita ng site na ikaw ay isang lokal na negosyo at may tunay, pisikal na lokasyon. Napakakaraniwan para sa mga negosyo na magkaroon ng mapa sa kanilang contact page.
Mayroong maraming mga plugin ng Google Maps, ngunit marami sa mga ito ay clunky at nangangailangan ng alinman sa pagbabayad para sa buong mga tampok ng plugin o isang Google Developer account na may mga kumplikadong hakbang na gumagawa ng isang hindi gaanong kanais-nais na resulta.
Ang lahat ng ito ay sinabi, mayroong isang talagang simpleng paraan upang magdagdag ng Google Maps sa iyong WordPress 6.0 na mga pahina nang walang mga plugin at walang isang grupo ng mga kumplikadong hakbang. Sumisid tayo dito.
Hakbang 1: Gumawa ng HTML Block
Para sa mga panimula, mag-login sa admin area ng iyong WordPress site at mag-navigate sa seksyong "Mga Pahina" (pulang arrow sa larawan sa itaas).
Mag-click sa pahina kung saan mo gustong idagdag ang iyong tampok sa Google Maps (maaari kang mag-click sa pangalan ng pahina, sa aking kaso "Contact" - asul na arrow sa larawan sa itaas - o i-click lamang ang "I-edit" sa ilalim ng pangalan ng pahina).
Kung gumagamit ka ng block na tema tulad ng Twenty Twenty Two, nasa loob ka na ngayon ng Block Editor para sa iyong page. Mag-scroll pababa sa lokasyon kung saan mo gustong ipasok ang iyong mapa.
Susunod, i-click ang icon na “+” (ang “Block Inserter” – pulang arrow sa larawan sa itaas) para magpasok ng block.
Hanapin ang "Group" sa field ng paghahanap (nakabalangkas sa berde sa larawan) at i-click upang idagdag ang block ng grupo (pulang arrow). Papayagan ka nitong magdagdag ng ilang custom na setting sa block element.
Halimbawa, mag-click sa opsyong “Change Alignment” (pulang arrow) at piliin ang “Full Width” (berdeng arrow). Gagawin nitong buong lapad ang lapad ng bloke na maglalaman ng aming interactive na mapa ng Google Maps.
Susunod, i-click ang malaking "+" na button sa loob ng grupo (pulang arrow sa larawan sa itaas). Maghanap ng "HTML" sa search bar (nakabalangkas sa berde) at mag-click sa bloke ng "Custom HTML" (asul na arrow).
Makikita mo na ngayon ang nakasulat na "Write html..." (pulang arrow). Dito natin idaragdag ang ating mapa.
Hakbang 2: Bumuo ng Google Maps I-embed ang HTML
Kakailanganin na nating buuin ang ating mapa gamit ang Google Maps. Upang gawin ito, magbukas ng bagong tab ng browser at mag-navigate sa Google.com kung hindi ito ang iyong default na search browser.
Susunod, i-type ang address na gusto mong ipakita sa iyong mapa. Para sa halimbawang ito, gagamitin ko ang Empire State Building (pulang arrow). Magagamit mo ang eksaktong address ng iyong negosyo para sa bahaging ito (ibig sabihin, numero ng kalye, kalye, lungsod, estado, at zipcode – o anumang tina-type mo para sa mga internasyonal na address kung wala ka sa US).
Mag-click sa larawan ng mapa na lalabas para sa iyong address sa Pahina ng Mga Resulta ng Search Engine (pulang arrow sa larawan – ito ay nasa gitna ng pahina o nasa kanan, depende sa kung nag-type ka ng address o pangalan ng isang lugar, tulad ng ginawa ko).
Lilitaw na ngayon ang iyong address bilang isang marker sa full-screen na mapa (pulang arrow sa larawan sa itaas). Makakakita ka rin ng ilang icon sa ilalim ng address o pamagat ng lugar na iyong hinanap. Kasama sa mga icon na ito ang "Mga Direksyon," "I-save," "Kalapit," "Ipadala sa Telepono," at "Ibahagi." Mag-click sa icon na "Ibahagi" (asul na arrow).
Sa tab na "Ibahagi" na lalabas, mag-click sa tab na "I-embed ang isang Mapa" (asul na arrow sa larawan sa itaas).
Sa tab na ito, makakakita ka ng preview ng iyong naka-embed na widget ng Google Maps. Mayroong dropdown ng laki sa kaliwang bahagi ng code (berdeng arrow) – maaari kang pumili ng premade na laki o piliin ang “Custom” para itakda ang sarili mong laki. Pipiliin ko ang opsyong “Custom” (pulang arrow).
Dito, makikita mo ang mga sukat para sa aking custom na mapa. Itatakda ko ang taas, o ang unang dimensyon, sa 1200 (pulang arrow). Iiwan ko ang lapad na nakatakda sa 600. Maaari mong i-click ang "I-preview ang aktwal na laki" (berdeng arrow) upang ipakita ang mapa sa isang bagong pop-up window sa buong laki (siguraduhing hindi mo pinagana ang anumang mga pop-up blocker kung mayroon ka ng mga ito naka-on upang maiwasan ang pagharang sa bintana). Lumabas sa preview window kapag tapos ka na.
Susunod, i-click ang link na "Kopyahin ang HTML" (asul na arrow). Ito ang code na dadalhin namin sa aming WordPress page.
Hakbang 3: I-paste ang HTML Code sa WordPress Page
Mag-navigate pabalik sa tab ng browser na naglalaman ng iyong WordPress website. Mag-click sa walang laman na HTML block kung saan nakasulat ang "Write HTML here..." at i-paste ang code (pulang arrow) sa pamamagitan ng pagpindot sa ctrl+v sa iyong keyboard (cmd+v sa isang mac).
Kung iki-click mo ang opsyong “I-preview” sa Block Toolbar (pulang arrow), makikita mo na ngayon ang iyong mapa na ipinapakita sa iyong pahina (berdeng arrow). Mag-click muli sa opsyong "HTML" upang bumalik sa HTML code (asul na arrow).
Naka-embed ang aming mapa sa aming page, ngunit hindi ito tumutugon – ibig sabihin, kung titingnan namin ang mapa sa isang mas maliit na screen, tulad ng isang tablet o telepono, hindi nito isasaayos ang laki nito upang magkasya sa screen. Upang ayusin ito, kailangan naming magdagdag ng ilang custom na istilo sa HTML code.
Hakbang 4: Gawing Tumutugon ang Google Maps
Magiging ako gamit ang code na nakuha ko mula sa website na ito upang gawing tumutugon ang Google Maps embed. Mag-scroll pababa sa seksyong may label na "Paano I-embed ang Google Maps nang Responsive" (pulang arrow). Pagkatapos, mag-scroll pababa sa pangalawang hanay ng code (asul na arrow).
Kopyahin ang lahat mula sa " ” 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).
Mag-navigate pabalik sa WordPress. I-click ang iyong mouse sa pinakaharap ng HTML code upang ipasok ang bagong code na ito sa simula (pulang arrow). Pindutin ang ctrl+v para i-paste ang iyong code.
Panghuli, mag-click sa pinakadulo ng HTML code (pulang arrow) at i-type ang “ ” para isara ang lahat. Karaniwang ang ginawa mo lang ay binalot ang iyong HTML code sa pasadyang estilo. Sinasabi ng styling na ito sa browser ng bisita na baguhin ang laki ng mapa batay sa laki ng window kung saan nila ito tinitingnan.
Hakbang 5: Ayusin ang Aspect Ratio ng Interactive na Map
May isang huling bagay na kailangan nating gawin – mag-scroll pabalik sa itaas ng code hanggang sa makita mo ang “padding-bottom: 75%;” (pulang pana). Tinutukoy ng piraso ng code na ito ang aspect ratio ng mapa.
Dahil binago ko ang aking mapa sa 1200 x 600, mayroon itong 2:1 aspect ratio. Para dito, kailangan kong baguhin ang porsyento sa "50%" (pulang arrow).
Kung hindi ka sigurado kung anong porsyento ang dapat mong gamitin para sa iyong mapa, kunin lang ang aspect ratio (ibig sabihin, 16:9) at hatiin ang pangalawang numero sa una upang makuha ang iyong porsyento (9 na hinati sa 16 ay 56.25%).
I-click ang "I-update" upang ilapat ang iyong mga pagbabago (asul na arrow sa larawan sa itaas), pagkatapos ay i-click ang "Tingnan ang Pahina" sa kaliwang sulok sa ibaba upang makita ang resulta.
Dapat mo na ngayong makita ang iyong Google Maps widget na ipinapakita (pulang arrow sa larawan sa itaas).
Maaari mong subukan ang kakayahang tumugon sa pamamagitan ng pag-urong sa laki ng iyong browser, pagkatapos ay mag-scroll pabalik sa lugar ng webpage kung saan mayroong mapa.
Iyon lang para sa tutorial na ito! Kung nagustuhan mo ito at gusto mong matutunan kung paano gumawa ng iyong sariling propesyonal na WordPress website mula sa simula, maaari kang mag-enroll sa aking WordPress 6.0 para sa kursong Non-Coder sa Udemy, o tingnan ang aking iba pang mga tutorial!
