San Airteagal seo, taispeánfaidh mé duit conas léarscáil Google Maps sofhreagrach a chur le leathanach gréasáin WordPress (ie le haghaidh leathanach Teagmhála) gan breiseán a úsáid. Beidh WordPress 6.0 in úsáid agam don rang teagaisc seo, chomh maith leis an téama Fiche Fiche a Dó, arb é an téama réamhshocraithe don leagan seo de WordPress.

 Ligeann gné Google Maps duit suíomh do ghnólachta a thaispeáint ar léarscáil idirghníomhach, rud a ligeann do chuairteoirí an tsuímh áit a bhfuil tú lonnaithe a fheiceáil go héasca agus idirghníomhú leis an léarscáil chun a fheiceáil cad eile atá thart ort, treoracha a fháil, srl. Léiríonn sé do chuairteoirí an tsuímh gur gnó áitiúil tú agus go bhfuil suíomh fisiceach fíor agat. Tá sé an-choitianta do ghnólachtaí léarscáil a bheith acu ar a leathanach teagmhála.

Tá go leor breiseán Google Maps amuigh ansin, ach tá go leor acu clunky agus éilíonn siad íocaíocht as na gnéithe breiseán iomlána nó cuntas Forbróir Google le céimeanna casta a thugann toradh nach bhfuil chomh inmhianaithe.

Agus é seo á rá, tá bealach fíor-simplí ann Google Maps a chur le do leathanaigh WordPress 6.0 gan forlíontáin agus gan sraith céimeanna casta. Léimimis isteach ann.

Clár na nÁbhar

Céim 1: Cruthaigh Bloc HTML

Chun tús a chur leis, logáil isteach chuig limistéar riaracháin do shuíomh WordPress agus déan nascleanúint chuig an rannán "Leathanaigh" (saighead dearg san íomhá thuas).

Cliceáil ar an leathanach ar mhaith leat do ghné Google Maps a chur leis (is féidir leat cliceáil ar ainm an leathanaigh, i mo chás "Teagmháil" - saighead gorm san íomhá thuas - nó cliceáil ar "Cuir in Eagar" faoi ainm an leathanaigh).

Má tá tú ag baint úsáide as blocthéama cosúil le Fiche Fiche a Dó, beidh tú anois taobh istigh den Eagarthóir Bloc do do leathanach. Scrollaigh síos go dtí an áit ar mhaith leat do léarscáil a chur isteach.

Ansin, cliceáil ar an deilbhín “+” (an “Block Inserter” - saighead dearg san íomhá thuas) chun bloc a chur isteach.

Déan cuardach do “Grúpa” sa réimse cuardaigh (léirithe i glas sa ghrianghraf) agus cliceáil chun an bloc grúpa (saighead dearg) a chur leis. Tabharfaidh sé seo deis duit roinnt socruithe saincheaptha a chur leis an eilimint bhloc.

Mar shampla, cliceáil ar an rogha "Athraigh Ailíniú" (saighead dearg) agus roghnaigh "Leithead Iomlán" (saighead glas). Déanfaidh sé seo leithead an bhloc ina mbeidh ár léarscáil idirghníomhach Google Maps lánleithead.

Ansin, cliceáil ar an gcnaipe mór “+” taobh istigh den ghrúpa (saighead dearg sa ghrianghraf thuas). Cuardaigh le haghaidh “HTML” sa bharra cuardaigh (imlíne glas) agus cliceáil ar an mbloc “Custom HTML” (saighead ghorm).

Feicfidh tú go ndeir sé anois “Scríobh html…” (saighead dearg). Seo an áit a gcuirfimid ár léarscáil.

WordPress Simplithe: Cúrsa conas Láithreáin Ghréasáin Cumhachtacha a Thógáil le Davies Media Design

Céim 2: Gin Google Maps Leabaigh HTML

Beidh orainn ár léarscáil a ghiniúint le Google Maps anois. Chun seo a dhéanamh, oscail cluaisín brabhsálaí nua agus déan nascleanúint chuig Google.com murab é do bhrabhsálaí cuardaigh réamhshocraithe é.

Ansin, clóscríobh an seoladh is mian leat a thaispeáint ar do léarscáil. Mar shampla seo, úsáidfidh mé an Empire State Building (saighead dearg). Is féidir leat seoladh cruinn do ghnó a úsáid don chuid seo (.i. uimhir sráide, sráid, cathair, stát, agus cód zip - nó cibé rud a scríobhann tú le haghaidh seoltaí idirnáisiúnta mura bhfuil tú sna SA).

Cliceáil ar an íomhá léarscáile atá le feiceáil do do sheoladh ar Leathanach Torthaí an Innill Chuardaigh (saighead dhearg san íomhá – beidh sé seo i lár an leathanaigh nó ar dheis, ag brath ar ar chlóscríobh tú seoladh nó ainm an áit, mar a rinne mé).

Beidh do sheoladh le feiceáil anois mar mharcóir ar an léarscáil lánscáileáin (saighead dearg san íomhá thuas). Feicfidh tú freisin roinnt deilbhíní faoi sheoladh nó teideal na háite a chuardaigh tú. Áirítear ar na deilbhíní seo “Treoracha,” “Sábháil,” “In aice láimhe,” “Seol chuig Fón,” agus “Comhroinn.” Cliceáil ar an deilbhín "Comhroinn" (saighead ghorm).

Sa chluaisín “Comhroinn” atá le feiceáil, cliceáil ar an táb “Embed a Map” (saighead ghorm sa ghrianghraf thuas).  

Sa chluaisín seo, feicfidh tú réamhamharc ar do ghiuirléid leabaithe Google Maps. Tá anuas méide ar thaobh clé an chóid (saighead ghlas) – is féidir leat méid réamhdhéanta a roghnú nó “Custom” a roghnú chun do mhéid féin a shocrú. Roghnóidh mé an rogha "Custom" (saighead dearg).

Anseo, feicfidh tú na toisí do mo léarscáil saincheaptha. Socróidh mé an airde, nó an chéad ghné, go 1200 (saighead dearg). Fágfaidh mé an leithead socraithe go 600. Is féidir leat “réamhamharc ar mhéid iarbhír” (saighead ghlas) a chliceáil chun an léarscáil a thaispeáint i bhfuinneog nua aníos ina lánmhéid (déan cinnte go ndíchumasaíonn tú aon bhacairí aníos má tá siad agat iompú air chun an fhuinneog a bhlocáil). Scoir amach as an bhfuinneog réamhamhairc nuair a bheidh tú críochnaithe.

Ansin, cliceáil ar an nasc “Cóipeáil HTML” (saighead ghorm). Seo é an cód a thabharfaimid isteach inár leathanach WordPress.

Céim 3: Greamaigh Cód HTML go Leathanach WordPress

Téigh ar ais chuig an táb brabhsálaí ina bhfuil do shuíomh Gréasáin WordPress. Cliceáil ar an mbloc HTML folamh ina ndeir sé “Scríobh HTML anseo…” agus greamaigh an cód (saighead dearg) trí ctrl+v a bhualadh ar do mhéarchlár (cmd+v ar mac).

Má chliceálann tú ar an rogha “Réamhamharc” sa Bhloc Uirlisí (saighead dearg), feicfidh tú anois do léarscáil ar taispeáint ar do leathanach (saighead ghlas). Cliceáil ar ais ar an rogha “HTML” chun filleadh ar an gcód HTML (saighead ghorm).

Tá ár léarscáil leabaithe ar ár leathanach, ach níl sé sofhreagrach - rud a chiallaíonn má fhéachaimid ar an léarscáil ar scáileán níos lú, cosúil le táibléad nó fón, ní athróidh sé a méid chun a bheith oiriúnach don scáileán. Chun é seo a shocrú, ní mór dúinn roinnt stílithe saincheaptha a chur leis an gcód HTML.

Céim 4: Déan Google Maps Sofhreagrach

beidh mé ag baint úsáide as cód a fuair mé ón suíomh Gréasáin seo chun leabú Google Maps a dhéanamh sofhreagrach. Scrollaigh síos go dtí an roinn dar teideal “Conas Google Maps a Leabú go Sofhreagrach” (saighead dearg). Ansin, scrollaigh síos go dtí an dara sraith de chód (saighead ghorm).

Cóipeáil gach rud ó “ ”  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).

Téigh ar ais chuig WordPress. Cliceáil do luch ag barr an chóid HTML chun an cód nua seo a chur isteach ag an tús (saighead dearg). Buail ctrl+v chun do chód a ghreamú.

Ar deireadh, cliceáil ag deireadh an chóid HTML (saighead dearg) agus clóscríobh “ ” gach rud a dhúnadh. Go bunúsach is é an rud a rinne tú díreach ná do chód HTML a fhilleadh i stíliú saincheaptha. Insíonn an stíliú seo do bhrabhsálaí an chuairteora an léarscáil a athrú bunaithe ar mhéid na fuinneoige ina bhfuil siad ag féachaint air.

Céim 5: Coigeartaigh an Cóimheas Gné den Léarscáil Idirghníomhach

Tá rud deireanach amháin le déanamh againn – scrollaigh ar ais go barr an chóid go dtí go bhfeiceann tú “stuáil-bun: 75%;” (saighead dearg). Tá cóimheas gné na léarscáile á chinneadh ag an bpíosa cód seo.

Toisc gur athraigh mé mo léarscáil go 1200 x 600, tá cóimheas gné 2:1 aige. Chun seo, ní mór dom an céatadán a athrú go "50%" (saighead dearg).

Mura bhfuil tú cinnte cén céatadán ba chóir duit a úsáid do do léarscáil, ní gá ach an cóimheas treoíochta (.i. 16:9) a ghlacadh agus roinn an dara uimhir ar an gcéad cheann chun do chéatadán a fháil (9 roinnte ar 16 ná 56.25%).

Cliceáil "Nuashonraigh" chun do chuid athruithe a chur i bhfeidhm (saighead ghorm san íomhá thuas), ansin cliceáil "Féach ar an Leathanach" sa chúinne ag bun ar chlé chun an toradh a fheiceáil.

Ba cheart duit do ghiuirléid Google Maps a fheiceáil ar taispeáint anois (saighead dearg san íomhá thuas).

Is féidir leat an freagrúlacht a thástáil trí mhéid do bhrabhsálaí a laghdú, ansin scrollaigh ar ais go dtí an limistéar den leathanach gréasáin ar a bhfuil an léarscáil.

Sin é don rang teagaisc seo! Má thaitin sé leat agus más mian leat a fháil amach conas do shuíomh Gréasáin WordPress gairmiúil féin a chruthú ón tús, is féidir leat clárú i mo shuíomh Gréasáin WordPress Simplithe: Cúrsa conas Láithreáin Ghréasáin Cumhachtacha a Thógáil ar Udemy, nó seiceáil amach mo cheann eile Ranganna teagaisc WordPress!

Nuachtlitir R-phoist Davies Media Design Aipeanna Cruthaitheacha In Aisce

Liostáil le Nuachtlitir DMD

Cláraigh chun ranganna teagaisc nua, nuashonruithe cúrsa, agus an nuacht is déanaí a fháil ar na haipeanna cruthaitheacha saor in aisce is fearr leat!

Tá tú tar éis Síntiús go Rathúil!

Bioráin sé ar Pinterest