Kuinka lisätä Google Maps WordPressiin

Jos olet rakentanut verkkosivuston paikalliselle yrityksellesi, erityisesti kivijalkakaupalle, WordPress-verkkosivustollasi pitäisi olla Google Maps -osio, joka korostaa sen sijaintia. Kartan upottaminen verkkosivustoosi on myös erinomaista paikallisille hakukoneoptimoinneille, koska Google sijoittaa sen korkeammalle hakutuloksissa.

Kuinka lisätä Google Maps WordPressiin

Onneksi Google Mapsin upottaminen myymäläsi tai toimistosi sijaintiin on helppoa WordPressissä. Aloita lukemalla.

Kuinka lisätä Google Maps WordPressiin ilman APIa tai laajennusta

Tämä on yksinkertaisin tapa lisätä Google Maps WordPress-blogiisi tai -verkkosivustoosi. Se sisältää kaksi laajaa vaihetta: upotuslinkin kopioiminen ja linkin liittäminen WordPress-koodilohkoon. Noudata alla olevia ohjeita.

  1. Avaa Google Maps verkossa.
  2. Kirjoita tai etsi sijainti, jonka haluat upottaa hakukenttään.
    Yrityksen sijainnin haku
  3. Napsauta Jaa, siirry kohtaan Upota kartta, valitse haluamasi koko ja napsauta Kopioi HTML.
  1. Kirjaudu sisään WordPress-hallintapaneeliisi.
  2. Napsauta Sivut ja sitten Lisää uusi sivu (Voit käyttää uutta viestiä tai muokata vanhaa sivua, jos haluat).
    Lisää uusi sivuvaihtoehto WordPressissä
  3. Napsauta +-painiketta ja valitse sitten Muokattu HTML.
    Mukautetun HTML-koodin avaaminen WordPressissä
  4. Liitä kopioimasi Google-kartan upotuslinkki. Tallenna ja julkaise sitten sivusi.
    Julkaise lyhyt linkki

Google Mapsin lisääminen API:lla WordPressiin

Jos kirjoitat blogia WordPressillä, voit upottaa Google Mapsin API:lla, vaikka sinun on käytettävä Maps-laajennusta saavuttaaksesi tämän. Tässä esimerkissä käytämme WP Go Maps -laajennusta, mutta voit kokeilla muitakin. Mutta ensin meidän on hankittava API.

Kuinka saada Google Maps API

Voit käyttää ilmaisia ​​API-ominaisuuksia pienyrityksille, mutta edistyneet sovellusliittymät maksavat noin 7 dollaria kuukaudessa ja skaalautuvat sen mukaan, kuinka monta näyttökertaa saat. Hankitun API:n avulla voit lisätä Google-kartan verkkosivustollesi. Google Map API:n saamiseksi sinun on määritettävä laskutus oikein Google Cloud Consolessa. Kun laskutus on määritetty, jatka alla oleviin vaiheisiin Google Cloud Consolessa.

  1. Napsauta vasemmassa yläkulmassa olevaa Hampurilaista ja napsauta Sovellusliittymät ja palvelut.
    Googlen sovellusliittymät ja palvelut
  2. Valitse Ota API:t ja palvelut käyttöön.
  3. Napsauta Hampurilaista, vie hiiri API:t ja palvelut ja napsauta Kirjasto.
    Avataan API-kirjasto
  4. Napsauta Mapsissa Näytä kaikki.
  5. Napsauta Mapsin JavaScript-sovellusliittymää ja napsauta sen Ota käyttöön -painiketta.
    Map API:n käyttöönotto WordPressissä
  6. Palaa API-kirjastosivulle ja toista vaihe 5 Directions API, Geocoding API, Geolocation API ja Places API varten.
  7. Napsauta Hampurilaista, vie hiiren osoitin API:t ja palvelut ja napsauta sitten Credentials.
    WordPressin API-tunnistetiedot
  8. Napsauta näytön yläreunassa Luo tunnistetiedot -vaihtoehtoa ja valitse API-avain.
    WordPress API -tunnisteavaimet
  9. Valitse Muokkaa API-avainta -vaihtoehto.
    Muokkaa API-avainta
  10. Valitse Verkkosivustot-valintanappi ja napsauta LISÄÄ.
    API-muokkausvaihtoehdot
  11. Syötä verkkosivustosi URL-osoite, napsauta Valmis ja sen jälkeen Tallenna.
    Tallenna API-muokkaukset
  12. Napsauta Näytä avain -vaihtoehtoa ja kopioi API-avain.
    API-avaimen kopioiminen

WP Maps -laajennuksen lataaminen

Käytämme tässä esimerkissä WP Go Mapsia. Lataa se noudattamalla alla olevia ohjeita.

  1. Avaa WordPressin kojelauta, napsauta valikkopalkissa Plugins ja napsauta sivun yläreunassa Lisää uusi laajennus.
    Uuden laajennuksen lisääminen
  2. Etsi WP Go Maps ja napsauta Asenna nyt -vaihtoehtoa ensimmäisen laajennuksen kohdalla ja napsauta sitten Aktivoi, kun asennus on valmis.
  3. Napsauta vasemmassa ruudussa Mapsin asetukset, napsauta Lisäasetukset-välilehteä, syötä API-avain ja napsauta Tallenna asetukset oikeassa alakulmassa.
    Maps API -avaimen lisäys
  4. Valitse vasemmasta ruudusta Kartat, lisää osoitteesi Osoite/GPS-kenttään ja napsauta Lisää merkki -painiketta.
    Lisää karttamerkki WordPressiin

Karttalohkon lisääminen

Kun API on yhdistetty, WP Go Maps luo koodilohkon, jota voit käyttää verkkosivustollasi:

  1. Avaa WordPress-hallintapaneeli ja avaa viesti tai sivu, jossa tarvitset kartan.
  2. Valitse +-painike yläreunasta, etsi kartta ja valitse Kartta.
    Karttojen lisääminen WordPressin sivuille
  3. Tallenna ja julkaise sivu nyt.
  4. Käytä oikealla olevia lisäasetuksia mukauttaaksesi lohkon ulkoasua sivulla.

Widgetin lisääminen

Vaihtoehtoisesti voit lisätä karttaasi pienen widgetin, kuten verkkosivuston alatunnisteen. Näin:

  1. Avaa WordPressin hallintapaneeli.
  2. Valitse Ulkoasu ja napsauta Widgetit.
    WordPress-widgetien avaaminen
  3. Laajenna WP Go Maps, valitse sijainti ja napsauta Lisää widget.
    WP Go Mmaps -widget
  4. Muokkaa widgetin kokoa ja sitä, miten tarra nimetään kartalla.

Vaikka WP Go Mapsin pitäisi saada työ valmiiksi, se ei ole ainoa laajennus, joka voi tehdä niin.

Voit selata WordPress-laajennuskauppaa löytääksesi muita laajennuksia, jotka upottavat karttalohkoja Google Mapsiin. Joitakin parempia vaihtoehtoja ovat:

  • Google Maps -widget
  • Google Maps Easy
  • Intergeo

Kun olet ladannut ja ottanut käyttöön laajennuksen, jokaisella pitäisi olla lyhyt opetusohjelma Google Maps -sovellusliittymäavaimen liittämisestä, jotta WordPress voi käyttää Googlen karttaa. Loppu on sinusta kiinni.

Käytä karttaintegroitua WordPress-teemaa

Sen lisäksi, että käytät laajennuksia kartan luomiseen verkkosivustollesi, voit myös valita teeman vaihtoehdolla alusta alkaen.

Et kuitenkaan todennäköisesti löydä ilmaista teemaa Google Maps -upotuksella. Yksi paremmista versioista on Divi, joka maksaa noin 90 dollaria vuodessa, jos käytät tilausta. Sen muut ominaisuudet, kuten tekoälyavusteinen verkkosivustojen luominen ja monet ammattimaiset mallit, tekevät siitä kuitenkin erinomaisen valinnan.

Aseta itsesi kartalle WordPressin avulla

Upottamalla myymäläsi Google Maps -sijainnin WordPress-sivustollesi helpotat potentiaalisten asiakkaiden ja asiakkaiden löytämistä paikalliseen yritykseesi. Pelaa karttasijoittelua ja luo selkeä yhteyssivu saadaksesi parhaat tulokset.

Seuraavaksi sinun pitäisi oppia määrittämään oletusteema WordPressissä.

UKK

Mihin laitan Google Maps API -avaimen WordPressiin?

Voit upottaa sen WordPress-koodilohkoon tai käyttämällä laajennusta. Jotkut näistä laajennuksista voivat tarjota widgetejä, joihin upotat API-avaimen.

Kuinka lisään Google-kartan WordPressiin ilman laajennuksia?

Tietty prosessi riippuu käyttämästäsi laajennuksesta. API-avaimet kuitenkin yleensä menevät API-kenttään, joka löytyy laajennuksen Lisäasetukset-vaihtoehdosta.

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]