Úvod
V tomto článku vám ukážu, jak přidat responzivní mapu Google Maps na webovou stránku WordPress (tj. pro stránku Kontakt) bez použití pluginu. V tomto tutoriálu budu používat WordPress 6.0 a také téma Twenty Twenty Two, což je výchozí téma pro tuto verzi WordPressu.
Funkce Map Google vám umožňuje zobrazit polohu vaší firmy na interaktivní mapě, což návštěvníkům webu umožňuje snadno zobrazit, kde se nacházíte, a pracovat s mapou, aby viděli, co dalšího je kolem vás, získali trasu atd. Návštěvníkům webu ukazuje že jste místní firma a máte skutečné fyzické místo. Je velmi běžné, že firmy mají na své kontaktní stránce mapu.
Existuje spousta pluginů pro Mapy Google, ale mnohé z nich jsou neohrabané a vyžadují buď platbu za úplné funkce pluginu, nebo účet vývojáře Google s komplikovanými kroky, které vedou k méně než žádoucímu výsledku.
Jak již bylo řečeno, existuje opravdu jednoduchý způsob, jak přidat Mapy Google na své stránky WordPress 6.0 bez pluginů a bez hromady složitých kroků. Pojďme se do toho ponořit.
Krok 1: Vytvořte blok HTML
Pro začátek se přihlaste do administrátorské oblasti svého webu WordPress a přejděte do sekce „Stránky“ (červená šipka na obrázku výše).
Klikněte na stránku, na kterou chcete přidat funkci Map Google (můžete kliknout na název stránky, v mém případě na „Kontakt“ – modrá šipka na obrázku výše – nebo jednoduše kliknout na „Upravit“ pod názvem stránky).
Pokud používáte téma bloku jako Twenty Twenty Two, budete nyní v Editoru bloků pro svou stránku. Přejděte dolů na místo, kam chcete mapu vložit.
Poté klikněte na ikonu „+“ (“Block Inserter” – červená šipka na obrázku výše) pro vložení bloku.
Vyhledejte „Skupina“ ve vyhledávacím poli (na fotografii zvýrazněno zeleně) a kliknutím přidejte blok skupiny (červená šipka). To vám umožní přidat k prvku bloku některá vlastní nastavení.
Klikněte například na možnost „Změnit zarovnání“ (červená šipka) a vyberte „Plná šířka“ (zelená šipka). Tím bude šířka bloku, který bude obsahovat naši interaktivní mapu Google Maps, plná.
Dále klikněte na velké tlačítko „+“ uvnitř skupiny (červená šipka na fotografii výše). Vyhledejte „HTML“ ve vyhledávacím řádku (zvýrazněno zeleně) a klikněte na blok „Vlastní HTML“ (modrá šipka).
Uvidíte, že nyní říká „Write html…“ (červená šipka). Zde přidáme naši mapu.
Krok 2: Vygenerujte HTML pro vložení Map Google
Nyní budeme muset vygenerovat naši mapu pomocí Google Maps. Chcete-li to provést, otevřete novou kartu prohlížeče a přejděte na stránku Google.com, pokud to není váš výchozí vyhledávací prohlížeč.
Dále zadejte adresu, kterou chcete zobrazit na mapě. Pro tento příklad použiji Empire State Building (červená šipka). Pro tuto část můžete použít přesnou adresu vaší firmy (tj. číslo ulice, ulice, město, stát a PSČ – nebo cokoli, co zadáte pro mezinárodní adresy, pokud nejste v USA).
Klikněte na obrázek mapy, který se zobrazí u vaší adresy na stránce s výsledky vyhledávače (červená šipka na obrázku – bude buď uprostřed stránky, nebo vpravo, v závislosti na tom, zda jste zadali adresu nebo název místo, jako jsem to udělal já).
Vaše adresa se nyní zobrazí jako značka na mapě přes celou obrazovku (červená šipka na obrázku výše). Pod adresou nebo názvem místa, které jste hledali, uvidíte také několik ikon. Tyto ikony zahrnují „Trasy“, „Uložit“, „V okolí“, „Odeslat do telefonu“ a „Sdílet“. Klikněte na ikonu „Sdílet“ (modrá šipka).
Na kartě „Sdílet“, která se zobrazí, klikněte na kartu „Vložit mapu“ (modrá šipka na fotografii výše).
Na této kartě uvidíte náhled svého vloženého widgetu Map Google. Na levé straně kódu je rozbalovací nabídka velikosti (zelená šipka) – můžete si vybrat předem vyrobenou velikost nebo zvolit „Vlastní“ a nastavit vlastní velikost. Vyberu možnost „Vlastní“ (červená šipka).
Zde uvidíte rozměry mé vlastní mapy. Výšku, neboli první rozměr, nastavím na 1200 (červená šipka). Šířku nechám nastavenou na 600. Kliknutím na „Náhled skutečné velikosti“ (zelená šipka) zobrazíte mapu v novém vyskakovacím okně v plné velikosti (nezapomeňte zakázat všechny blokovače vyskakovacích oken, pokud je máte zapnuto, aby nedošlo k zablokování okna). Jakmile budete hotovi, opusťte okno náhledu.
Dále klikněte na odkaz „Kopírovat HTML“ (modrá šipka). Toto je kód, který přineseme na naši stránku WordPress.
Krok 3: Vložte HTML kód na stránku WordPress
Přejděte zpět na kartu prohlížeče, která obsahuje váš web WordPress. Klikněte na prázdný blok HTML, kde je napsáno „Sem napište HTML…“ a vložte kód (červená šipka) stisknutím ctrl+v na klávesnici (cmd+v na počítači Mac).
Pokud kliknete na možnost „Náhled“ na panelu nástrojů Blokování (červená šipka), uvidíte nyní svou mapu zobrazenou na vaší stránce (zelená šipka). Kliknutím zpět na možnost „HTML“ se vrátíte do kódu HTML (modrá šipka).
Mapu máme vloženou na naší stránce, ale nereaguje – to znamená, že pokud si mapu prohlížíme na menší obrazovce, jako je tablet nebo telefon, nepřizpůsobí se její velikost, aby se vešla na obrazovku. Abychom to napravili, musíme do kódu HTML přidat vlastní styl.
Krok 4: Udělejte z Map Google responzivní
budu pomocí kódu, který jsem získal z tohoto webu aby bylo vložení Map Google responzivní. Přejděte dolů do části označené „Jak vložit Mapy Google responzivně“ (červená šipka). Poté přejděte dolů na druhou sadu kódů (modrá šipka).
Zkopírujte vše z „ ” 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).
Přejděte zpět na WordPress. Kliknutím myši na začátek kódu HTML vložte tento nový kód na začátek (červená šipka). Kód vložte stisknutím ctrl+v.
Nakonec klikněte na úplný konec HTML kódu (červená šipka) a napište „ “, abyste vše uzavřeli. V podstatě to, co jste právě udělali, je zabalení kódu HTML do vlastního stylu. Tento styl říká prohlížeči návštěvníka, aby změnil velikost mapy na základě velikosti okna, ve kterém si ji prohlíží.
Krok 5: Upravte poměr stran interaktivní mapy
Je tu poslední věc, kterou musíme udělat – přejděte zpět nahoru na začátek kódu, dokud neuvidíte „padding-bottom: 75%;“ (červená šipka). Tento kus kódu určuje poměr stran mapy.
Protože jsem změnil velikost mapy na 1200 x 600, má poměr stran 2:1. K tomu musím změnit procento na „50 %“ (červená šipka).
Pokud si nejste jisti, jaké procento byste měli pro svou mapu použít, jednoduše vezměte poměr stran (tj. 16:9) a vydělte druhé číslo prvním, abyste získali své procento (9 děleno 16 je 56.25 %).
Kliknutím na „Aktualizovat“ použijete změny (modrá šipka na obrázku výše), poté kliknutím na „Zobrazit stránku“ v levém dolním rohu zobrazíte výsledek.
Nyní by se měl zobrazit váš widget Map Google (červená šipka na obrázku výše).
Odezvu můžete otestovat zmenšením velikosti prohlížeče a poté posunutím zpět do oblasti webové stránky, která má mapu.
To je pro tento tutoriál vše! Pokud se vám to líbilo a chcete se naučit, jak vytvořit svůj vlastní profesionální web WordPress od začátku, můžete se přihlásit do mého WordPress Zjednodušený: Kurz Jak vytvořit výkonné webové stránky na Udemynebo se podívejte na mé další Výukové programy WordPress!
