Introduksjon

I denne artikkelen skal jeg vise deg hvordan du legger til et responsivt Google Maps-kart til en WordPress-nettside (dvs. for en kontaktside) uten å bruke en plugin. Jeg skal bruke WordPress 6.0 for denne opplæringen, samt Twenty Twenty Two-temaet, som er standardtemaet for denne versjonen av WordPress.

 Google Maps-funksjonen lar deg vise bedriftens posisjon på et interaktivt kart, slik at besøkende enkelt kan se hvor du befinner deg og samhandle med kartet for å se hva annet som er rundt deg, få veibeskrivelser osv. Det demonstrerer for besøkende på nettstedet. at du er en lokal bedrift og har en ekte, fysisk plassering. Det er veldig vanlig at bedrifter har et kart på kontaktsiden sin.

Det er tonnevis av Google Maps-plugins der ute, men mange av dem er klønete og krever enten betaling for alle plugin-funksjonene eller en Google Developer-konto med kompliserte trinn som gir et mindre enn ønskelig resultat.

Alt dette er sagt, det er en veldig enkel måte å legge til Google Maps på WordPress 6.0-sidene dine uten plugins og uten en haug med kompliserte trinn. La oss dykke ned i det.

Trinn 1: Lag en HTML-blokk

Naviger til kontaktsiden på nettstedet ditt ved å klikke på Sider i hovedmenyen for WP Admin

For det første, logg inn på administrasjonsområdet til WordPress-nettstedet ditt og naviger til "Sider"-delen (rød pil i bildet ovenfor).

Klikk på siden du vil legge til Google Maps-funksjonen din på (du kan klikke på sidenavnet, i mitt tilfelle "Kontakt" - blå pil i bildet ovenfor - eller ganske enkelt klikke "Rediger" under sidenavnet).

I blokkredigeringsprogrammet klikker du på Legg til blokk for å sette inn en ny blokk

Hvis du bruker et blokktema som Twenty Twenty Two, vil du nå være inne i Block Editor for siden din. Rull ned til stedet der du vil sette inn kartet.

Deretter klikker du på “+”-ikonet (“Block Inserter” – rød pil i bildet ovenfor) for å sette inn en blokk.

Velg gruppeblokken fra listen over tilgjengelige WordPress-blokker

Søk etter "Gruppe" i søkefeltet (skissert i grønt på bildet) og klikk for å legge til gruppeblokken (rød pil). Dette lar deg legge til noen tilpassede innstillinger til blokkelementet.

Klikk på justeringsikonet i blokkverktøylinjen og klikk på Full bredde

Klikk for eksempel på alternativet "Endre justering" (rød pil) og velg "Full bredde" (grønn pil). Dette vil gjøre bredden på blokken som skal inneholde vårt interaktive Google Maps-kart i full bredde.

Klikk på plussikonet for å legge til en ny blokk, søk deretter etter og klikk på HTML

Deretter klikker du på den store "+"-knappen inne i gruppen (rød pil på bildet ovenfor). Søk etter "HTML" i søkefeltet (skissert i grønt) og klikk på "Custom HTML"-blokken (blå pil).

Klikk på området i blokken som sier "Skriv HTML"

Du vil se at det nå står "Skriv html..." (rød pil). Det er her vi legger til kartet vårt.

WordPress forenklet: Hvordan bygge kraftige nettsteder-kurs av Davies Media Design

Trinn 2: Generer Google Maps Embed HTML

Vi må nå generere kartet vårt med Google Maps. For å gjøre dette, åpne en ny nettleserfane og naviger til Google.com hvis det ikke er standard søkenettleser.

Søk på Google etter adressen du vil bruke i Google Maps

Deretter skriver du inn adressen du vil vise på kartet. For dette eksemplet bruker jeg Empire State Building (rød pil). Du kan bruke bedriftens eksakte adresse for denne delen (dvs. gatenummer, gate, by, delstat og postnummer – eller hva du enn skriver for internasjonale adresser hvis du ikke er i USA).

Klikk på kartbildet som viser adressen du søkte på

Klikk på kartbildet som vises for adressen din på søkemotorresultatsiden (rød pil i bildet – denne vil enten være midt på siden eller til høyre, avhengig av om du har skrevet inn en adresse eller navnet på et sted, som jeg gjorde).

Klikk på Del-ikonet som vises i Google Maps-oppføringen

Adressen din vil nå vises som en markør på fullskjermskartet (rød pil i bildet ovenfor). Du vil også se flere ikoner under adressen eller tittelen til stedet du søkte. Disse ikonene inkluderer «Veibeskrivelse», «Lagre», «I nærheten», «Send til telefon» og «Del». Klikk på "Del"-ikonet (blå pil).

Klikk på fanen Bygg inn et kart og velg Egendefinert størrelse fra rullegardinmenyen

I "Del"-fanen som vises, klikk på "Bygg inn et kart"-fanen (blå pil på bildet ovenfor).  

I denne fanen vil du se en forhåndsvisning av den innebygde Google Maps-widgeten din. Det er en rullegardin for størrelse på venstre side av koden (grønn pil) – du kan velge en forhåndsdefinert størrelse eller velge "Egendefinert" for å angi din egen størrelse. Jeg velger "Egendefinert"-alternativet (rød pil).

Angi den egendefinerte størrelsen for den innebygde Google Maps-widgeten din, og klikk på Kopier HTML

Her ser du dimensjonene for det tilpassede kartet mitt. Jeg setter høyden, eller den første dimensjonen, til 1200 (rød pil). Jeg lar bredden være satt til 600. Du kan klikke "Forhåndsvis faktisk størrelse" (grønn pil) for å vise kartet i et nytt popup-vindu i full størrelse (pass på at du deaktiverer popup-blokkering hvis du har dem slått på for å unngå å blokkere vinduet). Gå ut av forhåndsvisningsvinduet når du er ferdig.

Klikk deretter på koblingen "Kopier HTML" (blå pil). Dette er koden vi tar med på WordPress-siden vår.

Trinn 3: Lim inn HTML-kode på WordPress-side

Lim inn Google Maps HTML-koden i HTML-blokken på nettstedet ditt

Naviger tilbake til nettleserfanen som inneholder WordPress-nettstedet ditt. Klikk på den tomme HTML-blokken der det står "Skriv HTML her ..." og lim inn koden (rød pil) ved å trykke ctrl+v på tastaturet (cmd+v på en mac).

Klikk på Forhåndsvisning-knappen for å forhåndsvise Google Maps-widgeten

Hvis du klikker på "Forhåndsvisning"-alternativet i blokkverktøylinjen (rød pil), vil du nå se kartet ditt vist på siden din (grønn pil). Klikk tilbake på "HTML"-alternativet for å gå tilbake til HTML-koden (blå pil).

Vi har kartet vårt innebygd på siden vår, men det er ikke responsivt – noe som betyr at hvis vi viser kartet på en mindre skjerm, som et nettbrett eller en telefon, vil det ikke justere størrelsen slik at den passer til skjermen. For å fikse dette, må vi legge til litt tilpasset stil i HTML-koden.

Trinn 4: Gjør Google Maps responsivt

Bruk den anbefalte koden for å gjøre Google Maps responsivt på WordPress-nettstedet ditt

Jeg skal være ved å bruke koden jeg fikk fra denne nettsiden for å gjøre Google Maps-innbyggingen responsiv. Rull ned til delen merket "Hvordan bygge inn Google Maps responsivt" (rød pil). Bla deretter ned til det andre settet med kode (blå pil).

Kopiér koden som vises på den angitte nettsiden for en responsiv Google Maps iframe

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).

Lim inn den responsive koden i HTML-blokken på nettstedet ditt

Naviger tilbake til WordPress. Klikk med musen helt foran HTML-koden for å sette inn denne nye koden i begynnelsen (rød pil). Trykk ctrl+v for å lime inn koden.

Legg til en avsluttende div-tag i HTML-en for å pakke inn Google Maps HTML-koden i en div

Til slutt klikker du helt på slutten av HTML-koden (rød pil) og skriver " " for å stenge alt. I utgangspunktet er det du nettopp gjorde, pakket inn HTML-koden din i tilpasset stil. Denne stilen forteller den besøkendes nettleser om å endre størrelsen på kartet basert på størrelsen på vinduet de ser det i.

Trinn 5: Juster sideforholdet til det interaktive kartet

Juster HTML-utfyllingskoden for Google Maps for å øke eller redusere utfyllingen

Det er en siste ting vi må gjøre – bla tilbake opp til toppen av koden til du ser "padding-bottom: 75%;" (rød pil). Denne kodebiten bestemmer sideforholdet til kartet.

Endre utfyllingskoden for Google Maps HTML, og klikk deretter på Oppdater-knappen for å lagre endringene

Fordi jeg endret størrelsen på kartet til 1200 x 600, har det et sideforhold på 2:1. For dette må jeg endre prosentandelen til "50%" (rød pil).

Hvis du ikke er sikker på hvilken prosentandel du bør bruke for kartet ditt, tar du bare sideforholdet (dvs. 16:9) og deler det andre tallet på det første for å få prosenten din (9 delt på 16 er 56.25%).

Klikk "Oppdater" for å bruke endringene (blå pil i bildet ovenfor), og klikk deretter "Vis side" nederst til venstre for å se resultatet.

Google Maps vises på en WordPress-nettside uten en plugin

Du skal nå se Google Maps-widgeten din (rød pil i bildet ovenfor).

Responsiv WordPress Google Maps-kode tilpasser seg størrelsen på enheten din

Du kan teste responsen ved å krympe størrelsen på nettleseren din, og deretter rulle tilbake til området på nettsiden som har kartet.

Det var alt for denne opplæringen! Hvis du likte det og vil lære hvordan du lager ditt eget profesjonelle WordPress-nettsted fra bunnen av, kan du melde deg på min WordPress forenklet: Hvordan bygge kraftige nettsteder-kurs på Udemy, eller sjekk ut min andre WordPress-opplæringsprogrammer!

Davies Media Design Gratis kreative apper Nyhetsbrev på e-post

Abonner på DMD-nyhetsbrevet

Registrer deg for å motta nye opplæringsprogrammer, kursoppdateringer og de siste nyhetene om dine favoritt gratis kreative apper!

Du har abonnert!