Jak dodać Google Maps Store Locator w WordPress

Czy chcesz dodać Google Maps store locator w WordPress? Lokalizator sklepu to mapa wskazująca lokalizację Twojej firmy.

Pozwala użytkownikom zlokalizować cię na mapie, znaleźć wskazówki dojazdu lub udostępnić lokalizację znajomym. Dodanie lokalizatora sklepu do witryny biznesowej lub nawet sklepu internetowego pomaga natychmiast zdobyć zaufanie użytkowników.

W tym artykule pokażemy, jak łatwo dodać Google Maps store locator w WordPress.

Google Maps wprowadził płatne API do wyświetlania map na stronach internetowych. Nadal oferują ograniczoną bezpłatną opcję osadzania Map Google na małych stronach internetowych.

Większość wtyczek Map Google dla WordPress korzysta z Google API do pobierania i wyświetlania map. Jeśli chcesz użyć wtyczki Google Maps, musisz zarejestrować się na platformie Google API i włączyć opcję fakturowania.

Jest to usługa pay as you go, co oznacza, że opłata zostanie naliczona na podstawie liczby połączeń API wykonanych z twojej witryny.

Pokażemy Ci zarówno bezpłatne, jak i płatne metody z ich zaletami i wadami, a następnie możesz wybrać ten, który najlepiej odpowiada twoim potrzebom.

Metoda 1. Dodawanie Map Google do swojej witryny za darmo

Ta metoda jest łatwiejsza i darmowa. Wadą jest to, że nie można pokazać wielu sklepów na jednej mapie.

Jest to zalecane dla użytkowników, którzy chcą tylko dodać jedną lokalizację sklepu Google Maps na swojej stronie internetowej.

Najpierw musisz odwiedzić stronę Google Maps na swoim komputerze. Następnie wprowadź adres swojego sklepu w polu wyszukiwania, a Google Maps pokaże go na mapie z przypiętym znacznikiem na mapie.

Upewnij się, że marker jest umieszczony we właściwym miejscu. Możesz wybrać poziom powiększenia, klikając przycisk powiększenia. Gdy jesteś zadowolony z poziomu powiększenia, musisz kliknąć przycisk Udostępnij z lewej kolumny.

Spowoduje to wyświetlenie okienka, w którym musisz przełączyć się na kartę „osadzić mapę”. Teraz zobaczysz wyszukiwaną lokalizację na mapie z kodem HTML.

Kliknij link Kopiuj HTML, aby uzyskać kod do osadzenia.

Teraz przejdź do obszaru administracyjnego swojej witryny WordPress. Po przejściu do obszaru administracyjnego Edytuj post lub stronę, na której chcesz wyświetlić mapę lokalizacji sklepu.

Zwykle użytkownicy dodają mapę lokalizacji sklepu na swojej stronie formularza kontaktowego z numerem telefonu i godzinami otwarcia.

Na ekranie edycji postu musisz dodać niestandardowy blok HTML.

W obszarze tekstowym niestandardowego bloku HTML musisz wkleić kod skopiowany z Map Google.

Możesz teraz przełączyć się na kartę Podgląd, aby zobaczyć mapy Google osadzone na stronie. Wyświetli lokalizację Twojego sklepu zaznaczoną na mapie z linkami do dojazdu lub do zapisania lokalizacji.

Metoda 2. Dodaj Google Maps Store Locator za pomocą wtyczki WordPress

Ta metoda jest zalecana dla użytkowników, którzy chcą pokazać wiele lokalizacji sklepu na mapie Google.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę lokalizatora sklepu WP. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Jest to darmowa wtyczka Google Maps, która pozwala tworzyć niestandardową mapę z wieloma lokalizacjami sklepów i niestandardowymi polami.

Wadą tej metody jest to, że wymaga ona dodania klucza API. Aby korzystać z klucza API, musisz podać swoje dane rozliczeniowe. Ceny i inne informacje można znaleźć na stronie Google Maps Platform.

Gotowi, zaczynajmy.

Punkt 1. Generowanie kluczy API Map Google

Aby użyć wtyczki WP Store Locator, musisz wygenerować dwa klucze API. Pierwszy z nich nazywa się kluczem API przeglądarki, a drugi nazywa się kluczem serwera.

Zacznijmy od klucza przeglądarki. Kliknij ten link Google Developer Console, aby przejść do witryny Google API z włączonymi wszystkimi wymaganymi interfejsami API.

Musisz utworzyć nowy projekt i nadać mu nazwę, która pomoże Ci zidentyfikować projekt. Następnie będziesz musiał poczekać kilka chwil, gdy konsola utworzy dla Ciebie projekt.

Następnie zostaniesz przekierowany na stronę konfiguracji klucza API. Musisz podać tytuł swojego klucza API,aby łatwo zidentyfikować go jako klucz API przeglądarki dla Twojego projektu Google Maps.

Następnie musisz ustawić „ograniczenia aplikacji” na „odsyłacze HTTP”. Poniżej musisz ustawić pole „Akceptuj żądania od” dla nazwy domeny w następującym formacie.

https://example.com/*
https://*. example.com / * (jeśli używasz subdomeny)

Na koniec kliknij przycisk „Utwórz”. Konsola zapisze teraz Twoje ustawienia i pokaże ci klucz przeglądarki. Musisz skopiować i wkleić ten klucz do edytora tekstu, będziesz go potrzebować później.

Następnie musisz utworzyć klucz API serwera. Kliknij ten link Google Developer Console, aby przejść bezpośrednio do konsoli z włączonymi wybranymi interfejsami API.

Po raz kolejny zobaczysz stronę Utwórz projekt. Jednak ponieważ masz już utworzony projekt, możesz po prostu kliknąć menu rozwijane i wybrać swój projekt.

Następnie zostaniesz przekierowany do strony konfiguracji API. Podaj nazwę tego klucza API, która pomoże Ci rozpoznać go jako klucz serwera.

W sekcji „Ograniczenia aplikacji” musisz wybrać adresy IP. Zasadniczo mówimy Google, aby akceptował tylko żądania serwera pochodzące z określonych adresów IP.

Teraz musisz poprosić swojego dostawcę hostingu WordPress o podanie zakresu IP używanego przez twoje konto hostingowe. Będzie to w następującym formacie:

172.16.0.0/12

Następnie należy kliknąć przycisk „Utwórz”, aby zapisać ustawienia i skopiować klucz API serwera.

Punkt 2. Konfigurowanie wtyczki lokalizatora sklepu WP

Po utworzeniu kluczy API musisz udać się do Lokalizator Sklepu ” Ustawienia strona do konfiguracji wtyczki.

Wprowadź wygenerowane wcześniej klucze API przeglądarki map Google i serwera. Następnie wybierz język i region map, a następnie kliknij przycisk Zapisz zmiany, aby zapisać ustawienia.

Teraz musisz przewinąć stronę ustawień do sekcji „mapa” i wprowadzić punkt początkowy mapy. Tym punktem startowym może być miasto lub kraj, więc użytkownicy mogą zobaczyć znaczniki umieszczone w różnych miejscach.

Istnieje wiele innych opcji na stronie ustawień, w tym styl mapy, Domyślny poziom powiększenia, typ mapy, promień wyszukiwania, kraj itp. Możesz je przejrzeć i dostosować do swoich potrzeb.

Gdy skończysz, nadszedł czas, aby dodać lokalizacje.

Punkt 3. Dodawanie lokalizacji sklepów

Przejdź do Lokalizator Sklepów ” Nowy Sklep strona, aby dodać swoją pierwszą lokalizację. Nowa strona Sklepu będzie wyglądać tak jak domyślny Post lub edytor stron w WordPress.

Podaj tytuł swojego sklepu, a następnie przewiń w dół do sekcji „Szczegóły sklepu”. Stąd musisz wprowadzić adres swojego sklepu.

W prawej kolumnie zobaczysz mapę, jednak nie zostanie ona automatycznie zaktualizowana do podanego adresu. Musisz kliknąć przycisk Publikuj, aby zapisać swoją lokalizację. Następnie odśwież stronę, a Mapa wskaże podany adres.

Teraz powtórz proces, aby dodać inne lokalizacje sklepu. Możesz dodać dowolną liczbę lokalizacji sklepów.

Punkt 4. Dodawanie mapy lokalizatora sklepu w WordPress

Aby wyświetlić lokalizator sklepu na stronie WordPress, po prostu utwórz nową stronę lub edytuj istniejącą, na której chcesz wyświetlić mapę.

Na ekranie edycji postu musisz dodać blok „Shortcode” do obszaru edycji postu. Następnie dodaj [wpsl] w środku jest krótki kod.

Możesz teraz zapisać lub opublikować swoją stronę i kliknąć przycisk Podgląd, aby zobaczyć Google Maps store locator w akcji.

Wyświetli znaczniki mapy dla każdej lokalizacji sklepu i uruchomi mapę od preferowanego punktu początkowego. Na przykład na tej mapie koncentruje się na mieście West Palm Beach i pokazuje dwie lokalizacje sklepów na mapie.

To wszystko mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać Google Maps store locator w WordPress. Możesz również zobaczyć naszą listę bezpłatnych narzędzi Google, z których powinien korzystać każdy właściciel witryny.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.