Wordpress

WordPress Google Maps gida: txertatu plugin batekin edo gabe

WordPress Google Maps edukia zure webgunean txertatzeko modu baten bila?

WordPress-en gauza asko bezala, Google Maps zure webgunean txertatzeko hainbat modu daude sartu nahi duzun mapa-edukiaren arabera.

Argitalpen honetan, Google Maps WordPress-en pluginik gabe nola gehitzen den erakusten hasiko gara. Ondoren, plugin batzuk gomendatuko ditugu ahal Google Maps txertatzen lagunduko dizu, baita planteamendu hori egitearen onura batzuk ere. Orain beharrezkoa den Google Maps APIa behar bezala nola erabili ere aztertuko dugu.

Azkenik, Google Maps WordPress-en erabiltzeko errendimendu-gogoetekin amaituko dugu eta zure WordPress gunea azkar kargatzen jarraitzeko aholku batzuk partekatuko ditugu, nahiz eta Google Maps txertatu behar baduzu.

Behean klik egin dezakezu atal zehatz batera zuzenean joateko edo guztia irakurtzeko.

  • Google Maps APIa beharrezkoa da orain
  • Nola gehitu Google Maps WordPress-en pluginik gabe
  • Malgutasun handiagoa ematen dizuten WordPress Google Maps pluginak
  • Google Maps-en errendimendu-efektua eta errendimendua hobetzeko aholkuak

Google Maps APIa beharrezkoa da orain

11ko ekainaren 2018tik aurrera, an Google Maps-erako API gakoa behar da orain. Dagoeneko Google Maps ezarri baduzu zure webgunean eta jada ez badabil, hori izan daiteke arrazoia. Edo hobeto esanda, API gakoa falta zaizu. Berri ona da, zuetako % 99rentzat doakoa izan beharko lukeela. Jarraian, Google Maps APIaren prezioa dago.

Google Maps APIaren prezioak

Google Maps APIaren prezioak

Google-k hilero 200 $-ko kreditu bat ere ematen dizu zure fakturazio-kontuan, erabilera-kostuak konpentsatzeko. Beraz, ikusten duzunez, milaka eskaera sortu ezean, zure webgunean Google Maps erabiltzeak ez dizu ezer kostatu behar.

Zer gehiago aldatu da? Ezer ez, baina orain hau egin beharko duzu Google Maps WordPress-en erabili nahi baduzu:

  1. Erregistratu Google Cloud Platform Console kontu batean eta konfigura ezazu.
  2. Gehitu fakturazio-informazioa, nahiz eta agian inoiz ez kobratuko.
  3. Gehitu API gakoa zure Google Maps kapsulatzeko kodea edo pluginaren ezarpenetara.

Nola lortu Google Maps API gako bat

Jarraian, zure Google Maps API gakoa lortzeko urratsak azaltzen dira.

Urratsera 1

Joan Google Cloud Platform kontsolara. Oraindik konturik ez baduzu, sortu bat, doakoa da.

Urratsera 2

Hautatu edo sortu proiektu bat.

Urratsera 3

Konfiguratu fakturazio-kontua. Nahiz eta kreditu-txartel bat fitxategian jartzeko eskatuko dizute, ez zaizu inoiz kobratu behar, erabilera-muga altuak gainditzen ez badituzu behintzat.

Urratsera 4

Produktu bat edo gehiago hautatzeko eskatuko zaizu. Hau erabiltzen ari zaren mapa motaren araberakoa da. Adibidez, zure WordPress gunean mapa bat txertatzen ari bazara pluginik gabe (beheko urratsetan erakusten den bezala), Google Maps Embed APIa aukeratuko zenuke.

Google Maps Embed APIa

Google Maps Embed APIa

Google Maps Widget bezalako plugin bat erabiltzen ari bazara (beheko urratsetan erakusten den bezala), Google Maps API estatikoa aukeratuko zenuke.

Hirugarrenen plugin edo gai bat erabiltzen ari bazara, Google Maps-en inplementazio motaren inguruko dokumentazioa izan beharko lukete. Ez kezkatu, beti gehitu ditzakezu hainbat mota eta geroago alda ditzakezu.

Urratsera 5

Egin klik "Gaitu".

Gaitu Google Maps APIa

Gaitu Google Maps APIa

Urratsera 6

Egin klik "APIak" eta gero "Kredentzialak" atalean, zure API gakoa ikusiko duzu.

Google Maps API gakoa

Google Maps API gakoa

Urratsera 7

Zure Google Maps API gakoa txertatzen ari bazara, testu arruntean agertuko da iturburu-kodean. Hori dela eta, hori mugatu beharko zenuke, bestela, jendeak zure API gakoa erabil dezake bere WordPress webgunean edo proiektuetan eta zure erabilera areagotu.

Horretarako, egin klik zure API gakoaren izenan eta murrizketa bat gehitzeko aukera emango dizu. Zure WordPress gunerako, HTTP erreferentzia bat gehitzea nahikoa ona izan beharko litzateke. Hala nola https://yourdomain.com/*. Horri esker, zure webgunean soilik deiak egin ahal izango ditu.

Google Maps API gakoen murrizketa

Google Maps API gakoen murrizketa

Nola gehitu Google Maps WordPress-en pluginik gabe

Mapa sinple bat txertatu nahi baduzu eta kokapen-markatzaile pertsonalizatuak edo bestelako oharrak bezalako funtzionaltasun zehatzagorik behar ez baduzu, Google Maps txerta dezakezu egunero erabiltzen duzun Google Maps webgune arrunta erabiliz pluginik gabe.

Hona hemen nola funtzionatzen duen ...

1. urratsa: Kopiatu Google Maps kapsulatutako kodea

Hasteko, erabili Google Maps webgunea txertatu nahi duzun mapa sortzeko.

Adibidez, toki-markatzaile bat txertatu nahi baduzu, ireki toki hori Google Maps-en. Edo, jarraibideak txertatu nahi badituzu, ireki jarraibideak Google Maps-en.

Kapsulatu nahi duzun mapa lortu ondoren, egin klik goiko ezkerreko izkinan dagoen hanburgesa menuan:

Nola sartu kapsulatzeko kodea

Nola sartu kapsulatzeko kodea

Menuko elementuen zerrendan, hautatu aukera Partekatu edo kapsulatu mapa:

Ireki kapsulatzeko aukerak

Ireki kapsulatzeko aukerak

Horrek a irekiko du Share agertu. Popup horretan, egin klik botoian Mapa bat txertatu fitxa.

Ondoren, nahi duzun tamaina hauta dezakezu goitibeherakoa erabiliz. WordPress gune gehienentzat, lehenetsitako tamaina ondo funtzionatzen du, baina mapa handiagoa edo txikiagoa egin dezakezu behar izanez gero.

Hori egin ondoren, egin klik Kopiatu HTML kapsulatzeko kodea kopiatzeko botoia:

WordPress Google Maps kapsulatzeko kodea

Google Maps kapsulatzeko kodea

Ondoren, zure API gakoa gehitu beharko duzu kodean. Beraz, zure kodeak honelako itxura izan beharko luke:

2. urratsa: Gehitu Google Maps kapsulatutako kodea WordPress-eko gunera

Orain, egin behar duzun guztia txertatzeko kode hori zure WordPress gunera gehitzea da zure mapa sartu nahi duzun mezuan edo orrian.

WordPress 5.0-rekin kaleratutako WordPress Gutenberg bloke editore berria erabiltzen ari bazara, hori egin dezakezu bat gehituz. HTML pertsonalizatua blokeatu eta kapsulatzeko kodea blokean itsatsi. Ez ahaztu zure API gakoa gehitzea.

Nola txertatu kodea WordPress bloke editorean

Nola txertatu kodea WordPress bloke editorean

Zure mapa nola izango den aurreikus dezakezu klik eginez Gehigarriaren blokearen gaineko botoia.

TinyMCE editore klasikoa erabiltzen ari bazara, Google Maps kapsulatzeko kodea gehi dezakezu irekita. Testu fitxa eta kodea bertan itsatsi:

Nola txertatu kodea WordPress Classic editorean

Nola txertatu kodea WordPress Classic editorean

Kodea gehitu ondoren, itzulerara joan zaitezke Visual fitxa zure maparen zuzeneko aurrebista ikusteko.

Eta kitto! Google Maps WordPress-en pluginik gabe nola gehitzen ikasi berri duzu.

Erabili Google My Maps pluginik gabe mapa konplikatuagoak txertatzeko

Kokapen-markatzaile anitz, ohar pertsonalizatuak eta abar bezalako gauzetan sormen handiagoa izan nahi baduzu, hala ere egin dezakezu Google-ren My Maps zerbitzuarekin plugin bat beharrik gabe.

My Maps Google-ren tresna ofiziala da, zure mapa pertsonalizatuak sortu eta partekatzeko aukera ematen dizuna. Harekin, beheko adibidearen antzeko zerbait sor dezakezu, erabiltzaile batek markatzaile batean klik egiten duenean bistaratzen den markatzaile pertsonalizatu askorekin eta informazio pertsonalizatuarekin:

Google My Maps adibidea

Google My Maps adibidea

Hona hemen nola erabili Google Maps pertsonalizatuak WordPress-era gehitzeko.

1. urratsa: Sortu zure mapa Google My Maps-en

Hasteko, joan Google My Maps-era eta sortu mapa berri bat. Hortik aurrera, mapa eraikitzailearen interfazea erabil dezakezu zure mapa eraikitzeko:

Google My Maps interfazea

Google My Maps interfazea

Gehiegizko xehetasunetan azalduko ez dugun arren, interfaze honek sormenezko mapa batzuk eraikitzeko aukera ematen dizu. Begirada sakonago bat lortzeko, Google-ren laguntza-artikulu honek funtzionalitate garrantzitsu asko biltzen ditu.

2. urratsa: Sortu kapsulatutako kodea

Zure mapa eraikitzen amaitutakoan, kapsulatzeko kodea sortu behar duzu.

Kode hori eskuratu aurretik, ordea, zure mapa publiko egin behar duzu. Horretarako, egin klik Share botoia. Ondoren, egin klik Aldatu... laster-leihoan:

Google My Maps partekatzeko ezarpenak

Google My Maps partekatzeko ezarpenak

Ondoren, hautatu On - Publikoa sarean eta sakatu Save:

Aktibatu Estekak partekatzea

Aktibatu Estekak partekatzea

Hori egin ondoren, egin klik maparen izenburuaren ondoan dagoen goitibeherako menuan eta hautatu Kapsulatu nire webgunean benetako embed kodea sortzeko:

Sartu My Maps kapsulatzeko kodea

Sartu My Maps kapsulatzeko kodea

Horrek popup bat irekiko du kodearekin, kopiatu beharko zenukeena. Ez ahaztu zure API gakoa gehitzea.

Nire mapak kapsulatzeko kodea

Nire mapak kapsulatzeko kodea

3. urratsa: Gehitu txertatu kodea WordPress-eko gunera

Orain, kapsulatze-kode hori zure WordPress-eko webgunean gehi dezakezu Google Maps ohiko webgunetik lortzen duzun kapsulatze-kodea egingo zenukeen bezala.

Hori nola egin ziur ez badakizu, egin klik hemen goiko tutorialaren atal horretara joateko.

Erabili WordPress Google Maps plugina ordez

Goiko eskuzko metodoez harago, zure webgunean mapak txertatzen lagunduko dizuten WordPress Google Maps plugin ugari ere badaude.

Eskuzko metodoen gainean plugin hauetako bat kontuan hartu nahi dituzun arrazoi batzuk daude:

  • Interfaze sinple batekin mapa konplikatuagoak sortzeko aukera ematen dizute.
  • Dena egin dezakezu zure WordPress-eko panela utzi beharrik gabe.
  • Horietako batzuk WordPress-era estekatzen dira. Adibidez, baliteke mapa-markatzaileak WordPress-eko argitalpenei lotu ahal izatea.
  • Horietako batzuek Google Maps errendimendurako optimizatzen lagun zaitzakete (honetaz gehiago geroago).

Plugin horietarako guztietarako, zure Google Maps API gakoa sortu beharko duzu mapak kapsulatzen hasi aurretik. Tutorial honek hori nola egin erakusten dizu.

Geldialdiekin eta WordPress arazoekin borrokan ari zara? Behmaster denbora aurrezteko diseinatutako hosting irtenbidea da! Begiratu gure ezaugarriak

Google Maps widget-a

Google Maps Widget Google Maps plugin soil bat da, eta mapa bat txertatzeko aukera ematen dizu Google Maps API estatikoa erabiliz, eta errendimendu hobea eskaintzen du mapa interaktibo bat baino irudi estatiko bat txertatuz (hurrengo atalean horri buruz gehiago azalduko dugu).

Aukera bikaina da zerbait sinple eta arina nahi baduzu. Aktibatzen duzunean, zure Google Maps API gakoa hartu eta pluginaren ezarpenetara konektatu beharko duzu. Google Map bat gehi dezakezu zure guneko edozein widget-eremutan. Ondoren, bisitariek maparen bertsio interaktibo handiagoa ireki dezakete argi-kutxa batean:

Google Maps Widget interfazea

Google Maps Widget interfazea

Nahi izanez gero, mapa interaktibo bat ere erabil dezakezu berehala, eta Pro bertsioak zure webguneko edozein lekutan txertatzeko aukera ematen dizu kode labur batekin.

Google Maps Erraza

Google Maps Easy-k zure markatzaile eta oharpenekin mapa pertsonalizatuak sortzen laguntzen dizu.

Markatzaileak gehitzen dituzunean, zure ikono pertsonalizatuak kargatzeko, markatzaileen deskribapenean testua eta irudiak sartzeko eta askoz gehiago aukera duzu. Zure mapak nola funtzionatzen duen ere kontrola dezakezu, esate baterako, erabiltzaileei zooma handitzen utzi ala ez aukeratzea:

Google Maps interfaze erraza

Google Maps interfaze erraza

Zure mapa eraiki ondoren, txertatu dezakezu shortcode edo PHP funtzio bat erabiliz.

Intergeoa

Intergeo beste aukera ezagun bat da, zure mapak markatzaile pertsonalizatuekin sortzeko eta maparen funtzionaltasuna kontrolatzeko aukera ematen dizuna.

Plugin-a instalatu eta aktibatzen duzunean, zure mapak eraiki ahal izango dituzu WordPress-eko paneletik:

Intergeo interfazea

Intergeo interfazea

Ondoren, zure guneko edozein lekutan txerta ditzakezu kode labur bat erabiliz.

Gutenberg blokea Google Maps kapsulatzeko

Gutenberg Block For Google Maps Embed WordPress Gutenberg bloke editore berriari Google Maps bloke dedikatu bat gehitzen duen plugin sinple bat da.

Bloke honekin, edozein helbide txerta dezakezu eta, gainera, aukeratu:

  • Neurriak
  • Zoom maila
  • Mapa interaktiboa vs mapa estatikoa (berriro ere, azken metodo honek errendimenduan laguntzen du)

Ez dizu zure mapa pertsonalizatuak sortzen utziko, baina aukera erosoa da bloke-editore berria erabiltzen baduzu eta mapa sinple batzuk sartzeko modu erraz bat nahi baduzu.

Google Maps-ek zure WordPress gunea moteldu dezake - Ez utzi

Google Maps-ek zure webgunean bere mapa interaktiboekin funtzionalitate polita txertatzen uzten dizun arren, errendimenduaren truke bat dago, script ugari kargatu behar dituelako funtzionalitate interaktibo hori guztia indartzeko.

Laburbilduz, Google Maps interaktiboak txertatzeak zure webgunea moteldu dezake.

Honi aurre egiteko modu batzuk daude.

Lehenik eta behin, zure mapa interaktiboki arakatu ahal izateko jendea behar ez baduzu zure webgunean, gauzak bizkortzeko modu erraz bat hirugarrenen tresnarik gabe hau da:

  • Hartu maparen pantaila-argazkia zure webgunean erabiltzeko
  • Lotu pantaila-argazki hori Google Maps webguneko mapara, edo ireki argi-laster-leiho bat mapa interaktiboarekin erabiltzaile batek klik egiten duenean.

Horrela, zure webgunea ohiko irudi bat kargatzen ari da, ez Google Maps-ekin lotutako script guztiak.

Hau eskuz egiteko alternatiba gisa, doako AWEOS Google Maps iframe klik bakoitzeko plugina ere erabil dezakezu. Plugin honek automatikoki ordezkatzen ditu Google Maps kapsulak leku-markaren irudi generiko batekin. Ondoren, erabiltzaile batek klik egiten badu Kargatu mapa botoian, Google Maps kapsulatutako osoa kargatuko du:

Google Maps leku-markaren irudia

Google Maps leku-markaren irudia

Edo, Google Maps API estatikoa ere erabil dezakezu, irudi arrunt bat itzultzen duena JavaScript gabe. Google Maps-en plugin batzuek - Google Maps Widget eta Gutenberg Block For Google Maps Embed barne - API estatikoa erabil dezakezu zure mapak sortzen dituzunean.

Hala ere, konturatzen gara batzuetan ikuspegi estatiko honek ez duela mozten, eta jende askok Google Maps esperientzia interaktiboa berehala txertatu nahi du.

Hori horrela bada, Google Maps bizkortzeko beste modu on bat erabiltzea da karga alferra. Kargatze alferrarekin, zure webguneak Google Maps-en beheko txertaketak kargatzeko itxarongo du bisitariak orrialdean behera korritzen hasten diren arte. Horrek zure hasierako orriaren karga-denbora azkar mantentzen du, eta hala ere, Google Maps-en eduki interaktiboa txertatzen uzten dizu.

Dagoeneko idatzi dugu irudiak eta bideoak alfer kargatzeari buruz eta Google Maps-en ideia bera da.

Hau egiteko aukera emango dizuten plugin batzuk daude. Adibidez, a3 Lazy Load plugin-ak iframe kargatzeko aukera ematen dizu, Google Maps barne:

Google Maps kargatu alferra

Google Maps kargatu alferra

Beste aukera hauek dira:

  • BJ Lazy Load
  • WP Rocket-en Lazy Load
  • Lazy Loader Erraza

Laburpena

Zure webgunean mapa soil bat txertatu nahi baduzu, Google Maps gehi dezakezu WordPress-era pluginik gabe integratutako kodearen funtzioa erabiliz. Edo, Google My Maps tresna erabil dezakezu zure mapa pertsonalizatua sortzeko eta hori txertatzeko.

Eskuzko metodo horietatik haratago, Google Maps WordPress plugin ugari ere badaude, kontrol asko eman diezazukete zure WordPress-eko panela utzi gabe.

Aukeratzen duzun metodoa edozein dela ere, erreparatu Google Maps erabiltzearen errendimenduaren eraginari. Saiatu Google Maps guztiz beharrezkoa denean soilik erabiltzen eta kontuan hartu leku-marken irudiak edo karga alferrak bezalako taktikak, errendimenduan eragin negatiboa murrizteko.

Beste galderarik baduzu Google Maps WordPress-en erabiltzeari buruz? Jakin iezaguzu iruzkinetan!

Gaiarekin lotutako artikuluak

0 Comments
Lineako erantzunak
Ikusi iruzkin guztiak
Itzuli gora botoia