M'nkhaniyi, ndikuwonetsani momwe mungawonjezerere mapu a Google Maps patsamba la WordPress (mwachitsanzo patsamba la Contact) osagwiritsa ntchito pulogalamu yowonjezera. Ndikhala ndikugwiritsa ntchito WordPress 6.0 paphunziroli, komanso mutu wa Twenty Twenty Two, womwe ndi mutu wanthawi zonse wa WordPress iyi.

 Gawo la Google Maps limakupatsani mwayi wowonetsa komwe bizinesi yanu ili pamapu, zomwe zimalola obwera kutsamba lanu kuti aziwona komwe muli ndikulumikizana ndi mapu kuti awone zomwe zili pafupi nanu, kupeza mayendedwe, ndi zina zambiri. kuti ndinu bizinesi yakumaloko ndipo muli ndi malo enieni. Ndizofala kwambiri kuti mabizinesi azikhala ndi mapu patsamba lawo lolumikizana nawo.

Pali matani a mapulagini a Google Maps kunja uko, koma ambiri aiwo ndi osavuta ndipo amafunikira kulipira pazowonjezera zonse kapena akaunti ya Google Developer yokhala ndi zovuta zomwe zimabweretsa zotsatira zosafunikira.

Zonsezi zikunenedwa, pali njira yosavuta yowonjezerera Google Maps pamasamba anu a WordPress 6.0 opanda mapulagini komanso opanda masitepe ovuta. Tiyeni tilowe mu izo.

M'ndandanda wazopezekamo

Gawo 1: Pangani HTML Block

Navigate to the Contact page of your website by clicking Pages in the WP Admin Main Menu

Poyambira, lowani kudera la admin patsamba lanu la WordPress ndikupita ku gawo la "Masamba" (muvi wofiyira pachithunzi pamwambapa).

Dinani patsamba lomwe mukufuna kuwonjezera mawonekedwe anu a Google Maps (mutha kudina dzina latsambalo, inenso "Contact" - muvi wabuluu pachithunzi pamwambapa - kapena ingodinani "Sinthani" pansi pa dzina latsamba).

In the Block Editor, Click Add Block to Insert a New Block

Ngati mukugwiritsa ntchito mutu wa block ngati Twenty Twenty Two, tsopano mukhala mkati mwa Block Editor patsamba lanu. Pitani pansi pomwe mukufuna kuyika mapu anu.

Kenako, dinani chizindikiro cha "+" ("Block Inserter" - muvi wofiyira pachithunzi pamwambapa) kuti muyike chipika.

Select the Group Block from the list of available WordPress blocks

Sakani "Gulu" m'malo osakira (omwe ali obiriwira pachithunzichi) ndikudina kuti muwonjezere chipika chamagulu (muvi wofiyira). Izi zikuthandizani kuti muwonjezere zokonda zanu ku block element.

Click the alignment icon in the Block Toolbar and click Full Width

Mwachitsanzo, dinani pa "Sinthani Mayendedwe" (muvi wofiyira) ndikusankha "Full Width" (muvi wobiriwira). Izi zipangitsa kukula kwa chipika chomwe chizikhala ndi mapu athu olumikizana ndi Google Maps m'lifupi mwake.

Click the Plus Icon to add a new block, then search for and click on HTML

Kenako, dinani batani lalikulu "+" mkati mwa gulu (muvi wofiyira pachithunzi pamwambapa). Sakani "HTML" mu bar yofufuzira (yomwe ili yobiriwira) ndikudina pa "Custom HTML" block (muvi wabuluu).

Click on the area of the block that says "Write HTML"

Mudzawona tsopano akuti "Lembani html ..." (muvi wofiyira). Apa ndipamene tidzawonjezera mapu athu.

WordPress Yosavuta: Momwe Mungamangirire Mawebusayiti Amphamvu Maphunziro a Davies Media Design

Gawo 2: Pangani Google Maps Embed HTML

Tsopano tifunika kupanga mapu athu ndi Google Maps. Kuti muchite izi, tsegulani tabu yatsopano ya msakatuli ndikuyenda ku Google.com ngati si msakatuli wanu wosaka.

Search Google for the address you want to use in Google Maps

Kenako, lembani adilesi yomwe mukufuna kuwonetsa pamapu anu. Kwa chitsanzo ichi, ndigwiritsa ntchito Empire State Building (muvi wofiyira). Mutha kugwiritsa ntchito adilesi yeniyeni yabizinesi yanu pagawoli (mwachitsanzo, nambala ya misewu, msewu, mzinda, chigawo, ndi zipcode - kapena chilichonse chomwe mungalembe pama adilesi apadziko lonse lapansi ngati simuli ku US).

Click on the map image that shows the address you searched

Dinani pa chithunzi cha mapu chomwe chikuwonekera pa adilesi yanu patsamba la Zosaka za Injini Yosaka (muvi wofiyira pachithunzipa - izi zitha kukhala pakati pa tsamba kapena kumanzere kumanja, kutengera ngati mwalemba adilesi kapena dzina la malo, monga ndinachitira).

Click the Share icon that displays in the Google Maps listing

Adilesi yanu iwoneka ngati cholembera pamapu azithunzi zonse (muvi wofiyira pachithunzi pamwambapa). Muwonanso zithunzi zingapo pansi pa adilesi kapena mutu wamalo omwe mwasaka. Zithunzizi zikuphatikiza "Malangizo," "Sungani," "Pafupi," "Tumizani Kufoni," ndi "Gawani." Dinani pa "Gawani" chithunzi (muvi wabuluu).

Click the Embed a Map tab and select Custom Size from the dropdown

Pagawo la "Gawani" lomwe likuwonekera, dinani "Sungani Mapu" (muvi wabuluu pachithunzi pamwambapa).  

Patsambali, muwona chithunzithunzi cha widget yanu yophatikizidwa ya Google Maps. Pali kutsika kwa kukula kumanzere kwa kachidindo (muvi wobiriwira) - mutha kusankha kukula kodzipangiratu kapena kusankha "Mwambo" kuti muyike kukula kwanu. Ndisankha "Mwambo" njira (muvi wofiira).

Set the custom size for your embedded Google Maps widget and click Copy HTML

Apa, muwona kukula kwa mapu anga okonda. Ndiyika kutalika, kapena gawo loyamba, kukhala 1200 (muvi wofiyira). Ndisiya m'lifupi mwake kukhala 600. Mutha kudina "Kuwoneratu kukula kwenikweni" (muvi wobiriwira) kuti muwonetse mapu pazenera latsopano lotulukira mukukula kwathunthu (onetsetsani kuti mukuletsa zotsekereza zilizonse ngati muli nazo. kuyatsa kuti asatseke zenera). Tulukani pazenera lowonera mukamaliza.

Kenako, dinani ulalo wa "Koperani HTML" (muvi wabuluu). Iyi ndiye code yomwe tibweretsa patsamba lathu la WordPress.

Khwerero 3: Ikani Khodi ya HTML ku Tsamba la WordPress

Paste the Google Maps HTML code into the HTML block on your website

Pitani ku tsamba la osatsegula lomwe lili ndi tsamba lanu la WordPress. Dinani pa chipika chopanda kanthu cha HTML pomwe pamati "Lembani HTML apa ..." ndikumata kachidindo (muvi wofiyira) pomenya ctrl+v pa kiyibodi yanu (cmd+v pa mac).

Click the Preview button to preview the Google Maps widget

Mukadina "Preview" mu block Toolbar (muvi wofiyira), muwona mapu anu akuwonetsedwa patsamba lanu (muvi wobiriwira). Dinaninso pa "HTML" njira kuti mubwerere ku code ya HTML (muvi wabuluu).

Tili ndi mapu athu ophatikizidwa patsamba lathu, koma sakuyankha - kutanthauza kuti ngati tiwona mapu pazenera laling'ono, monga piritsi kapena foni, sizisintha kukula kwake kuti zigwirizane ndi zenera. Kuti tikonze izi, tifunika kuwonjezera makongoletsedwe amtundu wina ku code ya HTML.

Khwerero 4: Pangani Google Maps Kukhala Yomvera

Use the recommended code to make Google Maps responsive on your WordPress website

Ndidzakhala pogwiritsa ntchito code yomwe ndapeza patsamba lino kuti apangitse kuyika kwa Google Maps kuyankha. Pitani pansi ku gawo lolembedwa "Momwe Mungayikitsire Google Maps Momvera" (muvi wofiyira). Kenako, yendani pansi mpaka pagawo lachiwiri la code (muvi wabuluu).

Copy the code displayed on provided website for a responsive Google Maps iframe

Koperani zonse kuchokera ku " ”  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).

Paste the responsive code in the HTML block on your website

Yendetsani kubwerera ku WordPress. Dinani mbewa yanu kutsogolo kwenikweni kwa kachidindo ka HTML kuti muyike kachidindo yatsopanoyi kumayambiriro (muvi wofiyira). Dinani ctrl+v kuti muyike khodi yanu.

Add a closing div tag to the HTML to wrap your Google Maps HTML code in a div

Pomaliza, dinani kumapeto kwenikweni kwa HTML code (muvi wofiira) ndikulemba " ” kutseka chilichonse. Kwenikweni zomwe mwangochita ndikukulunga nambala yanu ya HTML mumakongoletsedwe anu. Makongoletsedwe awa amauza msakatuli wa mlendoyo kuti asinthe kukula kwa mapu potengera kukula kwa zenera lomwe akuwonera.

Khwerero 5: Sinthani mawonekedwe a Interactive Map

Adjust the Google Maps HTML padding code to increase or decrease padding

Pali chinthu chimodzi chomaliza chomwe tiyenera kuchita - bwererani pamwamba pa codeyo mpaka muwone "padding-bottom: 75%;" (muvi wofiira). Khodi iyi ikuwonetsa kuchuluka kwa mapu.

Change the padding-bottom code for the Google Maps HTML, then click the Update button to save your changes

Chifukwa ndinasintha mapu anga kukhala 1200 x 600, ali ndi chiyerekezo cha 2:1. Pachifukwa ichi, ndikufunika kusintha kuchuluka kwa "50%" (muvi wofiira).

Ngati simukudziwa kuti ndi magawo ati omwe muyenera kugwiritsa ntchito pamapu anu, ingotengani gawo (ie 16:9) ndikugawa nambala yachiwiri ndi yoyamba kuti mupeze maperesenti anu (9 kugawidwa ndi 16 ndi 56.25%).

Dinani "Sinthani" kuti mugwiritse ntchito zosintha zanu (muvi wabuluu pachithunzi pamwambapa), kenako dinani "Onani Tsamba" pakona yakumanzere kuti muwone zotsatira.

Google Maps displays on a WordPress webpage without a plugin

Tsopano muyenera kuwona widget yanu ya Google Maps ikuwonetsedwa (muvi wofiyira pachithunzi pamwambapa).

Responsive WordPress Google Maps code adjusts to the size of your device

Mutha kuyesa kuyankha pochepetsa kukula kwa msakatuli wanu, kenako ndikubwerera kudera latsamba lomwe lili ndi mapu.

Ndizo za phunziro ili! Ngati mudakonda ndipo mukufuna kuphunzira kupanga tsamba lanu laukadaulo la WordPress kuyambira poyambira, mutha kulembetsa WordPress Yosavuta: Momwe Mungamangirire Mawebusayiti Amphamvu Maphunziro pa Udemy, kapena onani zina zanga Maphunziro a WordPress!