Jak łatwo dodać wyszukiwanie lokalizacji do witryny z katalogiem w WordPress

Istnieje wiele różnych sposobów na ulepszenie witryny z katalogiem, a jednym z nich jest umożliwienie wyszukiwania na podstawie lokalizacji. Jeśli prowadzisz witrynę z katalogami lub ogłoszeniami podobną do Yelp, TripAdvisor, Craigslist lub inną podobną, która wymaga wyszukiwania na podstawie lokalizacji, możesz to łatwo zrobić, integrując ją z Mapami Google. Dla niektórych użytkowników jest to istotna funkcja, ponieważ mogą oni wyszukiwać produkty, usługi lub miejsca w swojej okolicy. Ponadto platforma Google Maps ma bezpłatny miesięczny limit, który powinien wystarczyć, jeśli Twoja witryna ma umiarkowany ruch.

W tym samouczku krok po kroku wyjaśnimy, jak dodać wyszukiwanie lokalizacji do witryny z katalogu. Wykorzystamy HivePress, darmową wtyczkę WordPress, która pozwala w mgnieniu oka stworzyć katalog stron internetowych. Wykorzysta również ListingHive, darmowy motyw katalogowy WordPress, wraz z rozszerzeniem HivePress Geolocation do integracji z Google Maps.

Jeśli jednak masz już witrynę katalogową zbudowaną z inną wtyczką lub motywem, możesz pominąć pierwsze kroki i przewinąć do „Jak naprawić” Ups! Coś poszło nie tak. Ta strona nie załadowała się poprawnie Mapy Google” ” w sekcji rozwiązywania najczęstszych błędów.

Przejdźmy więc do pierwszego kroku!

Instalowanie HivePress

Przede wszystkim musisz zainstalować HivePress. Możesz zainstalować ją jak każdą inną darmową wtyczkę w WordPressie. Po prostu przejdź do sekcji Wtyczki> Dodaj nowy i znajdź ją za pomocą paska wyszukiwania, a następnie zainstaluj i na koniec aktywuj, klikając przycisk „Aktywuj”. Po zakończeniu instalacji możesz przejść do następnego kroku – instalowania rozszerzeń.

Ponadto, jeśli okaże się to trudne, możesz skorzystać z poniższego screencastu, aby zainstalować HivePress bezpośrednio z pulpitu WordPress.

Instalowanie rozszerzeń

Następnym krokiem jest zainstalowanie rozszerzenia Geolokalizacja, aby umożliwić użytkownikom wyszukiwanie ofert według lokalizacji. Aby go zainstalować, po prostu najedź na sekcję HivePress i kliknij link "Rozszerzenia". Znajdź rozszerzenie Geolokalizacja na liście, kliknij przycisk „Zainstaluj” i na koniec aktywuj rozszerzenie.

Ponadto poniższy screencast pokazuje typowy proces instalowania rozszerzeń HivePress, dzięki czemu możesz śledzić go krok po kroku.

Tworzenie nowego projektu

Po zakończeniu instalacji wtyczki i rozszerzenia Geolokalizacja nadszedł czas, aby utworzyć projekt w Google Cloud Platform. Zakładając, że masz już konto Google, powinieneś mieć dostęp do tego pulpitu nawigacyjnego bez żadnych problemów. Jeśli jednak go nie masz, konieczne jest założenie konta Google.

Teraz musisz utworzyć projekt, klikając przycisk „Utwórz projekt”, następnie nazwij go, a na koniec kliknij przycisk „Utwórz”.

Konfigurowanie rozliczeń

Teraz, jeśli nie masz konta rozliczeniowego w Google, musisz utworzyć nowe, aby włączyć rozliczanie projektu. Ale nie martw się, teraz nie musisz nic płacić, to tylko jeden z warunków korzystania z interfejsu API Map Google. Wystarczy kliknąć link i wypełnić wszystkie pola formularza, w tym szczegóły metody płatności.

Co miesiąc otrzymasz darmowy kredyt w wysokości 200 USD, który w większości przypadków wystarczy na pokrycie kosztów korzystania z usług Google w Twojej witrynie. Możliwe jest również ustawienie limitów i powiadomień, dzięki czemu nigdy nie przekroczysz darmowego kredytu. Możesz sprawdzić Cennik, aby lepiej zrozumieć, jak to działa i upewnić się, że możesz korzystać z map za darmo.

Po dodaniu informacji rozliczeniowych pojawi się wyskakujące okienko z typami interfejsów API, które chcesz włączyć. Wybierz Mapy i Miejsca jak na poniższym zrzucie ekranu i kliknij przycisk „Włącz”. Ponadto, jeśli nie ma wyskakującego okienka, możesz włączyć te interfejsy API na stronie Biblioteka interfejsów Google API.

Tworzenie klucza API

Następnym krokiem jest stworzenie klucza API dla Twojej witryny. Aby to zrobić, przejdź do strony Poświadczenia i wybierz swój projekt.

Na stronie Poświadczenia możesz zobaczyć już wygenerowany klucz API. Jeśli właśnie utworzyłeś konto rozliczeniowe, klucz może zostać wygenerowany automatycznie. W takim przypadku możesz po prostu kliknąć, aby edytować. Jeśli jednak na stronie nie ma klucza API, możesz utworzyć nowy w sekcji Utwórz poświadczenia > Klucz API .

Następnie musisz skonfigurować klucz API, ustawiając ograniczenia aplikacji. Jest to niezbędne, ponieważ jeśli po prostu osadzisz klucz, pojawi się on w postaci zwykłego tekstu w kodzie źródłowym Twojej witryny. Dlatego musisz to ograniczyć, aby inne osoby nie mogły używać Twojego klucza API do swoich projektów. Aby to zrobić, po prostu dodaj referrer HTTP, aby zezwalać na żądania API tylko z Twojej witryny. Po prostu ustaw adres swojej witryny, ale także dodaj część „/*” na końcu, aby zezwolić na żądania API z dowolnej podstrony witryny, dzięki czemu Mapy Google będą działać na wszystkich stronach Twojej witryny.

Teraz musisz ustawić ograniczenia API w następnym polu. Kliknij Ogranicz klucz i wybierz Maps JavaScript API, Places API, Geocoding API z menu rozwijanego. Jeśli niektórych z wymienionych interfejsów API nie ma na liście, musisz je najpierw włączyć na stronie Maps API Library. Po włączeniu wszystkich trzech interfejsów API Google i wybraniu ich z menu rozwijanego kliknij przycisk „Zapisz”.

Włączanie integracji Map Google

Otóż ​​to! Właśnie utworzyłeś klucz API, a ostatnim szlifem jest włączenie Map Google w swojej witrynie. Najpierw skopiuj klucz API na stronie API i usługi > Poświadczenia . Teraz, jeśli używasz wtyczki HivePress, przejdź do pulpitu WordPress i przejdź do sekcji HivePress > Ustawienia > Integracje > Mapy Google . Następnie po prostu wklej swój klucz API w odpowiednim polu i kliknij przycisk „Zapisz zmiany”, aby dodać wyszukiwanie lokalizacji do swojej witryny.

Gratulacje! Od tego momentu Twoja witryna jest zintegrowana z Google Maps, a teraz możesz dodawać lokalizacje do istniejących wpisów w sekcji Ogłoszenia . Ponadto użytkownicy będą musieli ustawić lokalizację dla nowo dodanych ofert. Dodatkowo w Twojej witrynie znajduje się pole wyszukiwania lokalizacji i Mapa Google, dzięki czemu możesz je wypróbować i przeszukiwać niektóre wykazy według ich lokalizacji.

Rozwiązywanie problemów

Jeśli wystąpią jakiekolwiek problemy z utworzonym kluczem API, na mapie może pojawić się komunikat „Ups! Coś poszło nie tak. Ta strona nie wczytała poprawnie Map Google” . Jest to dość powszechny błąd, ponieważ konfigurowanie klucza API nie jest procesem bardzo przyjaznym dla użytkownika, a użytkownicy często pomijają niektóre kroki konfiguracji. Możesz to jednak naprawić w mgnieniu oka, jeśli znasz przyczyny problemu.

Aby znaleźć przyczynę tego błędu, musisz otworzyć konsolę JavaScript. Możesz go otworzyć za pomocą kilku naciśnięć klawiszy, które różnią się w zależności od przeglądarki. Sprawdź odpowiedź na StackOverflow, która wyjaśnia, jak otworzyć konsolę JavaScript. Jeśli używasz przeglądarki Chrome, możesz po prostu nacisnąć CTRL+Shift+I aby ją otworzyć. Po otwarciu powinieneś zobaczyć komunikat o błędzie, podobny do tego.

Ważne jest, aby dokładnie wiedzieć, co powoduje błąd, aby móc go naprawić. Może być kilka różnych błędów, ale pokażemy, jak rozwiązać te najczęstsze:

• MissingKeyMapError;
• Nieprawidłowy błąd mapy klucza;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

Jeśli jednak napotkasz błąd, który nie jest wymieniony powyżej, zapoznaj się z dokumentacją komunikatów o błędach interfejsu API Map Google, aby dowiedzieć się, co jest nie tak i jak to naprawić.

Brakujący błąd mapy klucza

Ten błąd oznacza, że ​​w ogóle nie ma klucza API, więc musisz go utworzyć, jeśli chcesz włączyć Mapy Google w swojej witrynie. Jeśli pojawi się ten błąd, zalecamy wykonanie tego samouczka, zaczynając od pierwszego kroku, aby utworzyć klucz API i poprawnie skonfigurować mapy.

Błąd nieprawidłowej mapy kluczy

Ten błąd pojawia się, gdy używasz niewłaściwego klucza API. Najprawdopodobniej stworzyłeś go, ale nie dodałeś go poprawnie do swojej witryny. Aby naprawić ten błąd, przejdź do strony Poświadczenia i skopiuj klucz API.

Jeśli korzystasz z wtyczki HivePress i jej rozszerzenia Geolokalizacja, przejdź do sekcji Pulpit nawigacyjny WordPressa > HivePress > Ustawienia > Integracje > Mapy Google , wklej klucz API w odpowiednim polu i kliknij przycisk „Zapisz zmiany”.

ApiNotActivatedMapError

Jeśli otrzymasz tego typu błąd, oznacza to, że nie włączyłeś wymaganych interfejsów API. W Bibliotece API Map Google jest wiele różnych interfejsów API, więc musisz przejść do Biblioteki i włączyć te, które są wymagane dla Twojego projektu. Po ich włączeniu pamiętaj, aby dodać je również do sekcji Ograniczenia API w ustawieniach klucza API w sekcji Poświadczenia.

Na przykład, jeśli używasz wtyczki HivePress z rozszerzeniem Geolokalizacja i chcesz dodać wyszukiwanie lokalizacji do swojej witryny z katalogiem, musisz włączyć i zezwolić na dostęp do następujących interfejsów API Google: Maps JavaScript API, Places API, Geocoding API . Możesz rzucić okiem na zrzut ekranu z niezbędnymi interfejsami API.

Błąd mapy odsyłającej niedozwolony

Ten błąd występuje, jeśli ograniczenia dotyczące strony odsyłającej interfejsu API nie są ustawione poprawnie. Na przykład, jeśli mapy działają na jednej stronie Twojej witryny, a nie na innych, najprawdopodobniej napotkałeś ten sam problem.

Dobrą wiadomością jest to, że poprawnie skonfigurowałeś i wprowadziłeś klucz API, a jest tylko jeden drobny szczegół, który musisz naprawić. Przejdź do strony Poświadczenia i kliknij swój klucz API, aby go edytować. W sekcji Ograniczenia aplikacji wybierz „Odsyłacze HTTP (witryny internetowe)”. Następnie wypełnij ograniczenia dotyczące witryny, jak pokazano poniżej, ale zamień „przykład” na nazwę swojej domeny i kliknij przycisk „Zapisz”. Zanim ustawienia zaczną obowiązywać, może minąć do 5 minut.

Ważne jest, aby dodać część „/*” na końcu, aby umożliwić żądania API z dowolnej podstrony witryny, aby Mapy Google działały na wszystkich stronach Twojej witryny.

Nadal nie działa

• Jeśli zmienisz coś w ograniczeniach klucza API – poczekaj do 5 minut, aż ustawienia zaczną obowiązywać;
• Jeśli nadal występuje błąd – sprawdź ponownie konsolę JavaScript, aby uzyskać więcej szczegółów. Po rozwiązaniu pierwszego może wystąpić błąd;
• Możesz także spróbować wyczyścić pamięć podręczną przeglądarki.

Wniosek

Otóż ​​to! Mówią, że jeśli jest wola, to jest sposób. Właśnie dodałeś funkcję wyszukiwania lokalizacji do witryny z katalogu, a teraz Twoi użytkownicy mogą wyszukiwać aukcje według lokalizacji. To naprawdę ważna funkcja dla większości katalogów. Chociaż dodanie Map Google może wydawać się nieco skomplikowanym procesem, warto. Gdy dodasz wyszukiwanie lokalizacji do swojej witryny, pozytywnie wpłynie to na wrażenia użytkownika. UX jest bardzo ważny dla każdej strony internetowej, ponieważ jest jednym z fundamentów dobrego ruchu.

Jak widać, możesz zintegrować Mapy Google ze swoją witryną bez żadnych umiejętności kodowania. Jeśli nie zdecydowałeś jeszcze, jakiej wtyczki użyć do zbudowania witryny z katalogiem, możesz rozważyć HivePress. Pozwala na tworzenie katalogów i stron internetowych dowolnego typu. Ponadto zawiera już bezpłatne rozszerzenie umożliwiające wyszukiwanie w oparciu o lokalizację i kilka innych bezpłatnych funkcji, które mogą okazać się przydatne.

Dodatkowo zapraszamy do zapoznania się z naszymi artykułami:

• Najpopularniejsze darmowe wtyczki do katalogów WordPress
• Najlepsze motywy katalogów WordPress
• Błędy, których należy unikać podczas tworzenia witryny z katalogiem WordPress