12

Přidání mapy ve WordPressu

Připadá vám, že máte příliš strohé kontaktní údaje? Když se na webu vytváří sekce s kontaktem, můžete návštěvníkům ulehčit práci s hledáním provozovny, případně jakéhokoliv jiného místa, a to přidáním interaktivní mapy.  Podíváme se tedy, jak ji lze na web umístit.

Nejlepší dostupnou mapou na internetu je mapa od Googlu, na samotný web ji lze umístit prostřednictvím nejpoužívanějšího pluginu pro tyto účely, který nese název WP Google Maps. Prostřednictvím něho lze umístit na web plně nastavitelnou mapu s ukazatelem požadovaného místa. Ukážeme si, jak plugin nainstalovat a správně nastavit:

Krok 1: Jdeme do sekce Pluginy-Instalace pluginů a do vyhledávacího okénka napíšeme WP Google Maps, hledání potvrdíme Enterem. Nalezený plugin nainstalujeme.

1

Krok 2: Plugin aktivujeme.

2

Krok 3: Po instalaci se nám zobrazí v seznamu pluginů. Nyní je potřeba plugin nastavit. V levém kontextovém menu nám přibyla položka s tímto pluginem, takže na ní najedeme a vybereme Maps-Maps.

3

Krok 4: Nyní se nám zobrazila předpřipravená mapa, kterou si jen upravíme, klikneme tedy na „Edit“.

4

Krok 5: Nyní se nám zobrazila stránka s nastavením mapy. V první sekci (Map settings) nás bude zajímat jen první karta (General settings), zde si nastavíme jméno mapy, její velikost a také úroveň přiblížení. Tyto parametry lze nastavit, nebo upravit, i později. Důležité je i zarovnání mapy, tedy jestli ji budete chtít volně, na středu nebo na straně.

5

Krok 6: Sjedeme kurzorem níže a nalezneme tam okénko pro nastavení značky, tedy ukazatele, který bude ukazovat na potřebné místo. Do prvního okénka zadáme adresu, v našem případě stačilo zadat ulici. Můžeme si zde nastavit i animaci, pokud chceme, aby ukazatel poskakoval, zvolíme jako animaci „Bounce“. Po vyplnění klikneme na „Add marker“.

6

Krok 7: Následně se nám zobrazí značka přesně na zvolené adrese. Pomocí kolečka myši si nastavte úroveň přiblížení. Tak jak si zde mapu nastavíme, tak se bude zobrazovat na příslušné stránce.

7

Krok 8: Když sjedeme kurzorem ještě níže, můžeme si všimnout, že nám nová adresa přibyla v seznamu značek. Do jedné mapy lze vložit i více značek.

8

Krok 9: Nyní nejdůležitější krok, mapu si uložíme, klikneme na „Save map“. Pokud bychom šli bez uložení na jinou stránku, museli bychom vše nastavovat znovu.

9

Krok 10: Nyní mapu umístíme na příslušnou stránku. Uděláme to prostřednictvím kódu, který na stránku vložíme. Kód se nachází nahoře, v kartě „General settings“. Kód tedy označíme a zkopírujeme (Ctrl+C).

10

Krok 11: Nyní přejdeme na stránku, nebo příspěvek, kde chceme, aby se mapa zobrazovala, a tam kód vložíme. Kód bych rád umístil na stránku s kontaktem, přešel jsem tedy na stránky a vybral si stránku, kam kód vložím. Po vložení stránku aktualizujeme a přejdeme z administrace na web, podíváme se, jak mapa vypadá.

11

Krok 12: Mapa se zobrazuje přesně tak, jak jsem si ji nastavil. Velmi dobře vypadá, pokud se zkombinuje i s kontaktním formulářem (Contact form 7) a umístí se pod něj, nebo vedle něj. Nyní mapu uvidí každý návštěvník sekce s kontaktem a rázem bude vědět, kde nás hledat.

12