Selles artiklis näitan teile, kuidas lisada WordPressi veebilehele (st kontaktilehe jaoks) tundlik Google Mapsi kaart ilma pistikprogrammi kasutamata. Selle õpetuse jaoks kasutan WordPress 6.0 ja teemat Twenty Twenty Two, mis on selle WordPressi versiooni vaiketeema.

 Google Mapsi funktsioon võimaldab teil kuvada oma ettevõtte asukohta interaktiivsel kaardil, võimaldades saidi külastajatel hõlpsasti vaadata teie asukohta ja kaardiga suhelda, et näha, mis veel teie ümber on, saada juhiseid jne. See näitab saidi külastajatele. et olete kohalik ettevõte ja teil on tõeline füüsiline asukoht. Väga tavaline on, et ettevõtetel on kontaktide lehel kaart.

Seal on palju Google Mapsi pistikprogramme, kuid paljud neist on kohmakad ja nõuavad kas pistikprogrammi täielike funktsioonide eest tasu või Google'i arendajakontot koos keeruliste sammudega, mis annavad vähem soovitava tulemuse.

Seda kõike arvestades on olemas väga lihtne viis lisada Google Maps oma WordPress 6.0 lehtedele ilma pistikprogrammideta ja ilma hunniku keeruliste sammudeta. Sukeldume sellesse.

1. samm: looge HTML-i blokk

Alustuseks logige sisse oma WordPressi saidi administraatorialale ja liikuge jaotisse „Lehed” (ülaloleval pildil punane nool).

Klõpsake lehel, millele soovite oma Google Mapsi funktsiooni lisada (võite klõpsata lehe nimel, minu puhul „Kontakt” – sinine nool ülaloleval pildil – või lihtsalt klõpsata lehe nime all „Muuda”).

Kui kasutate plokkiteema, näiteks Twenty Twenty Two, olete nüüd oma lehe plokiredaktoris. Kerige alla asukohani, kuhu soovite oma kaardi sisestada.

Järgmisena klõpsake ploki sisestamiseks ikooni "+" ("Block Inserter" - punane nool ülaloleval pildil).

Otsige otsinguväljalt "Grupp" (fotol roheliselt joonistatud) ja klõpsake rühmaploki lisamiseks (punane nool). See võimaldab teil lisada plokielemendile mõned kohandatud sätted.

Näiteks klõpsake valikul "Muuda joondust" (punane nool) ja valige "Täislaius" (roheline nool). See muudab meie Google Mapsi interaktiivset kaarti sisaldava ploki laiuseks täislaiuse.

Järgmisena klõpsake rühma sees suurt "+" nuppu (ülaloleval fotol punane nool). Otsige otsinguribal (rohelise joonega) sõna „HTML” ja klõpsake plokil „Kohandatud HTML” (sinine nool).

Näete nüüd teksti "Kirjutage html..." (punane nool). Siia lisame oma kaardi.

2. samm: looge Google Mapsi manustatud HTML

Peame nüüd oma kaardi Google Mapsi abil looma. Selleks avage uus brauseri vahekaart ja navigeerige saidile Google.com, kui see pole teie vaikeotsingubrauser.

Järgmisena tippige aadress, mida soovite kaardil kuvada. Selle näite puhul kasutan Empire State Buildingut (punane nool). Selle osa jaoks võite kasutada oma ettevõtte täpset aadressi (st tänavanumbrit, tänavat, linna, osariiki ja sihtnumbrit – või mida iganes sisestate rahvusvaheliste aadresside jaoks, kui te ei asu USA-s).

Klõpsake otsingumootori tulemuste lehel teie aadressi jaoks kuvatavat kaardipilti (punane nool pildil – see on kas lehe keskel või paremal pool, olenevalt sellest, kas sisestasite aadressi või nime koht, nagu mina).

Teie aadress kuvatakse nüüd täisekraanikaardil markerina (punane nool ülaloleval pildil). Samuti näete mitut ikooni otsitud koha aadressi või pealkirja all. Nende ikoonide hulka kuuluvad „Juhised“, „Salvesta“, „Läheduses“, „Saada telefoni“ ja „Jaga“. Klõpsake ikooni "Jaga" (sinine nool).

Ilmuval vahekaardil „Jaga” klõpsake vahekaarti „Manusta kaart” (ülaloleval fotol sinine nool).  

Sellel vahekaardil näete oma manustatud Google Mapsi vidina eelvaadet. Koodi vasakus servas on suuruse rippmenüü (roheline nool) – saate valida valmis suuruse või valida oma suuruse määramiseks "Kohandatud". Ma valin valiku „Kohandatud” (punane nool).

Siin näete minu kohandatud kaardi mõõtmeid. Sean kõrguseks ehk esimeseks mõõtmeks 1200 (punane nool). Jätan laiuseks 600. Kaardi kuvamiseks uues hüpikaknas täissuuruses võite klõpsata valikul „Tegeliku suuruse eelvaade” (roheline nool) (kui teil on hüpikakende blokeerijad kindlasti keelatud sisse lülitatud, et vältida akna blokeerimist). Kui olete lõpetanud, väljuge eelvaate aknast.

Järgmisena klõpsake linki „Kopeeri HTML” (sinine nool). See on kood, mille toome oma WordPressi lehele.

3. samm: kleepige HTML-kood WordPressi lehele

Liikuge tagasi brauseri vahekaardile, mis sisaldab teie WordPressi veebisaiti. Klõpsake tühjal HTML-i plokil, kus on kirjas "Kirjutage HTML siia…" ja kleepige kood (punane nool), vajutades klaviatuuril ctrl+v (maci puhul cmd+v).

Kui klõpsate blokeerimistööriistaribal valikul Eelvaade (punane nool), näete nüüd oma lehel oma kaarti (roheline nool). HTML-koodi juurde naasmiseks klõpsake suvandil „HTML” tagasi (sinine nool).

Meie kaart on meie lehele manustatud, kuid see ei reageeri – see tähendab, et kui vaatame kaarti väiksemal ekraanil, näiteks tahvelarvutis või telefonis, ei kohanda see oma suurust ekraanile sobivaks. Selle parandamiseks peame HTML-koodile lisama kohandatud stiili.

4. samm: muutke Google Maps tundlikuks

ma olen kasutades sellelt veebisaidilt saadud koodi et muuta Google Mapsi manustamine tundlikuks. Kerige alla jaotiseni „Kuidas Google Mapsi reageerivalt manustada” (punane nool). Seejärel kerige alla teise koodikomplektini (sinine nool).

Kopeeri kõik saidilt " ”  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).

Liikuge tagasi WordPressi juurde. Uue koodi algusesse sisestamiseks (punane nool) klõpsake hiirega HTML-koodi esiosas. Koodi kleepimiseks vajutage klahvikombinatsiooni ctrl+v.

Lõpuks klõpsake HTML-koodi lõpus (punane nool) ja tippige " ” et kõik sulgeda. Põhimõtteliselt pakkisite HTML-koodi kohandatud stiili. See stiil annab külastaja brauserile käsu kaardi suurust muuta vastavalt selle akna suurusele, milles nad seda vaatavad.

5. samm: reguleerige interaktiivse kaardi kuvasuhet

Peame tegema veel ühe asja – kerige tagasi koodi ülaossa, kuni näete teksti "polster-alumine: 75%;" (punane nool). See koodiosa määrab kaardi kuvasuhte.

Kuna muutsin oma kaardi suuruseks 1200 x 600, on selle kuvasuhe 2:1. Selleks pean muutma protsendi väärtuseks "50%" (punane nool).

Kui te pole kindel, millist protsenti peaksite oma kaardi jaoks kasutama, võtke lihtsalt kuvasuhe (st 16:9) ja jagage protsendi saamiseks teine ​​arv esimesega (9 jagatud 16-ga on 56.25%).

Muudatuste rakendamiseks klõpsake nuppu "Värskenda" (sinine nool ülaloleval pildil), seejärel klõpsake tulemuste vaatamiseks vasakus alanurgas nuppu "Kuva leht".

Nüüd peaksite nägema oma Google Mapsi vidinat (ülaloleval pildil punane nool).

Saate testida reageerimisvõimet, vähendades oma brauseri suurust ja kerides seejärel tagasi veebilehe piirkonda, kus on kaart.

Selle õpetuse jaoks on kõik! Kui teile see meeldis ja soovite õppida, kuidas luua nullist oma professionaalne WordPressi veebisait, võite registreeruda minu WordPress 6.0 mittekodeerijatele kursus Udemys, või vaadake minu teisi õpetusi!

Pin See Pinterest