Tässä artikkelissa näytän sinulle, kuinka voit lisätä reagoivan Google Maps -kartan WordPress-verkkosivulle (eli yhteystietosivulle) ilman laajennusta. Käytän tässä opetusohjelmassa WordPress 6.0:aa sekä Twenty Twenty Two -teemaa, joka on tämän WordPress-version oletusteema.

 Google Maps -ominaisuuden avulla voit näyttää yrityksesi sijainnin interaktiivisella kartalla, jolloin sivuston vierailijat voivat helposti nähdä sijaintisi ja olla vuorovaikutuksessa kartan kanssa nähdäkseen, mitä muuta ympärilläsi on, saada reittiohjeita jne. Se näyttää sivuston vierailijoille että olet paikallinen yritys ja sinulla on todellinen fyysinen sijainti. On hyvin yleistä, että yrityksillä on yhteystietosivullaan kartta.

Siellä on paljon Google Maps -laajennuksia, mutta monet niistä ovat kömpelöitä ja vaativat joko maksun kaikista laajennuksen ominaisuuksista tai Google-kehittäjätilin monimutkaisista vaiheista, jotka tuottavat vähemmän toivottavaa tulosta.

Kaiken tämän jälkeen on olemassa todella yksinkertainen tapa lisätä Google Maps WordPress 6.0 -sivuillesi ilman laajennuksia ja ilman monimutkaisia ​​vaiheita. Sukellaanpa siihen.

Sisällysluettelo

Vaihe 1: Luo HTML-lohko

Ensinnäkin kirjaudu sisään WordPress-sivustosi järjestelmänvalvoja-alueelle ja siirry "Sivut" -osioon (punainen nuoli yllä olevassa kuvassa).

Napsauta sivua, jolle haluat lisätä Google Maps -ominaisuuden (voit napsauttaa sivun nimeä, minun tapauksessani "Ota yhteyttä" - sininen nuoli yllä olevassa kuvassa - tai yksinkertaisesti klikata "Muokkaa" sivun nimen alla).

Jos käytät lohkoteemaa, kuten Twenty Twenty Two, olet nyt sivusi lohkoeditorissa. Vieritä alas kohtaan, johon haluat lisätä kartan.

Napsauta seuraavaksi "+" -kuvaketta ("Block Inserter" - punainen nuoli yllä olevassa kuvassa) lisätäksesi lohkon.

Etsi hakukentästä "Ryhmä" (viivattu vihreällä kuvassa) ja napsauta lisätäksesi ryhmälohkon (punainen nuoli). Tämän avulla voit lisätä joitain mukautettuja asetuksia lohkoelementtiin.

Napsauta esimerkiksi "Change Alignment" -vaihtoehtoa (punainen nuoli) ja valitse "Full Width" (vihreä nuoli). Tämä tekee lohkon leveydestä, joka sisältää interaktiivisen Google Maps -kartan, koko leveyden.

Napsauta seuraavaksi suurta "+" -painiketta ryhmän sisällä (punainen nuoli yllä olevassa kuvassa). Etsi hakupalkista "HTML" (vihreä) ja napsauta "Muokattu HTML" -lohkoa (sininen nuoli).

Näet nyt tekstin "Kirjoita html…" (punainen nuoli). Tähän lisäämme karttamme.

Yksinkertaistettu WordPress: Tehokkaiden verkkosivustojen rakentaminen Davies Media Designin kurssi

Vaihe 2: Luo Google Maps Embed HTML

Meidän on nyt luotava karttamme Google Mapsin avulla. Voit tehdä tämän avaamalla uuden selaimen välilehden ja siirtymällä osoitteeseen Google.com, jos se ei ole oletushakuselaimesi.

Kirjoita seuraavaksi osoite, jonka haluat näyttää kartallasi. Tässä esimerkissä käytän Empire State Buildingia (punainen nuoli). Voit käyttää tässä osassa yrityksesi tarkkaa osoitetta (eli katunumeroa, katua, kaupunkia, osavaltiota ja postinumeroa – tai mitä tahansa kirjoitat kansainvälisiä osoitteita varten, jos et ole Yhdysvalloissa).

Napsauta karttakuvaa, joka näkyy osoitteesi kohdalla Hakukoneen tulossivulla (punainen nuoli kuvassa – tämä on joko sivun keskellä tai oikealla sen mukaan, kirjoititko osoitteen vai paikka, kuten tein).

Osoitteesi näkyy nyt merkinnänä koko näytön kartalla (punainen nuoli yllä olevassa kuvassa). Näet myös useita kuvakkeita etsimäsi paikan osoitteen tai otsikon alla. Näitä kuvakkeita ovat "Reittiohjeet", "Tallenna", "Lähellä", "Lähetä puhelimeen" ja "Jaa". Napsauta "Jaa" -kuvaketta (sininen nuoli).

Napsauta näkyviin tulevassa "Jaa" -välilehdessä "Upota kartta" -välilehteä (sininen nuoli yllä olevassa kuvassa).  

Tässä välilehdessä näet upotetun Google Maps -widgetin esikatselun. Koodin vasemmalla puolella on koon pudotusvalikko (vihreä nuoli) – voit valita valmiin koon tai valita "Custom" asettaaksesi oman kokosi. Valitsen "Custom"-vaihtoehdon (punainen nuoli).

Täällä näet mukautetun karttani mitat. Asetan korkeudeksi eli ensimmäiseksi mittasuhteeksi 1200 (punainen nuoli). Jätän leveydeksi 600. Voit napsauttaa "Esikatsele todellista kokoa" (vihreä nuoli) näyttääksesi kartan uudessa ponnahdusikkunassa täysikokoisena (varmista, että poistat ponnahdusikkunoiden estotoiminnot käytöstä, jos sinulla on niitä kytketty päälle, jotta ikkuna ei tukkiisi). Poistu esikatseluikkunasta, kun olet valmis.

Napsauta seuraavaksi "Kopioi HTML" -linkkiä (sininen nuoli). Tämä on koodi, jonka tuomme WordPress-sivullemme.

Vaihe 3: Liitä HTML-koodi WordPress-sivulle

Siirry takaisin selaimen välilehteen, joka sisältää WordPress-verkkosivustosi. Napsauta tyhjää HTML-lohkoa, jossa lukee "Kirjoita HTML tähän…" ja liitä koodi (punainen nuoli) painamalla näppäimistön ctrl+v (cmd+v Macissa).

Jos napsautat Estä-työkalupalkin Esikatselu-vaihtoehtoa (punainen nuoli), näet nyt karttasi sivullasi (vihreä nuoli). Napsauta takaisin HTML-vaihtoehtoa palataksesi HTML-koodiin (sininen nuoli).

Karttamme on upotettu sivullemme, mutta se ei ole responsiivinen – eli jos katsomme karttaa pienemmällä näytöllä, kuten tabletilla tai puhelimella, se ei säädä sen kokoa näytölle sopivaksi. Tämän korjaamiseksi meidän on lisättävä HTML-koodiin mukautettua tyyliä.

Vaihe 4: Tee Google Mapsista reagoiva

Tulen käyttäen koodia, jonka sain tältä sivustolta tehdäksesi Google Maps -upotuksesta responsiivisen. Vieritä alas kohtaan "Google Mapsin upottaminen reagoivasti" (punainen nuoli). Vieritä sitten alas toiseen koodisarjaan (sininen nuoli).

Kopioi kaikki kohteesta " ”  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).

Siirry takaisin WordPressiin. Napsauta hiirtä HTML-koodin etuosassa lisätäksesi tämän uuden koodin alkuun (punainen nuoli). Liitä koodi painamalla ctrl+v.

Napsauta lopuksi HTML-koodin lopusta (punainen nuoli) ja kirjoita " ”sulkeaksesi kaiken. Pohjimmiltaan juuri teit HTML-koodisi mukautetun tyylin käärimisen. Tämä tyyli käskee vierailijan selaimen muuttamaan kartan kokoa sen ikkunan koon perusteella, jossa he katselevat sitä.

Vaihe 5: Säädä interaktiivisen kartan kuvasuhdetta

Vielä yksi asia, joka meidän on tehtävä – vieritä takaisin ylös koodin yläosaan, kunnes näet tekstin "täyttö-ala: 75%;" (punainen nuoli). Tämä koodinpätkä määrittää kartan kuvasuhteen.

Koska muutin karttani kokoon 1200 x 600, sen kuvasuhde on 2:1. Tätä varten minun on muutettava prosenttiosuudeksi "50%" (punainen nuoli).

Jos et ole varma, mitä prosenttiosuutta sinun pitäisi käyttää kartassasi, ota kuvasuhde (eli 16:9) ja jaa toinen luku ensimmäisellä saadaksesi prosenttiosuutesi (9 jaettuna 16:lla on 56.25 %).

Napsauta "Päivitä" ottaaksesi muutokset käyttöön (sininen nuoli yllä olevassa kuvassa) ja napsauta sitten "Näytä sivu" vasemmassa alakulmassa nähdäksesi tulokset.

Sinun pitäisi nyt nähdä Google Maps -widgettisi (punainen nuoli yllä olevassa kuvassa).

Voit testata reagointikykyä pienentämällä selaimesi kokoa ja vierittämällä sitten takaisin verkkosivun alueelle, jolla on kartta.

Siinä se tälle opetusohjelmalle! Jos pidit siitä ja haluat oppia tekemään oman ammattimaisen WordPress-sivustosi tyhjästä, voit ilmoittautua Yksinkertaistettu WordPress: Tehokkaiden verkkosivustojen rakentaminen -kurssi Udemyssä, tai katso toinen WordPress-oppaat!

Davies Media Design ilmainen luovien sovellusten sähköpostiuutiskirje

Tilaa DMD-uutiskirje

Rekisteröidy saadaksesi uusia opetusohjelmia, kurssipäivityksiä ja viimeisimmät uutiset ilmaisista luovista suosikkisovelluksistasi!

Tilaaminen onnistui!

Pin Se Pinterest