I denne artikel vil jeg vise dig, hvordan du tilføjer et responsivt Google Maps-kort til en WordPress-webside (dvs. til en kontaktside) uden at bruge et plugin. Jeg vil bruge WordPress 6.0 til denne tutorial, såvel som Twenty Twenty Two-temaet, som er standardtemaet for denne version af WordPress.
Google Maps-funktionen giver dig mulighed for at vise din virksomheds placering på et interaktivt kort, så besøgende nemt kan se, hvor du befinder dig og interagere med kortet for at se, hvad der ellers er omkring dig, få rutevejledning osv. Det demonstrerer for besøgende på webstedet. at du er en lokal virksomhed og har en reel, fysisk placering. Det er meget almindeligt, at virksomheder har et kort på deres kontaktside.
Der er tonsvis af Google Maps-plugins derude, men mange af dem er klodsede og kræver enten betaling for de fulde plugin-funktioner eller en Google Developer-konto med komplicerede trin, der giver et mindre end ønskeligt resultat.
Når alt dette er sagt, er der en virkelig enkel måde at tilføje Google Maps til dine WordPress 6.0-sider uden plugins og uden en masse komplicerede trin. Lad os dykke ned i det.
Trin 1: Opret en HTML-blok
For det første skal du logge ind på administrationsområdet på dit WordPress-websted og navigere til afsnittet "Sider" (rød pil på billedet ovenfor).
Klik på den side, du vil tilføje din Google Maps-funktion til (du kan klikke på sidenavnet, i mit tilfælde "Kontakt" - blå pil i ovenstående billede - eller blot klikke på "Rediger" under sidenavnet).
Hvis du bruger et bloktema som Twenty Twenty Two, vil du nu være inde i blokeditoren til din side. Rul ned til den placering, hvor du vil indsætte dit kort.
Klik derefter på "+"-ikonet ("Blokindsætteren" - rød pil på billedet ovenfor) for at indsætte en blok.
Søg efter "Gruppe" i søgefeltet (markeret med grønt på billedet), og klik for at tilføje gruppeblokken (rød pil). Dette giver dig mulighed for at tilføje nogle brugerdefinerede indstillinger til blokelementet.
Klik f.eks. på indstillingen "Skift justering" (rød pil) og vælg "Fuld bredde" (grøn pil). Dette vil gøre bredden af den blok, der skal indeholde vores interaktive Google Maps-kort, i fuld bredde.
Klik derefter på den store "+"-knap inde i gruppen (rød pil på billedet ovenfor). Søg efter "HTML" i søgefeltet (markeret med grønt), og klik på "Custom HTML"-blokken (blå pil).
Du vil nu se, at der står "Skriv html..." (rød pil). Det er her, vi tilføjer vores kort.
Trin 2: Generer Google Maps Embed HTML
Vi bliver nu nødt til at generere vores kort med Google Maps. For at gøre dette skal du åbne en ny browserfane og navigere til Google.com, hvis det ikke er din standardsøgebrowser.
Indtast derefter den adresse, du vil have vist på dit kort. Til dette eksempel vil jeg bruge Empire State Building (rød pil). Du kan bruge din virksomheds nøjagtige adresse til denne del (dvs. vejnummer, gade, by, stat og postnummer – eller hvad du nu indtaster for internationale adresser, hvis du ikke er i USA).
Klik på kortbilledet, der vises for din adresse på søgemaskinens resultatside (rød pil i billedet – denne vil enten være midt på siden eller ude til højre, afhængigt af om du har indtastet en adresse eller navnet på et sted, som jeg gjorde).
Din adresse vises nu som en markør på fuldskærmskortet (rød pil på billedet ovenfor). Du vil også se flere ikoner under adressen eller titlen på det sted, du søgte. Disse ikoner inkluderer "Rutevejledning", "Gem", "I nærheden", "Send til telefon" og "Del". Klik på "Del"-ikonet (blå pil).
På fanen "Del", der vises, skal du klikke på fanen "Integrer et kort" (blå pil på billedet ovenfor).
På denne fane kan du se en forhåndsvisning af din indlejrede Google Maps-widget. Der er en størrelse dropdown i venstre side af koden (grøn pil) – du kan vælge en forudlavet størrelse eller vælge "Custom" for at indstille din egen størrelse. Jeg vælger indstillingen "Brugerdefineret" (rød pil).
Her kan du se dimensionerne for mit brugerdefinerede kort. Jeg indstiller højden eller den første dimension til 1200 (rød pil). Jeg lader bredden være indstillet til 600. Du kan klikke på "Vis faktisk størrelse" (grøn pil) for at vise kortet i et nyt pop op-vindue i fuld størrelse (sørg for at deaktivere pop-up-blokkere, hvis du har dem tændt for at undgå at blokere vinduet). Gå ud af forhåndsvisningsvinduet, når du er færdig.
Klik derefter på linket "Kopier HTML" (blå pil). Dette er den kode, vi bringer ind på vores WordPress-side.
Trin 3: Indsæt HTML-kode til WordPress-side
Naviger tilbage til browserfanen, der indeholder dit WordPress-websted. Klik på den tomme HTML-blok, hvor der står "Skriv HTML her...", og indsæt koden (rød pil) ved at trykke på ctrl+v på dit tastatur (cmd+v på en mac).
Hvis du klikker på "Preview"-indstillingen i blokværktøjslinjen (rød pil), vil du nu se dit kort vist på din side (grøn pil). Klik tilbage på "HTML"-indstillingen for at vende tilbage til HTML-koden (blå pil).
Vi har vores kort indlejret på vores side, men det er ikke responsivt – hvilket betyder, at hvis vi ser kortet på en mindre skærm, som en tablet eller en telefon, vil det ikke justere størrelsen, så den passer til skærmen. For at løse dette skal vi tilføje noget brugerdefineret styling til HTML-koden.
Trin 4: Gør Google Maps responsivt
jeg vil være ved hjælp af kode, jeg fik fra denne hjemmeside for at gøre Google Maps-indlejringen responsiv. Rul ned til sektionen mærket "Sådan integrerer du Google Maps responsivt" (rød pil). Rul derefter ned til det andet sæt kode (blå pil).
Kopier alt fra " ” 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).
Naviger tilbage til WordPress. Klik med musen helt forrest i HTML-koden for at indsætte denne nye kode i begyndelsen (rød pil). Tryk på ctrl+v for at indsætte din kode.
Klik til sidst i HTML-koden (rød pil) og skriv " ” for at lukke alt af. Dybest set, hvad du lige har gjort, er at indpakke din HTML-kode i tilpasset stil. Denne styling fortæller den besøgendes browser at ændre størrelsen på kortet baseret på størrelsen af det vindue, de ser det i.
Trin 5: Juster billedformatet for det interaktive kort
Der er en sidste ting, vi skal gøre – rul tilbage op til toppen af koden, indtil du ser "padding-bottom: 75%;" (rød pil). Dette stykke kode bestemmer billedformatet på kortet.
Fordi jeg ændrede størrelsen på mit kort til 1200 x 600, har det et billedformat på 2:1. Til dette skal jeg ændre procentdelen til "50%" (rød pil).
Hvis du ikke er sikker på, hvilken procentdel du skal bruge til dit kort, skal du blot tage billedformatet (dvs. 16:9) og dividere det andet tal med det første for at få din procentdel (9 divideret med 16 er 56.25%).
Klik på "Opdater" for at anvende dine ændringer (blå pil i billedet ovenfor), og klik derefter på "Vis side" i nederste venstre hjørne for at se resultatet.
Du bør nu se din Google Maps-widget vist (rød pil i ovenstående billede).
Du kan teste reaktionsevnen ved at formindske størrelsen på din browser og derefter rulle tilbage til det område af websiden, der har kortet.
Det var det for denne tutorial! Hvis du kunne lide det og vil lære at lave din egen professionelle WordPress hjemmeside fra bunden, kan du tilmelde dig min WordPress 6.0 for Non-Coders kursus på Udemy, eller se mine andre tutorials!
