이 기사에서는 플러그인을 사용하지 않고 반응형 Google 지도를 WordPress 웹페이지(예: 연락처 페이지용)에 추가하는 방법을 보여 드리겠습니다. 이 튜토리얼에서는 WordPress 6.0과 이 WordPress 버전의 기본 테마인 Twenty Twenty Two 테마를 사용할 것입니다.
Google 지도 기능을 사용하면 대화형 지도에 업체 위치를 표시할 수 있으므로 사이트 방문자가 귀하의 위치를 쉽게 보고 지도와 상호 작용하여 주변에 무엇이 있는지 확인하고 길을 찾는 등의 작업을 수행할 수 있습니다. 사이트 방문자에게 보여줍니다. 귀하가 지역 비즈니스이고 실제 물리적 위치가 있다는 것입니다. 기업의 연락처 페이지에 지도가 있는 것은 매우 일반적입니다.
수많은 Google 지도 플러그인이 있지만 그 중 많은 플러그인이 투박하고 전체 플러그인 기능에 대한 비용을 지불하거나 원하지 않는 결과를 생성하는 복잡한 단계가 있는 Google 개발자 계정이 필요합니다.
이 모든 것은 플러그인이나 복잡한 단계 없이 WordPress 6.0 페이지에 Google 지도를 추가하는 정말 간단한 방법입니다. 자세히 살펴보겠습니다.
1단계: HTML 블록 생성
우선 WordPress 사이트의 관리 영역에 로그인하고 "페이지" 섹션(위 이미지의 빨간색 화살표)으로 이동합니다.
Google 지도 기능을 추가하려는 페이지를 클릭합니다(제 경우에는 "연락처" - 위 이미지의 파란색 화살표 - 페이지 이름을 클릭하거나 페이지 이름 아래에 있는 "편집"을 클릭하면 됩니다).
Twenty Twenty Two와 같은 블록 테마를 사용하는 경우 이제 페이지의 블록 편집기 안에 있게 됩니다. 지도를 삽입할 위치까지 아래로 스크롤합니다.
그런 다음 "+" 아이콘(위 이미지의 "블록 삽입기" – 빨간색 화살표)을 클릭하여 블록을 삽입합니다.
검색 필드(사진에서 녹색으로 윤곽선)에서 "그룹"을 검색하고 클릭하여 그룹 블록(빨간색 화살표)을 추가합니다. 이렇게 하면 블록 요소에 몇 가지 사용자 지정 설정을 추가할 수 있습니다.
예를 들어, "정렬 변경" 옵션(빨간색 화살표)을 클릭하고 "전체 너비"(녹색 화살표)를 선택합니다. 이렇게 하면 Google 지도 대화형 지도를 포함할 블록의 너비가 전체 너비가 됩니다.
그런 다음 그룹 내부의 큰 "+" 버튼(위 사진의 빨간색 화살표)을 클릭합니다. 검색 창에서 "HTML"을 검색하고(녹색 윤곽선) "사용자 지정 HTML" 블록(파란색 화살표)을 클릭합니다.
이제 "Write html..."(빨간색 화살표)이라고 표시된 것을 볼 수 있습니다. 여기에 지도를 추가할 것입니다.
2단계: Google Maps Embed HTML 생성
이제 Google 지도를 사용하여 지도를 생성해야 합니다. 이렇게 하려면 새 브라우저 탭을 열고 기본 검색 브라우저가 아닌 경우 Google.com으로 이동합니다.
다음으로 지도에 표시할 주소를 입력합니다. 이 예에서는 Empire State Building(빨간색 화살표)을 사용하겠습니다. 이 부분에는 업체의 정확한 주소를 사용할 수 있습니다.
검색 엔진 결과 페이지에서 귀하의 주소에 대해 표시되는 지도 이미지를 클릭하십시오(이미지의 빨간색 화살표 – 주소 또는 이름을 입력했는지 여부에 따라 페이지 중앙에 있거나 오른쪽에 있습니다. 내가 그랬던 것처럼 장소).
이제 주소가 전체 화면 지도에 마커로 표시됩니다(위 이미지의 빨간색 화살표). 또한 검색한 장소의 주소나 제목 아래에 여러 아이콘이 표시됩니다. 이러한 아이콘에는 '길찾기', '저장', '주변', '전화로 보내기' 및 '공유'가 포함됩니다. "공유" 아이콘(파란색 화살표)을 클릭합니다.
표시되는 "공유" 탭에서 "지도 삽입" 탭(위 사진의 파란색 화살표)을 클릭합니다.
이 탭에는 포함된 Google 지도 위젯의 미리보기가 표시됩니다. 코드 왼쪽(녹색 화살표)에 크기 드롭다운이 있습니다. 미리 만들어진 크기를 선택하거나 "사용자 지정"을 선택하여 자신만의 크기를 설정할 수 있습니다. "사용자 지정" 옵션(빨간색 화살표)을 선택하겠습니다.
여기에 내 맞춤 지도의 치수가 표시됩니다. 높이 또는 첫 번째 치수를 1200(빨간색 화살표)으로 설정하겠습니다. 너비를 600으로 설정하겠습니다. "실제 크기 미리보기"(녹색 화살표)를 클릭하여 새 팝업 창에 지도를 전체 크기로 표시할 수 있습니다(팝업 차단기가 있는 경우 비활성화해야 합니다. 창을 가리지 않도록 켜짐). 완료되면 미리보기 창을 종료합니다.
그런 다음 "HTML 복사" 링크(파란색 화살표)를 클릭합니다. 이것은 우리가 WordPress 페이지에 가져올 코드입니다.
3단계: HTML 코드를 WordPress 페이지에 붙여넣기
WordPress 웹 사이트가 포함된 브라우저 탭으로 다시 이동합니다. "여기에 HTML 작성..."이라고 표시된 빈 HTML 블록을 클릭하고 키보드에서 ctrl+v(Mac에서는 cmd+v)를 눌러 코드(빨간색 화살표)를 붙여넣습니다.
블록 도구 모음에서 "미리보기" 옵션을 클릭하면(빨간색 화살표) 이제 페이지에 표시된 지도를 볼 수 있습니다(녹색 화살표). HTML 코드(파란색 화살표)로 돌아가려면 "HTML" 옵션을 다시 클릭합니다.
페이지에 지도가 포함되어 있지만 반응하지 않습니다. 즉, 태블릿이나 전화와 같은 작은 화면에서 지도를 보면 화면에 맞게 크기가 조정되지 않습니다. 이 문제를 해결하려면 HTML 코드에 몇 가지 사용자 지정 스타일을 추가해야 합니다.
4단계: 반응형 Google 지도 만들기
난 될거야 이 웹사이트에서 가져온 코드를 사용하여 Google 지도를 반응형으로 삽입합니다. "반응적으로 Google 지도를 삽입하는 방법"(빨간색 화살표) 섹션까지 아래로 스크롤합니다. 그런 다음 두 번째 코드 세트(파란색 화살표)까지 아래로 스크롤합니다.
"에서 모든 것을 복사하십시오. ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
WordPress로 다시 이동합니다. HTML 코드의 맨 앞에 있는 마우스를 클릭하여 이 새 코드를 처음(빨간색 화살표)에 삽입하십시오. ctrl+v를 눌러 코드를 붙여넣습니다.
마지막으로 HTML 코드의 맨 끝(빨간색 화살표)을 클릭하고 " " 모든 것을 닫습니다. 기본적으로 방금 수행한 작업은 HTML 코드를 사용자 지정 스타일로 래핑한 것입니다. 이 스타일은 방문자의 브라우저에 지도를 보고 있는 창의 크기에 따라 지도 크기를 조정하도록 지시합니다.
5단계: 대화형 지도의 가로 세로 비율 조정
마지막으로 해야 할 일이 있습니다. "padding-bottom: 75%;"가 표시될 때까지 코드의 맨 위로 다시 스크롤합니다. (빨간색 화살표). 이 코드는 지도의 종횡비를 결정합니다.
지도 크기를 1200 x 600으로 조정했기 때문에 가로 세로 비율이 2:1입니다. 이를 위해 백분율을 "50%"(빨간색 화살표)로 변경해야 합니다.
지도에 몇 퍼센트를 사용해야 하는지 잘 모르겠다면 가로 세로 비율(즉, 16:9)을 취하고 두 번째 숫자를 첫 번째 숫자로 나누어 백분율을 얻으십시오(9를 16으로 나누면 56.25%).
"업데이트"를 클릭하여 변경 사항을 적용한 다음(위 이미지의 파란색 화살표) 왼쪽 하단 모서리에 있는 "페이지 보기"를 클릭하여 결과를 확인합니다.
이제 Google 지도 위젯이 표시되어야 합니다(위 이미지의 빨간색 화살표).
브라우저 크기를 줄인 다음 지도가 있는 웹페이지 영역으로 다시 스크롤하여 응답성을 테스트할 수 있습니다.
이것이 이 튜토리얼의 전부입니다! 마음에 들었고 처음부터 전문 WordPress 웹 사이트를 만드는 방법을 배우고 싶다면 내 Udemy의 비코더를 위한 WordPress 6.0 과정, 또는 내 다른 자습서를 확인하십시오!
