V tem članku vam bom pokazal, kako dodati odziven zemljevid Google Maps na spletno stran WordPress (tj. za stran s stiki) brez uporabe vtičnika. Za to vadnico bom uporabljal WordPress 6.0, pa tudi temo Twenty Twenty Two, ki je privzeta tema za to različico WordPressa.

 Funkcija Google Zemljevidi vam omogoča prikaz lokacije vašega podjetja na interaktivnem zemljevidu, kar obiskovalcem spletnega mesta omogoča, da si preprosto ogledajo, kje se nahajate, in komunicirajo z zemljevidom, da vidijo, kaj je še okoli vas, dobijo navodila itd. Obiskovalcem spletnega mesta prikazuje da ste lokalno podjetje in imate resnično fizično lokacijo. Za podjetja je zelo običajno, da imajo zemljevid na svoji kontaktni strani.

Na voljo je ogromno vtičnikov za Google Zemljevide, vendar je veliko od njih okornih in zahtevajo plačilo za vse funkcije vtičnika ali račun Google Developer z zapletenimi koraki, ki dajejo manj kot zaželene rezultate.

Ob vsem tem je na voljo zelo preprost način za dodajanje Google Zemljevidov na vaše strani WordPress 6.0 brez vtičnikov in brez kopice zapletenih korakov. Potopimo se vanj.

1. korak: Ustvarite blok HTML

Za začetek se prijavite v skrbniško območje vašega spletnega mesta WordPress in se pomaknite do razdelka »Strani« (rdeča puščica na zgornji sliki).

Kliknite stran, ki ji želite dodati funkcijo Google Zemljevidi (lahko kliknete ime strani, v mojem primeru »Stik« – modra puščica na zgornji sliki – ali preprosto kliknete »Uredi« pod imenom strani).

Če uporabljate temo blokov, kot je Twenty Twenty Two, boste zdaj v urejevalniku blokov za svojo stran. Pomaknite se navzdol do lokacije, kamor želite vstaviti zemljevid.

Nato kliknite ikono »+« (»Block Inserter« – rdeča puščica na zgornji sliki), da vstavite blok.

V iskalnem polju (na fotografiji označeno z zeleno) poiščite »Skupina« in kliknite, da dodate blok skupine (rdeča puščica). To vam bo omogočilo, da elementu bloka dodate nekaj nastavitev po meri.

Kliknite na primer možnost »Spremeni poravnavo« (rdeča puščica) in izberite »Polna širina« (zelena puščica). S tem bo širina bloka, ki bo vseboval naš interaktivni zemljevid Google Maps, polna.

Nato kliknite velik gumb »+« znotraj skupine (rdeča puščica na zgornji fotografiji). V iskalni vrstici (označeno z zeleno) poiščite »HTML« in kliknite blok »HTML po meri« (modra puščica).

Videli boste, da zdaj piše »Napišite html ...« (rdeča puščica). Tukaj bomo dodali naš zemljevid.

2. korak: ustvarite HTML za vdelavo Google Zemljevidov

Zdaj bomo morali ustvariti naš zemljevid z Google Zemljevidi. Če želite to narediti, odprite nov zavihek brskalnika in se pomaknite do Google.com, če to ni vaš privzeti brskalnik.

Nato vnesite naslov, ki ga želite prikazati na zemljevidu. Za ta primer bom uporabil Empire State Building (rdeča puščica). Za ta del lahko uporabite natančen naslov svojega podjetja (tj. ulično številko, ulico, mesto, zvezno državo in poštno številko – ali karkoli že vnesete za mednarodne naslove, če niste v ZDA).

Kliknite sliko zemljevida, ki se prikaže za vaš naslov na strani z rezultati iskalnika (rdeča puščica na sliki – ta bo bodisi na sredini strani ali stran od desne, odvisno od tega, ali ste vnesli naslov ali ime mesto, kot sem jaz).

Vaš naslov bo zdaj prikazan kot oznaka na celozaslonskem zemljevidu (rdeča puščica na zgornji sliki). Pod naslovom ali naslovom mesta, ki ste ga iskali, boste videli tudi več ikon. Te ikone vključujejo »Navodila za pot«, »Shrani«, »V bližini«, »Pošlji v telefon« in »Deli«. Kliknite ikono »Deli« (modra puščica).

V zavihku »Skupna raba«, ki se prikaže, kliknite zavihek »Vdelaj zemljevid« (modra puščica na zgornji fotografiji).  

Na tem zavihku boste videli predogled vašega vdelanega gradnika Google Zemljevidi. Na levi strani kode je spustni meni za velikost (zelena puščica) – izberete lahko predhodno velikost ali izberete »Po meri«, da nastavite svojo velikost. Izbral bom možnost »Po meri« (rdeča puščica).

Tukaj boste videli dimenzije za moj zemljevid po meri. Višino ali prvo dimenzijo bom nastavil na 1200 (rdeča puščica). Širina bom pustila nastavljeno na 600. Lahko kliknete »Predogled dejanske velikosti« (zelena puščica), da prikažete zemljevid v novem pojavnem oknu v polni velikosti (prepričajte se, da ste onemogočili morebitne blokatorje pojavnih oken, če jih imate vklopljen, da preprečite blokiranje okna). Ko končate, zapustite okno za predogled.

Nato kliknite povezavo »Kopiraj HTML« (modra puščica). To je koda, ki jo bomo dodali na našo stran WordPress.

3. korak: Prilepite kodo HTML na stran WordPress

Pomaknite se nazaj na zavihek brskalnika, ki vsebuje vaše spletno mesto WordPress. Kliknite na prazen blok HTML, kjer piše »Tukaj napišite HTML ...« in prilepite kodo (rdeča puščica), tako da na tipkovnici pritisnete ctrl+v (cmd+v v sistemu Mac).

Če kliknete možnost »Predogled« v orodni vrstici za blokiranje (rdeča puščica), boste zdaj videli svoj zemljevid prikazan na vaši strani (zelena puščica). Kliknite nazaj na možnost »HTML«, da se vrnete na kodo HTML (modra puščica).

Naš zemljevid imamo vdelan na naši strani, vendar se ne odziva – kar pomeni, da če zemljevid gledamo na manjšem zaslonu, kot je tablica ali telefon, ne bo prilagodil svoje velikosti, da bi ustrezal zaslonu. Da bi to popravili, moramo kodi HTML dodati slog po meri.

4. korak: naredite Google Zemljevide odzivne

bom z uporabo kode, ki sem jo dobil s te spletne strani da bo vdelava Google Zemljevidov odzivna. Pomaknite se navzdol do razdelka z oznako »Kako odzivno vdelati Google Zemljevide« (rdeča puščica). Nato se pomaknite navzdol do drugega niza kod (modra puščica).

Kopiraj vse iz » ”  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).

Pomaknite se nazaj na WordPress. Kliknite z miško na samem začetku kode HTML, da vstavite to novo kodo na začetek (rdeča puščica). Pritisnite ctrl+v, da prilepite kodo.

Na koncu kliknite čisto na koncu kode HTML (rdeča puščica) in vnesite » ”, da vse zaprete. Pravkar ste v bistvu zavili svojo kodo HTML v slog po meri. Ta slog pove brskalniku obiskovalca, naj spremeni velikost zemljevida glede na velikost okna, v katerem si ga ogleduje.

5. korak: Prilagodite razmerje stranic interaktivnega zemljevida

Narediti moramo še eno stvar – pomaknite se nazaj na vrh kode, dokler ne vidite »padding-bottom: 75%;« (rdeča puščica). Ta del kode določa razmerje stranic zemljevida.

Ker sem svoj zemljevid spremenil na 1200 x 600, ima razmerje stranic 2:1. Za to moram spremeniti odstotek na "50%" (rdeča puščica).

Če niste prepričani, kakšen odstotek bi morali uporabiti za svoj zemljevid, preprosto vzemite razmerje stranic (tj. 16:9) in drugo številko delite s prvo, da dobite svoj odstotek (9 deljeno s 16 je 56.25 %).

Kliknite »Posodobi«, da uveljavite svoje spremembe (modra puščica na zgornji sliki), nato kliknite »Ogled strani« v spodnjem levem kotu, da vidite rezultat.

Zdaj bi morali videti vaš pripomoček za Google Zemljevide (rdeča puščica na zgornji sliki).

Odzivnost lahko preizkusite tako, da zmanjšate velikost brskalnika in se nato pomaknete nazaj na območje spletne strani, ki ima zemljevid.

To je to za to vadnico! Če vam je bilo všeč in se želite naučiti, kako narediti svoje profesionalno spletno mesto WordPress iz nič, se lahko vpišete v moj Tečaj WordPress 6.0 za nekoderje na Udemy, ali si oglejte moje druge vadnice!

It pin na Pinterest