WordPress의 디렉토리 웹 사이트에 위치 검색을 쉽게 추가하는 방법

디렉토리 웹사이트를 개선하는 방법에는 여러 가지가 있으며 그 중 하나는 위치 기반 검색을 활성화하는 것입니다. Yelp, TripAdvisor, Craigslist 또는 위치 기반 검색이 필요한 기타 유사한 웹사이트 또는 분류 웹사이트를 실행 중인 경우 Google 지도와 통합하여 이를 쉽게 수행할 수 있습니다. 일부 사용자는 해당 지역의 제품, 서비스 또는 장소를 검색할 수 있기 때문에 필수 기능입니다. 또한 Google 지도 플랫폼에는 웹사이트의 트래픽이 보통 수준이면 충분할 월별 무료 한도가 있습니다.

이 단계별 자습서에서는 디렉토리 웹사이트에 위치 검색을 추가하는 방법을 설명합니다. 우리는 눈 깜짝할 사이에 디렉토리 웹사이트를 만들 수 있는 무료 WordPress 플러그인인 HivePress를 사용할 것입니다. 또한 무료 WordPress 디렉토리 테마인 ListingHive와 Google 지도와의 통합을 위한 HivePress Geolocation 확장을 사용할 것입니다.

그러나 이미 다른 플러그인 또는 테마로 구축된 디렉토리 웹사이트가 있는 경우 첫 번째 단계를 건너뛰고 "수정 방법"으로 스크롤할 수 있습니다. 문제가 발생했습니다. 이 페이지는 Google 지도를 올바르게 로드하지 못했습니다.” ” 섹션에서 가장 일반적인 오류를 해결하세요.

자, 그럼 첫 번째 단계로 넘어가 볼까요!

하이브프레스 설치

먼저 하이브프레스를 설치해야 합니다. WordPress의 다른 무료 플러그인으로 설치할 수 있습니다. 플러그인 > 새로 추가 섹션으로 이동하여 검색 창에서 찾은 다음 설치하고 마지막으로 "활성화" 버튼을 클릭하여 활성화하십시오. 설치가 완료되면 다음 단계인 확장 설치를 진행할 수 있습니다.

또한 어려운 경우 아래 스크린캐스트를 따라 WordPress 대시보드에서 직접 HivePress를 설치할 수 있습니다.

확장 설치

다음 단계는 사용자가 위치별로 목록을 검색할 수 있도록 Geolocation 확장을 설치하는 것입니다. 설치하려면 HivePress 섹션 위로 마우스를 가져간 다음 "Extensions" 링크를 클릭하기만 하면 됩니다. 목록에서 Geolocation 확장을 찾고 "설치" 버튼을 클릭한 다음 마지막으로 확장을 활성화합니다.

또한 다음 스크린캐스트는 HivePress 확장을 설치하는 일반적인 프로세스를 보여주므로 단계별로 따를 수 있습니다.

새 프로젝트 만들기

플러그인 설치 및 Geolocation 확장이 완료되면 Google Cloud Platform에서 프로젝트를 생성할 차례입니다. 이미 Google 계정이 있다고 가정하면 문제 없이 이 대시보드에 액세스할 수 있습니다. 그러나 계정이 없으면 Google 계정에 가입해야 합니다.

이제 "프로젝트 생성" 버튼을 클릭하여 프로젝트를 생성하고 이름을 지정하고 마지막으로 "생성" 버튼을 클릭해야 합니다.

결제 설정

이제 Google 결제 계정이 없는 경우 프로젝트 결제를 활성화하려면 새 계정을 만들어야 합니다. 하지만 걱정하지 마세요. 지금은 아무 것도 지불하지 않아도 됩니다. Google Maps API를 사용하기 위한 요구 사항 중 하나일 뿐입니다. 링크를 따라 결제 방법 세부 정보를 포함하여 모든 양식 필드를 작성하기만 하면 됩니다.

매월 $200의 무료 크레딧이 제공되며 대부분의 경우 웹사이트에서 Google 서비스를 사용하는 데 드는 비용을 충당하기에 충분합니다. 또한 한도 및 알림을 설정할 수 있으므로 무료 크레딧을 초과하지 않습니다. 어떻게 작동하는지 더 잘 이해하고 지도를 무료로 사용할 수 있는지 확인하기 위해 가격을 확인할 수 있습니다.

결제 정보를 추가하면 활성화하려는 API 유형이 포함된 팝업 창이 나타납니다. 아래 스크린샷과 같이 지도 및 장소를 선택하고 "사용" 버튼을 클릭합니다. 또한 팝업 창이 없는 경우 Google API 라이브러리 페이지를 통해 이러한 API를 활성화할 수 있습니다.

API 키 생성

다음 단계는 웹사이트용 API 키를 만드는 것입니다. 그렇게 하려면 자격 증명 페이지로 이동하여 프로젝트를 선택합니다.

자격 증명 페이지에서 이미 생성된 API 키를 볼 수 있습니다. 결제 계정을 방금 만든 경우 키가 자동으로 생성될 수 있습니다. 이 경우 편집하려면 클릭하기만 하면 됩니다. 그러나 페이지에 API 키가 없는 경우 자격 증명 만들기 > API 키 섹션에서 새 키를 만들 수 있습니다.

다음으로 애플리케이션 제한을 설정하여 API 키를 설정해야 합니다. 키를 포함하기만 하면 웹사이트의 소스 코드에 일반 텍스트로 표시되기 때문에 필수적입니다. 그렇기 때문에 다른 사람들이 자신의 프로젝트에 API 키를 사용할 수 없도록 제한해야 합니다. 이렇게 하려면 웹 사이트의 API 요청만 허용하도록 HTTP 리퍼러를 추가하기만 하면 됩니다. 웹사이트 주소를 설정하고 웹사이트 하위 페이지의 API 요청을 허용하도록 끝에 "/*" 부분을 추가하면 Google 지도가 웹사이트의 모든 페이지에서 작동합니다.

이제 다음 필드에서 API 제한을 설정해야 합니다. 키 제한 을 클릭하고 드롭다운 메뉴에서 Maps JavaScript API, Places API, Geocoding API 를 선택합니다. 언급된 API 중 일부가 목록에 없으면 먼저 Maps API 라이브러리 페이지에서 활성화해야 합니다. 세 가지 Google API가 모두 활성화되고 드롭다운 메뉴에서 선택되면 "저장" 버튼을 클릭합니다.

Google 지도 통합 활성화

그게 다야! 방금 API 키를 만들었으며 마무리 작업은 웹사이트에서 Google 지도를 활성화하는 것입니다. 먼저 API 및 서비스 > 자격 증명 페이지에서 API 키를 복사합니다. 이제 HivePress 플러그인을 사용하는 경우 WordPress 대시보드로 이동하여 HivePress > 설정 > 통합 > Google 지도 섹션으로 이동합니다. 그런 다음 적절한 필드에 API 키를 붙여넣고 "변경 사항 저장" 버튼을 클릭하여 웹사이트에 위치 검색을 추가하십시오.

축하 해요! 이 순간부터 웹사이트가 Google 지도와 통합되었으며 이제 목록 섹션에서 기존 목록에 위치를 추가할 수 있습니다. 또한 사용자는 새로 추가된 목록의 위치를 ​​설정해야 합니다. 또한 웹사이트와 Google 지도에 위치 검색 필드가 있으므로 이를 사용해 보고 위치별로 일부 목록을 검색할 수 있습니다.

문제 해결

생성한 API 키에 문제가 있는 경우 지도에 "죄송합니다! 문제가 발생했습니다. 이 페이지는 Google 지도를 올바르게 로드하지 못했습니다." 오류. API 키를 설정하는 것은 매우 사용자 친화적인 프로세스가 아니며 사용자가 설정 단계 중 일부를 건너뛰는 경우가 많기 때문에 매우 일반적인 오류입니다. 그러나 문제의 원인을 알면 거의 즉시 해결할 수 있습니다.

해당 오류의 원인을 찾으려면 JavaScript 콘솔을 열어야 합니다. 브라우저에 따라 다른 몇 가지 키 입력으로 열 수 있습니다. JavaScript 콘솔을 여는 방법을 설명하는 StackOverflow의 답변을 확인하세요. Chrome 브라우저를 사용하는 경우 CTRL+Shift+I 를 눌러 열 수 있습니다. 열면 다음과 같은 오류 메시지가 표시되어야 합니다.

오류를 수정하려면 오류의 원인을 정확히 아는 것이 중요합니다. 여러 가지 다른 오류가 있을 수 있지만 가장 자주 발생하는 오류를 해결하는 방법을 보여 드리겠습니다.

• 키맵 오류 누락;
• 유효하지 않은 키맵 오류;
• APINotActivatedMapError;
• RefererNotAllowedMapError.

그러나 위에 나열되지 않은 오류가 있는 경우 Google Maps API 오류 메시지 문서를 확인하여 문제와 해결 방법을 알아보세요.

키맵 오류 누락

이 오류는 API 키가 전혀 없음을 의미하므로 웹사이트에서 Google 지도를 활성화하려면 API 키를 만들어야 합니다. 이 오류가 발생하면 API 키를 생성하고 맵을 올바르게 설정하기 위해 첫 번째 단계부터 이 튜토리얼을 따르는 것이 좋습니다.

잘못된 키 맵 오류

이 오류는 잘못된 API 키를 사용할 때 나타납니다. 아마도 당신이 그것을 만들었지만 당신의 웹사이트에 올바르게 추가하지 않았을 것입니다. 이 오류를 수정하려면 자격 증명 페이지로 이동하여 API 키를 복사하십시오.

HivePress 플러그인 및 해당 Geolocation 확장을 사용하는 경우 WordPress 대시보드 > HivePress > 설정 > 통합 > Google 지도 섹션으로 이동하여 해당 필드에 API 키를 붙여넣고 "변경 사항 저장" 버튼을 클릭합니다.

APINotActivatedMap 오류

이러한 유형의 오류가 발생하면 필요한 API를 활성화하지 않았음을 의미합니다. Google Maps API 라이브러리에는 다양한 API가 있으므로 라이브러리로 이동하여 프로젝트에 필요한 API를 활성화해야 합니다. 활성화한 후에는 자격 증명 섹션의 API 키 설정에 있는 API 제한 섹션에도 추가해야 합니다.

예를 들어, Geolocation 확장과 함께 HivePress 플러그인을 사용 중이고 디렉토리 웹사이트에 위치 검색을 추가하려면 Maps JavaScript API, Places API, Geocoding API와 같은 Google API를 활성화하고 액세스를 허용해야 합니다. 필요한 API가 포함된 스크린샷을 볼 수 있습니다.

RefererNotAllowedMapError

이 오류는 API 리퍼러 제한이 올바르게 설정되지 않은 경우 발생합니다. 예를 들어, 지도가 웹사이트의 한 페이지에서는 작동하고 다른 페이지에서는 작동하지 않는 경우 동일한 문제에 직면했을 가능성이 큽니다.

좋은 소식은 API 키를 올바르게 설정하고 입력했으며 수정해야 할 작은 세부 사항이 하나 있다는 것입니다. 자격 증명 페이지로 이동하고 API 키를 클릭하여 편집합니다. 애플리케이션 제한 섹션에서 "HTTP 리퍼러(웹 사이트)"를 선택합니다. 그런 다음 아래와 같이 웹사이트 제한 사항을 입력하되 "example"을 도메인 이름으로 바꾸고 "저장" 버튼을 클릭합니다. 설정이 적용되는 데 최대 5분이 소요될 수 있습니다.

웹사이트 하위 페이지에서 API 요청을 허용하려면 끝에 "/*" 부분을 추가하는 것이 중요하므로 Google 지도가 웹사이트의 모든 페이지에서 작동합니다.

여전히 작동하지 않습니다

• API 키 제한 사항을 변경하는 경우 설정이 적용되기까지 최대 5분 정도 기다리십시오.
• 여전히 오류가 있는 경우 자세한 내용은 JavaScript 콘솔을 다시 확인하십시오. 첫 번째 문제를 해결한 후 오류가 발생할 수 있습니다.
• 브라우저 캐시를 지울 수도 있습니다.

결론

그게 다야! 뜻이 있으면 길이 있다고 합니다. 디렉토리 웹사이트에 위치 검색 기능을 추가했으며 이제 사용자가 위치별로 목록을 검색할 수 있습니다. 대부분의 디렉토리에서 정말 중요한 기능입니다. Google 지도를 추가하는 과정이 다소 복잡해 보일 수 있지만 그만한 가치가 있습니다. 웹사이트에 위치 검색을 추가하면 사용자 경험에 긍정적인 영향을 미칩니다. UX는 좋은 트래픽의 초석 중 하나이기 때문에 모든 웹 사이트에서 매우 중요합니다.

보시다시피 코딩 기술 없이도 Google 지도를 웹사이트에 통합할 수 있습니다. 디렉토리 웹사이트 구축에 사용할 플러그인을 아직 결정하지 못했다면 HivePress를 고려해 볼 수 있습니다. 모든 유형의 디렉토리 및 목록 웹 사이트를 만들 수 있습니다. 또한 위치 기반 검색을 가능하게 하는 무료 확장 기능과 유용하다고 생각할 수 있는 몇 가지 무료 기능이 이미 포함되어 있습니다.

또한 다음 기사를 확인하십시오.

• 가장 인기 있는 무료 WordPress 디렉토리 플러그인
• 인기 WordPress 디렉토리 테마
• WordPress 디렉토리 사이트를 구축할 때 피해야 할 실수