Në këtë artikull, unë do t'ju tregoj se si të shtoni një hartë të përgjegjshme të Google Maps në një uebfaqe të WordPress (p.sh. për një faqe Kontakti) pa përdorur një shtesë. Do të përdor WordPress 6.0 për këtë tutorial, si dhe temën Twenty Twenty Two, e cila është tema e paracaktuar për këtë version të WordPress.
Veçoria Google Maps ju lejon të shfaqni vendndodhjen e biznesit tuaj në një hartë interaktive, duke i lejuar vizitorët e sajtit të shohin me lehtësi vendin ku ndodheni dhe të ndërveprojnë me hartën për të parë se çfarë tjetër ka rreth jush, për të marrë udhëzime, etj. Kjo u tregon vizitorëve të sajtit që ju jeni një biznes lokal dhe keni një vendndodhje reale fizike. Është shumë e zakonshme që bizneset të kenë një hartë në faqen e tyre të kontaktit.
Ka mijëra shtojca Google Maps atje, por shumë prej tyre janë të ngathët dhe kërkojnë ose pagesë për veçoritë e plota të shtojcave ose një llogari Google Developer me hapa të ndërlikuar që prodhojnë një rezultat më pak se të dëshirueshëm.
E gjithë kjo duke u thënë, ekziston një mënyrë vërtet e thjeshtë për të shtuar Google Maps në faqet tuaja WordPress 6.0 pa shtojca dhe pa një mori hapash të ndërlikuar. Le të zhytemi në të.
Hapi 1: Krijoni një bllok HTML
Për fillestarët, identifikohuni në zonën e administratorit të faqes suaj të WordPress dhe lundroni në seksionin "Faqet" (shigjeta e kuqe në imazhin e mësipërm).
Klikoni në faqen ku dëshironi të shtoni veçorinë tuaj të Google Maps (mund të klikoni mbi emrin e faqes, në rastin tim "Kontakt" - shigjeta blu në imazhin e mësipërm - ose thjesht klikoni "Ndrysho" nën emrin e faqes).
Nëse jeni duke përdorur një temë blloku si Twenty Twenty Two, tani do të jeni brenda Redaktorit të Bllokut për faqen tuaj. Lëvizni poshtë në vendndodhjen ku dëshironi të futni hartën tuaj.
Më pas, klikoni ikonën "+" ("Futësi i bllokut" - shigjeta e kuqe në imazhin e mësipërm) për të futur një bllok.
Kërkoni "Group" në fushën e kërkimit (të përshkruara në të gjelbër në foto) dhe klikoni për të shtuar bllokun e grupit (shigjeta e kuqe). Kjo do t'ju lejojë të shtoni disa cilësime të personalizuara në elementin e bllokut.
Për shembull, klikoni në opsionin "Ndrysho shtrirjen" (shigjeta e kuqe) dhe zgjidhni "Gjerësia e plotë" (shigjeta jeshile). Kjo do të bëjë që gjerësia e bllokut që do të përmbajë hartën tonë interaktive të Google Maps në gjerësi të plotë.
Më pas, klikoni butonin e madh "+" brenda grupit (shigjeta e kuqe në foton e mësipërme). Kërkoni për "HTML" në shiritin e kërkimit (të përshkruar në të gjelbër) dhe klikoni në bllokun "Custom HTML" (shigjeta blu).
Do të shihni se tani thotë "Shkruaj html..." (shigjeta e kuqe). Këtu do të shtojmë hartën tonë.
Hapi 2: Gjeneroni Google Maps Embed HTML
Tani do të na duhet të gjenerojmë hartën tonë me Google Maps. Për ta bërë këtë, hapni një skedë të re të shfletuesit dhe lundroni te Google.com nëse nuk është shfletuesi juaj i paracaktuar i kërkimit.
Më pas, shkruani adresën që dëshironi të shfaqni në hartën tuaj. Për këtë shembull, unë do të përdor Empire State Building (shigjeta e kuqe). Ju mund të përdorni adresën e saktë të biznesit tuaj për këtë pjesë (p.sh. numrin e rrugës, rrugën, qytetin, shtetin dhe kodin postar - ose çfarëdo që shkruani për adresat ndërkombëtare nëse nuk jeni në SHBA).
Klikoni në imazhin e hartës që shfaqet për adresën tuaj në faqen e rezultateve të motorit të kërkimit (shigjeta e kuqe në imazh - kjo do të jetë ose në mes të faqes ose në të djathtë, në varësi të faktit nëse keni shkruar një adresë ose emrin e një vend, siç bëra unë).
Adresa juaj tani do të shfaqet si një shënues në hartën e ekranit të plotë (shigjeta e kuqe në imazhin e mësipërm). Do të shihni gjithashtu disa ikona nën adresën ose titullin e vendit që keni kërkuar. Këto ikona përfshijnë "Udhëzimet", "Ruaj", "Në afërsi", "Dërgo në telefon" dhe "Ndaj". Klikoni në ikonën "Share" (shigjeta blu).
Në skedën "Share" që shfaqet, klikoni në skedën "Embed a Map" (shigjeta blu në foton e mësipërme).
Në këtë skedë, do të shihni një pamje paraprake të miniaplikacionit tuaj të integruar të Google Maps. Ekziston një zbritje e madhësisë në anën e majtë të kodit (shigjeta jeshile) - mund të zgjidhni një madhësi të përgatitur paraprakisht ose zgjidhni "Custom" për të vendosur madhësinë tuaj. Do të zgjedh opsionin "Custom" (shigjeta e kuqe).
Këtu do të shihni dimensionet për hartën time të personalizuar. Do ta vendos lartësinë, ose dimensionin e parë, në 1200 (shigjeta e kuqe). Unë do ta lë gjerësinë të caktuar në 600. Mund të klikoni "Parashikoni madhësinë aktuale" (shigjeta jeshile) për të shfaqur hartën në një dritare të re kërcyese në madhësi të plotë (sigurohuni që të çaktivizoni çdo bllokues të dritareve kërcyese nëse i keni ndezur për të shmangur bllokimin e dritares). Dilni nga dritarja e shikimit paraprak pasi të keni mbaruar.
Më pas, klikoni lidhjen "Kopjo HTML" (shigjeta blu). Ky është kodi që do të sjellim në faqen tonë të WordPress.
Hapi 3: Ngjitni kodin HTML në faqen e WordPress
Kthehuni përsëri në skedën e shfletuesit që përmban faqen tuaj të internetit të WordPress. Klikoni në bllokun e zbrazët HTML ku thotë "Shkruaj HTML këtu..." dhe ngjisni kodin (shigjetën e kuqe) duke shtypur ctrl+v në tastierën tuaj (cmd+v në mac).
Nëse klikoni opsionin "Paraafishimi" në shiritin e veglave të bllokimit (shigjeta e kuqe), tani do të shihni hartën tuaj të shfaqur në faqen tuaj (shigjeta jeshile). Klikoni përsëri në opsionin "HTML" për t'u kthyer në kodin HTML (shigjeta blu).
Ne e kemi hartën tonë të ngulitur në faqen tonë, por nuk është reaguese – do të thotë nëse e shohim hartën në një ekran më të vogël, si tabletë ose telefon, ajo nuk do të rregullojë madhësinë e saj për t'iu përshtatur ekranit. Për ta rregulluar këtë, ne duhet të shtojmë disa stilime të personalizuara në kodin HTML.
Hapi 4: Bëni Google Maps të përgjegjshme
Unë do të jem duke përdorur kodin që kam marrë nga kjo faqe interneti për ta bërë të përgjegjshme embed-in e Google Maps. Lëvizni poshtë në seksionin e emërtuar "Si të futni Google Maps në mënyrë të përgjegjshme" (shigjeta e kuqe). Më pas, lëvizni poshtë te grupi i dytë i kodit (shigjeta blu).
Kopjoni gjithçka nga " ” 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).
Kthehuni përsëri te WordPress. Klikoni miun në pjesën e përparme të kodit HTML për të futur këtë kod të ri në fillim (shigjeta e kuqe). Shtypni ctrl+v për të ngjitur kodin tuaj.
Më në fund, klikoni në fund të kodit HTML (shigjeta e kuqe) dhe shkruani " ” për të mbyllur gjithçka. Në thelb ajo që sapo bëtë është mbështjellë kodin tuaj HTML me një stil të personalizuar. Ky stil i thotë shfletuesit të vizitorit të ndryshojë përmasat e hartës bazuar në madhësinë e dritares në të cilën po e shikojnë.
Hapi 5: Rregulloni raportin e pamjes së hartës interaktive
Është një gjë e fundit që duhet të bëjmë – lëvizni përsëri lart në krye të kodit derisa të shihni "mbushje-fund: 75%;" (shigjeta e kuqe). Kjo pjesë e kodit po përcakton raportin e pamjes së hartës.
Për shkak se e ndryshova përmasat e hartës sime në 1200 x 600, ajo ka një raport pamjeje 2:1. Për këtë, më duhet të ndryshoj përqindjen në "50%" (shigjeta e kuqe).
Nëse nuk jeni të sigurt se çfarë përqindje duhet të përdorni për hartën tuaj, thjesht merrni raportin e pamjes (dmth. 16:9) dhe pjesëtoni numrin e dytë me të parin për të marrë përqindjen tuaj (9 pjesëtuar me 16 është 56.25%).
Klikoni "Përditëso" për të aplikuar ndryshimet tuaja (shigjeta blu në imazhin e mësipërm), më pas kliko "Shiko faqen" në këndin e poshtëm majtas për të parë rezultatin.
Tani duhet të shihni të shfaqur miniaplikacionin tuaj të Google Maps (shigjeta e kuqe në imazhin e mësipërm).
Mund të provoni përgjegjshmërinë duke zvogëluar madhësinë e shfletuesit tuaj dhe më pas duke u kthyer në zonën e faqes së internetit që ka hartën.
Kjo është ajo për këtë tutorial! Nëse ju pëlqeu dhe dëshironi të mësoni se si të krijoni faqen tuaj profesionale të WordPress nga e para, mund të regjistroheni në faqen time WordPress 6.0 për kursin jo-kodues në Udemy, ose shikoni mësimet e mia të tjera!
