Kamakailan lamang, tinanong kami ng isa sa aming mga gumagamit kung paano magdagdag ng autocomplete para sa mga patlang ng address sa mga form sa WordPress. Pinapayagan ng autocomplete ang mga user na mabilis na piliin ang address mula sa mga suhestiyon na nalikha sa realtime habang nagta-type. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng autocomplete para sa mga patlang ng address sa WordPress gamit ang Google Places API.
Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang Address Autocomplete Gamit ang plugin ng Google Place Api. Para sa higit pang mga detalye
Sa pag-activate, kailangan mong bisitahin Mga Setting »Google Autocomplete pahina upang i-configure ang mga setting ng plugin.
Hihilingin sa iyo na ipasok ang Google Places API Key. Ang API key na ito ay nagbibigay-daan sa iyong website na kumonekta sa Google Maps at makuha ang mga suhestiyon ng autocomplete mula sa kanilang database sa realtime.
Pumunta sa website ng Google Developer Console at lumikha ng isang bagong proyekto.
Ang isang popup ay lilitaw na humihiling sa iyo na magbigay ng isang pangalan para sa iyong proyekto. Gumamit ng isang pangalan na tutulong sa iyo sa ibang pagkakataon na makilala ang proyekto at pagkatapos ay mag-click sa pindutang lumikha.
Ang popup ay mawawala, maghintay ng ilang segundo at awtomatiko kang mai-redirect sa iyong bagong proyekto.
Ngayon makikita mo ang listahan ng mga sikat na Google API na maaari mong paganahin para sa iyong proyekto. Kailangan mong hanapin at mag-click sa ‘Web Service API ng Google Places’.
Dadalhin ka nito sa isang pahina ng pangkalahatang-ideya na nagpapaliwanag kung paano gumagana ang API na ito. Kailangan mong mag-click sa link na Paganahin upang magpatuloy.
I-enable ng console ng developer ang Google Places API para sa iyong proyekto.
Gayunpaman, kailangan mo pa ring mga kredensyal na gamitin ang API sa iyong website. Kaya sige at mag-click sa pindutan ng paglikha ng mga kredensyal upang magpatuloy.
Sa susunod na screen, kailangan mong mag-click sa ‘Ano ang mga kredensyal ang kailangan ko?’ Na pindutan.
Palilitawin ka ngayon ng console ng developer ang API key. Kailangan mong kopyahin ang key na ito at i-paste ito sa ilalim ng mga setting ng plugin sa iyong website ng WordPress.
Kailangan mo pa ring paganahin ang isa pang API sa iyong proyekto sa Google Developers. Mag-click sa library sa Google Developer Console at pagkatapos ay mag-click sa ‘Google Maps JavaScript API’.
Dadalhin ka nito sa pahina ng overview ng API kung saan kailangan mong mag-click sa link na ‘Paganahin’ upang magpatuloy.
Hindi nangangailangan ng API na ito ang dagdag na key ng API, kaya handa ka na ngayong pumunta.
Pinapagana ang Autocomplete Address sa WordPress Forms Field
Maaari kang magdagdag ng tampok na autocomplete address sa anumang field ng form na nilikha ng anumang WordPress builder plugin.
Gagamitin namin ang WPForms sa tutorial na ito. Gayunpaman, gagana ang mga tagubiling ito kahit anu anong contact form plugin na iyong ginagamit.
Una kailangan mong lumikha ng isang form na may isang patlang ng address o isang hanay ng mga patlang ng address.
Sa sandaling tapos ka na, idagdag ang form na ito sa iyong website tulad ng karaniwang ginagawa mo.
Susunod, pumunta sa post o pahina kung saan mo idinagdag ang iyong form. Kailangan mong i-right click ang field ng address at piliin ang ‘Inspect’ mula sa menu ng browser.
Makikita mo ang mga halaga ng klase ng pangalan, ID, at CSS para sa field ng address.
Halimbawa, sa screenshot na ito ang halaga ng pangalan ng aming form ay wpforms [fields] [9] [address1] , Ang halaga ng ID ay wpforms-352-field_9 , at klase ng css wpforms-field-address-address1 .
Kailangan mong kopyahin ang isa sa mga halagang ito at i-paste ito sa pahina ng mga setting ng plugin.
Kung nais mong i-target ang maraming mga patlang sa maraming mga form, pagkatapos ay maaari ka lamang magdagdag ng kuwit at magdagdag ng isa pang halaga.
Huwag kalimutan na mag-click sa pindutang save upang iimbak ang iyong mga pagbabago.
Iyon lang, maaari mo na ngayong bisitahin ang iyong pahina ng form at subukang mag-enter ng isang address. Ang patlang ng form ay awtomatikong magsisimula sa pagpapakita ng mga suhestiyon gamit ang mga lugar ng Google at Google Maps.
