Jak dodać interaktywną mapę w WordPress

Dodanie mapy do witryny WordPress jest ważne, gdy prowadzisz firmę z fizyczną lokalizacją lub tworzysz treści o konkretnych miejscach.

Na początku może się to wydawać skomplikowane, ale znaleźliśmy kilka pomocnych narzędzi, które znacznie ułatwiają ten proces. W tym artykule pokażemy Ci dwie proste metody dodawania interaktywnej mapy do Twojej witryny WordPress.

Przeprowadzimy Cię przez każdy krok, od wyboru odpowiedniego narzędzia po osadzenie mapy na Twojej stronie.

Kiedy dodać interaktywną mapę w WordPressie

Jeśli prowadzisz fizyczną działalność, taką jak sklep lub kawiarnia, interaktywna mapa może pomóc potencjalnym klientom znaleźć Twoją lokalizację. Może to przynieść Ci więcej klientów, sprzedaży, a nawet osobiste wizyty i rezerwacje.

Może to również poprawić doświadczenie użytkownika, ponieważ odwiedzający mogą zaplanować swoją podróż bez konieczności korzystania z osobnej aplikacji mapowej lub strony internetowej.

W zależności od Twojej strony internetowej, interaktywna mapa może nawet dostarczać przydatnych treści. Na przykład, jeśli masz blog o fitnessie, możesz pokazać czytelnikom polecane trasy biegowe lub piesze.

Podobnie, jeśli masz blog rodzinny, możesz wyróżnić wszystkie atrakcje przyjazne dzieciom, gdzie Twoi odbiorcy mogą zabrać swoje rodziny.

Mając to na uwadze, zobaczmy dwa przyjazne dla początkujących sposoby dodawania interaktywnej mapy w WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1. Dodaj interaktywną mapę świata za pomocą kreatora stron (niestandardowe strony z mapami)
• Metoda 2. Tworzenie interaktywnych map niestandardowych za darmo za pomocą Google Moje Mapy

Metoda 1. Dodaj interaktywną mapę świata za pomocą kreatora stron (Niestandardowe strony z mapami)

Najprostszym sposobem dodania prostej interaktywnej mapy w WordPress jest użycie Map Google i wtyczki SeedProd.

Ten zaawansowany kreator stron pozwala tworzyć profesjonalnie zaprojektowane strony bez konieczności pisania ani jednej linijki kodu.

Posiada również gotowy blok Map Google, który można po prostu przeciągnąć i upuścić na układ. Odwiedzający mogą wchodzić w interakcję z mapą za pomocą przycisków powiększenia lub przeciągać, aby eksplorować inne obszary.

SeedProd ułatwia projektowanie samodzielnych stron o unikalnym wyglądzie, dzięki czemu jest to również świetny wybór, jeśli chcesz dodać interaktywną mapę do niestandardowej strony głównej lub strony docelowej.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz wprowadzić klucz licencyjny.

Te informacje znajdziesz w swoim koncie na stronie SeedProd. Po dodaniu klucza licencyjnego kliknij „Zweryfikuj klucz”.

Po wykonaniu tej czynności przejdź do SeedProd » Strony docelowe i kliknij „Dodaj nową stronę docelową”.

SeedProd wyświetli teraz wszystkie szablony, których możesz użyć do tworzenia pięknych stron docelowych, stron sprzedażowych i nie tylko. Aby pomóc Ci znaleźć odpowiedni szablon dla Twojej witryny, szablony SeedProd są podzielone na kategorie, takie jak tryb konserwacji, wkrótce, webinar i inne.

Aby przyjrzeć się bliżej dowolnemu projektowi, po prostu najedź kursorem myszy na ten szablon. Następnie kliknij ikonę lupy.

Spowoduje to otwarcie szablonu w nowej karcie.

Kiedy znajdziesz projekt, którego chcesz użyć na swojej stronie WordPress, po prostu kliknij „Wybierz ten szablon”.

Możesz teraz wpisać nazwę swojej strony docelowej w polu „Nazwa strony”. Służy to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

SeedProd automatycznie utworzy „URL strony” na podstawie nazwy strony, ale możesz zmienić ten automatycznie wygenerowany adres URL.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „Zapisz i rozpocznij edycję strony”. Spowoduje to załadowanie interfejsu konstruktora stron SeedProd.

Ten prosty kreator typu „przeciągnij i upuść” pokazuje podgląd strony na żywo po prawej stronie. Po lewej znajduje się menu pokazujące różne bloki i sekcje, które można dodać do swojego bloga WordPress lub witryny.

SeedProd zawiera ponad 90 gotowych bloków, które pomogą Ci szybko zaprojektować piękną stronę. Obejmuje to zaawansowane bloki, takie jak liczniki czasu i osadzenia, takie jak odtwarzacz audio z serwisu SoundCloud lub filmy z TikTok.

Możesz również użyć bloków SeedProd, takich jak separatory, kolumny i linie rozdzielające, do strukturyzacji strony. Może to pomóc odwiedzającym w nawigacji po stronie i znalezieniu informacji, których szukają.

Gdy znajdziesz blok, który chcesz dodać do układu strony, po prostu przeciągnij i upuść go na szablon. Podczas tworzenia strony docelowej możesz przesuwać te bloki w swoim układzie, przeciągając je i upuszczając.

Aby dodać interaktywną mapę, po prostu znajdź blok Google Maps w menu po lewej stronie i przeciągnij go na swój układ.

Blok Mapy Google pokaże domyślną lokalizację, ale zazwyczaj będziesz chciał ją zmienić.

Po prostu kliknij, aby wybrać blok Mapy Google, a następnie kliknij małą ikonę zębatki, która pojawi się na pasku narzędzi.

Otwiera to ustawienia bloku w menu po lewej stronie.

Tutaj wpisz inny adres w polu „Lokalizacja”.

Blok zostanie teraz zaktualizowany, aby wyświetlić ten adres.

Odwiedzający mogą ręcznie powiększać i pomniejszać tę lokalizację, korzystając z przycisków „+” i „-” w prawym rogu mapy. Możesz jednak zmienić domyślne powiększenie, przeciągając suwak „Powiększenie” lub wpisując dokładną liczbę w polu tekstowym.

Następnie możesz zmienić rozmiar bloku za pomocą suwaków „Szerokość” i „Wysokość”. „Wysokość” jest podana w pikselach, ale „Szerokość” to całkowita dostępna procentowa wartość. Na przykład „100” oznacza, że blok Map Google zajmuje 100% dostępnej szerokości.

Aby zmienić którąkolwiek z tych wartości, po prostu przeciągnij suwaki lub wpisz liczbę w pole tekstowe. W miarę wprowadzania zmian blok Map Google będzie się automatycznie aktualizować, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

Jeśli ustawisz szerokość na mniej niż 100, możesz chcieć zmienić wyrównanie bloku. Na przykład możesz wyświetlić interaktywną mapę na środku strony.

Aby wprowadzić tę zmianę, po prostu kliknij różne przyciski w sekcji „Wyrównanie”.

Możesz teraz kontynuować pracę nad projektem, przeciągając nowe bloki na układ strony, a następnie dokonując zmian w menu po lewej stronie. Więcej informacji znajdziesz w naszym przewodniku jak stworzyć stronę docelową w WordPressie.

Gdy będziesz zadowolony z konfiguracji strony, kliknij strzałkę obok przycisku „Zapisz”, a następnie wybierz „Opublikuj”.

Teraz, jeśli odwiedzisz swoją witrynę, zobaczysz interaktywną mapę w akcji.

Metoda 2. Twórz interaktywne niestandardowe mapy za darmo za pomocą Google Moje Mapy

Jeśli chcesz dodać Mapę Google z podstawowymi interakcjami, SeedProd jest doskonałym wyborem.

Jednakże, jeśli potrzebujesz bardziej zaawansowanych interakcji, zalecamy zamiast tego skorzystanie z Google Moje Mapy.

Ta bezpłatna usługa online pozwala dostosować Mapę Google za pomocą unikalnych znaczników, punktów zainteresowania, wskazówek dojazdu i nie tylko. Następnie możesz dodać ją do swojej witryny za pomocą kodu, dzięki czemu nie będziesz musiał instalować osobnego wtyczki WordPress.

Krok 1: Utwórz interaktywną mapę za pomocą Google Moje Mapy

Najpierw musisz odwiedzić stronę Google Moje Mapy i kliknąć „Utwórz nową mapę”.

Zobaczysz teraz edytor mapy.

Tutaj możesz wybrać mapę bazową i dodać punkty zainteresowania, warstwy i inne.

Aby pomóc w utrzymaniu porządku w pracy, warto nadać warstwie nazwę.

Aby to zrobić, kliknij trzy kropki obok „Warstwa bez tytułu”, a następnie wybierz „Zmień nazwę tej warstwy”.

Teraz możesz wpisać nazwę, której chcesz użyć. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Po wykonaniu tej czynności kliknij „Zapisz”.

Następnie możesz zmienić wygląd mapy, wybierając jeden z gotowych stylów. Aby zobaczyć dostępne opcje, kliknij strzałkę obok „Mapa bazowa”.

Następnie możesz kliknąć dowolny z miniatur, aby zastosować ten styl do mapy.

Krok 2: Dodaj punkty zainteresowania do interaktywnej mapy

Jeśli chcesz po prostu utworzyć prostą mapę, możesz przejść do kroku 4. Możesz jednak chcieć dostosować mapę, dodając punkty zainteresowania.

Kiedy odwiedzający kliknie którykolwiek z tych punktów, otworzy się etykietka z nazwą lokalizacji, opisem, zdjęciami i filmami, jeśli są dostępne.

Istnieje kilka sposobów dodawania klikalnych punktów zainteresowania, ale najłatwiejszym jest wpisanie adresu w pasek wyszukiwania, a następnie kliknięcie ikony „Szukaj”.

Google Moje Mapy powiększy teraz obszar.

Czasami lokalizacja może być już dodana jako punkt zainteresowania, zwłaszcza jeśli jest to duża atrakcja turystyczna lub znany budynek. W takim przypadku możesz po prostu kliknąć lokalizację, a następnie wybrać „Dodaj do mapy”.

Jeśli punkt zainteresowania już istnieje, Google Moje Mapy automatycznie wyświetli informacje o tej lokalizacji w oknie podręcznym. Możesz jednak chcieć dostosować te domyślne informacje lub dodać własne zdjęcia i filmy.

Aby to zrobić, kliknij ikonę „Edytuj”, która wygląda jak mały ołówek.

Teraz możesz wpisać tytuł i opis, które chcesz pokazać każdemu, kto kliknie to miejsce zainteresowania.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „Zapisz”.

Inną opcją jest dodanie własnych obrazów i filmów do wyskakującego okienka.

Na przykład, jeśli tworzysz interaktywną mapę dla swojej strony restauracji, możesz dodać zdjęcia zewnętrza lokalu, aby pomóc klientom go znaleźć.

Możesz nawet użyć tego okna podręcznego, aby pozyskać więcej klientów. Na przykład, jeśli dodajesz swoje studio fotograficzne jako punkt zainteresowania, możesz przesłać swoje portfolio fotograficzne.

Aby dodać multimedia, po prostu kliknij małą ikonę aparatu.

Teraz możesz wybrać obraz lub film w pojawiającym się oknie podręcznym.

Po dokonaniu wyboru kliknij „Wstaw”.

Po zakończeniu nie zapomnij kliknąć „Zapisz”, aby zachować zmiany.

Czasami możesz chcieć pokazać lokalizację, która nie została dodana do Map Google. Może to być Twoje własne biuro, lokalizator sklepów, zupełnie nowa atrakcja turystyczna lub miejsce spotkania na Twoje wydarzenie lub konferencję.

Aby dodać znacznik, kliknij ikonę „Dodaj znacznik” poniżej paska wyszukiwania.

Teraz możesz kliknąć w dokładne miejsce, w którym chcesz utworzyć znacznik.

Spowoduje to otwarcie pustego wyskakującego okienka, w którym możesz wpisać tytuł i opis. Możesz także dodawać obrazy i filmy, klikając małą ikonę aparatu.

Gdy będziesz zadowolony z konfiguracji okna podręcznego, kliknij przycisk „Zapisz”.

Aby utworzyć więcej punktów zainteresowania, po prostu postępuj zgodnie z powyższym procesem.

Krok 3: Dodaj wskazówki podróży do interaktywnej mapy

Możesz również dodać wskazówki, które będą wyświetlane jako niebieska linia na mapie.

Ta funkcja mapy może być przydatna, jeśli chcesz pomóc uczestnikom znaleźć Twoje wydarzenie lub miejsce, takie jak Twój bar lub pub. Jeśli prowadzisz bloga podróżniczego, możesz nawet polecić czytelnikom trasy zwiedzania.

Istnieje kilka różnych sposobów dodawania wskazówek, ale najłatwiejszą metodą jest kliknięcie ikony „Dodaj wskazówki” poniżej paska wyszukiwania.

Dodaje to nową sekcję po lewej stronie ekranu, gdzie możesz wpisać adresy początkowy i końcowy, których chcesz użyć.

Domyślnie Mapy Google będą wyświetlać wskazówki dojazdu, ale zamiast tego możesz przełączyć się na wskazówki piesze lub rowerowe. Po prostu kliknij tekst, który domyślnie pokazuje „Jazda”, a następnie wybierz ikonę Rower lub Pieszy.

Inną opcją jest narysowanie linii na mapie. Jest to przydatne, jeśli chcesz pokazać bardzo konkretną trasę między dwoma lub więcej lokalizacjami, a nie najszybszą trasę.

Aby to zrobić, kliknij ikonę „Rysuj linię” pod paskiem wyszukiwania. Teraz możesz wybrać, czy chcesz dodać trasę pieszą, rowerową, czy samochodową.

Następnie kliknij punkt początkowy i narysuj linię, przesuwając myszą wzdłuż trasy, którą chcesz pokonać.

Po dotarciu do celu po prostu kliknij, aby umieścić znacznik w tym miejscu. W tym momencie możesz przestać rysować lub kontynuować przesuwanie myszy, aby dodać więcej znaczników do trasy.

Krok 4: Opublikuj interaktywną mapę w WordPress

Kiedy będziesz zadowolony z konfiguracji mapy, możesz dodać ją do swojej strony internetowej, używając kodu osadzania iFrame.

Aby rozpocząć, musisz udostępnić mapę, klikając przycisk „Udostępnij”. Otworzy się okno, w którym możesz wpisać tytuł mapy i opcjonalny opis.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „OK”.

Następnie chcesz włączyć przełącznik „Każdy, kto ma ten link, może wyświetlić”. Pozostałe ustawienia są opcjonalne, więc możesz zdecydować, czy pozwolić ludziom na wyszukiwanie mapy, czy wyświetlać swoje imię i zdjęcie profilowe.

Gdy będziesz zadowolony z konfiguracji, kliknij „Udostępnij na Dysku”.

W następnym wyskakującym okienku otwórz menu rozwijane pod „Ogólny dostęp” i wybierz „Każdy z linkiem”.

Ponieważ nie chcemy, aby inni edytowali mapę, kliknij na menu rozwijane „Widz/Edytor” i wybierz „Widz”. Na koniec kliknij „Gotowe”.

Następnie kliknij ikonę trzech kropek w menu po lewej stronie.

Następnie wybierz „Osadź na mojej stronie”.

Google Maps będzie teraz wyświetlać kod osadzania, który pozwoli Ci dodać mapę do Twojego sklepu internetowego, bloga lub strony internetowej.

Możesz skopiować ten kod iframe.

Jesteś teraz gotowy do wklejenia kodu na swoją stronę. W panelu administracyjnym WordPress przejdź do wpisu lub strony, na której chcesz dodać interaktywną mapę i otwórz edytor Gutenberg.

Następnie kliknij przycisk „+” i zacznij wpisywać „HTML”, aby znaleźć blok niestandardowego HTML. Gdy pojawi się właściwy blok, kliknij go, aby dodać do wpisu lub strony.

Możesz teraz wkleić kod Mapy Google do bloku Niestandardowy HTML.

Kiedy będziesz gotowy do publikacji, kliknij przycisk „Zaktualizuj” lub „Opublikuj”.

Teraz, jeśli odwiedzisz swoją witrynę, zobaczysz interaktywną mapę na żywo.

Chcesz dowiedzieć się więcej o dodawaniu map do WordPress? Sprawdź poniższe artykuły:

• Jak dodać Google Maps w WordPress (WŁAŚCIWY sposób)
• Najlepsze wtyczki Google Maps dla WordPress (większość jest darmowa)
• Jak osadzić mapę Google w formularzach kontaktowych (z pinezką mapy)
• Jak dodać lokalizator sklepu Google Maps w WordPress
• Jak osadzić Mapy Bing w WordPressie (krok po kroku)

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się dodawać interaktywną mapę w WordPress. Możesz również dowiedzieć się, jak dodać Google Web Stories do swojej witryny WordPress lub przeczytać nasz ostateczny przewodnik po osadzaniu plików PDF, arkuszy kalkulacyjnych i innych elementów w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.