U ovom ću vam članku pokazati kako dodati responzivnu kartu Google karata na WordPress web stranicu (tj. za stranicu s kontaktima) bez korištenja dodatka. Koristit ću WordPress 6.0 za ovaj vodič, kao i temu Twenty Twenty Two, koja je zadana tema za ovu verziju WordPressa.
Značajka Google karte omogućuje vam da prikažete lokaciju svoje tvrtke na interaktivnoj karti, omogućujući posjetiteljima web mjesta da jednostavno vide gdje se nalazite i da komuniciraju s kartom kako bi vidjeli što se još nalazi oko vas, dobili upute itd. Posjetiteljima web mjesta pokazuje da ste lokalna tvrtka i da imate stvarnu fizičku lokaciju. Vrlo je uobičajeno da tvrtke imaju kartu na svojoj kontakt stranici.
Postoji mnoštvo dodataka za Google karte, ali mnogi od njih su nezgrapni i zahtijevaju ili plaćanje za potpune značajke dodatka ili račun Googleovog razvojnog programera s kompliciranim koracima koji daju rezultat koji nije baš poželjan.
Uz sve ovo rečeno, postoji stvarno jednostavan način za dodavanje Google Maps na vaše WordPress 6.0 stranice bez dodataka i bez hrpe kompliciranih koraka. Uronimo u to.
Pregled sadržaja
- Korak 1: Napravite HTML blok
- Korak 2: Generirajte Google Maps Embed HTML
- Korak 3: Zalijepite HTML kod na WordPress stranicu
- Korak 4: Učinite Google Maps responzivnim
- Korak 5: Podesite omjer slike interaktivne karte
Korak 1: Napravite HTML blok
Za početak, prijavite se u administratorsko područje svoje WordPress stranice i idite na odjeljak "Stranice" (crvena strelica na gornjoj slici).
Kliknite na stranicu na koju želite dodati svoju značajku Google Maps (možete kliknuti na naziv stranice, u mom slučaju “Kontakt” – plava strelica na gornjoj slici – ili jednostavno kliknuti “Uredi” ispod naziva stranice).
Ako koristite blok temu kao što je Twenty Twenty Two, sada ćete biti unutar Block Editor-a za svoju stranicu. Pomaknite se prema dolje do lokacije na koju želite umetnuti svoju kartu.
Zatim kliknite ikonu "+" ("Umetač blokova" – crvena strelica na gornjoj slici) da biste umetnuli blok.
Potražite "Grupa" u polju za pretraživanje (označeno zelenom bojom na fotografiji) i kliknite za dodavanje bloka grupe (crvena strelica). To će vam omogućiti da dodate neke prilagođene postavke elementu bloka.
Na primjer, kliknite na opciju "Promijeni poravnanje" (crvena strelica) i odaberite "Puna širina" (zelena strelica). To će širinu bloka koji će sadržavati našu interaktivnu kartu Google karata učiniti punom širinom.
Zatim kliknite veliki gumb "+" unutar grupe (crvena strelica na gornjoj fotografiji). Potražite "HTML" u traci za pretraživanje (označeno zelenom bojom) i kliknite na blok "Prilagođeni HTML" (plava strelica).
Vidjet ćete da sada piše "Napišite html..." (crvena strelica). Ovo je mjesto gdje ćemo dodati našu kartu.
Korak 2: Generirajte Google Maps Embed HTML
Sada ćemo morati generirati našu kartu s Google kartama. Da biste to učinili, otvorite novu karticu preglednika i idite na Google.com ako to nije vaš zadani preglednik za pretraživanje.
Zatim upišite adresu koju želite prikazati na karti. Za ovaj primjer upotrijebit ću Empire State Building (crvena strelica). Za ovaj dio možete upotrijebiti točnu adresu svoje tvrtke (tj. kućni broj, ulicu, grad, državu i poštanski broj – ili što god upišete za međunarodne adrese ako niste u SAD-u).
Kliknite na sliku karte koja se pojavljuje za vašu adresu na stranici s rezultatima tražilice (crvena strelica na slici – ona će biti u sredini stranice ili udesno, ovisno o tome jeste li upisali adresu ili naziv mjesto, kao i ja).
Vaša adresa će se sada pojaviti kao oznaka na karti preko cijelog zaslona (crvena strelica na gornjoj slici). Također ćete vidjeti nekoliko ikona ispod adrese ili naslova mjesta koje ste tražili. Ove ikone uključuju "Upute", "Spremi", "U blizini", "Pošalji na telefon" i "Dijeli". Kliknite na ikonu "Dijeli" (plava strelica).
Na kartici "Dijeli" koja se pojavi kliknite na karticu "Ugradi kartu" (plava strelica na gornjoj fotografiji).
Na ovoj kartici vidjet ćete pregled svog ugrađenog widgeta Google karte. Na lijevoj strani koda nalazi se padajući izbornik veličine (zelena strelica) – možete odabrati unaprijed pripremljenu veličinu ili odabrati “Prilagođeno” da postavite vlastitu veličinu. Odabrat ću opciju "Prilagođeno" (crvena strelica).
Ovdje ćete vidjeti dimenzije za moju prilagođenu kartu. Postavit ću visinu, odnosno prvu dimenziju, na 1200 (crvena strelica). Ostavit ću širinu postavljenu na 600. Možete kliknuti "Pregled stvarne veličine" (zelena strelica) za prikaz karte u novom skočnom prozoru u punoj veličini (provjerite jeste li onemogućili sve blokatore skočnih prozora ako ih imate uključeno kako bi se izbjeglo blokiranje prozora). Izađite iz prozora pregleda kada završite.
Zatim kliknite vezu "Kopiraj HTML" (plava strelica). Ovo je kod koji ćemo unijeti na našu WordPress stranicu.
Korak 3: Zalijepite HTML kod na WordPress stranicu
Vratite se na karticu preglednika koja sadrži vaše WordPress web mjesto. Kliknite na prazan HTML blok gdje piše "Ovdje napišite HTML..." i zalijepite kod (crvena strelica) pritiskom na ctrl+v na tipkovnici (cmd+v na Macu).
Ako kliknete opciju "Pregled" na alatnoj traci za blokiranje (crvena strelica), sada ćete vidjeti svoju kartu prikazanu na svojoj stranici (zelena strelica). Kliknite natrag na opciju “HTML” za povratak na HTML kod (plava strelica).
Imamo našu kartu ugrađenu na našu stranicu, ali ne reagira – što znači da ako kartu gledamo na manjem ekranu, poput tableta ili telefona, neće prilagoditi svoju veličinu da stane na ekran. Da bismo to popravili, moramo dodati prilagođeni stil HTML kodu.
Korak 4: Učinite Google Maps responzivnim
bit ću pomoću koda koji sam dobio s ove web stranice kako bi ugrađeni Google Maps bio osjetljiv. Pomaknite se prema dolje do odjeljka s oznakom "Kako brzo ugraditi Google karte" (crvena strelica). Zatim se pomaknite prema dolje do drugog skupa kodova (plava strelica).
Kopiraj sve 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).
Vratite se na WordPress. Kliknite mišem na samom početku HTML koda kako biste umetnuli ovaj novi kod na početak (crvena strelica). Pritisnite ctrl+v da zalijepite svoj kod.
Na kraju kliknite na sam kraj HTML koda (crvena strelica) i upišite “ ” zatvoriti sve. Uglavnom, ono što ste upravo učinili je omotati vaš HTML kod u prilagođeni stil. Ovaj stil govori pregledniku posjetitelja da promijeni veličinu karte na temelju veličine prozora u kojem je gleda.
Korak 5: Podesite omjer slike interaktivne karte
Još jedna posljednja stvar koju moramo učiniti – pomaknite se natrag do vrha koda dok ne vidite "padding-bottom: 75%;" (crvena strelica). Ovaj dio koda određuje omjer slike karte.
Budući da sam promijenio veličinu karte na 1200 x 600, omjer je 2:1. Za ovo moram promijeniti postotak na "50%" (crvena strelica).
Ako niste sigurni koji postotak trebate koristiti za svoju kartu, jednostavno uzmite omjer slike (tj. 16:9) i podijelite drugi broj s prvim kako biste dobili svoj postotak (9 podijeljeno sa 16 je 56.25%).
Kliknite "Ažuriraj" da biste primijenili svoje promjene (plava strelica na gornjoj slici), zatim kliknite "Prikaži stranicu" u donjem lijevom kutu da vidite rezultat.
Sada biste trebali vidjeti prikazan widget Google Maps (crvena strelica na gornjoj slici).
Možete testirati odziv tako da smanjite veličinu preglednika, a zatim se pomaknete natrag na područje web stranice koje ima kartu.
To je to za ovaj tutorial! Ako vam se svidjelo i želite naučiti kako napraviti vlastitu profesionalnu WordPress web stranicu od nule, možete se prijaviti na moj Pojednostavljeni WordPress: tečaj Kako izgraditi moćne web stranice na Udemyju, ili pogledajte moje druge Vodiči za WordPress!
