블로그에 여행이나 맛집 같은 콘텐츠를 작성할 때 빠트릴 수 없는 정보 중 하나는 바로 위치 정보이다. 단순히 주소만 추가할 수도 있겠지만, 지도를 첨부하면 블로그 방문자에게 더 좋은 경험을 제공할 수 있어서 좋다.
아쉽게도 설치형 워드프레스 본문 글쓰기 화면에는 구글 지도를 검색해서 불러올 수 있는 시스템은 없다. 이때 지도 첨부 플러그인을 사용하는 방법도 있겠지만, 플러그인 설치를 원하지 않는다면 구글 지도에서 원하는 장소의 HTML 코드를 복사하고 워드프레스 붙여넣기해서 해결할 수 있다.
이 방법은 구텐베르크(블록 에디터)와 클래식 에디터 모두 적용되는데 아래부터 자세히 알아보자.
1. 지도 HTML 복사 방법
먼저 구글 지도에 접속한 다음 원하는 장소를 검색하고 ‘개요’ 탭에 보이는 ‘공유’ 버튼을 클릭하면 된다.
공유 창 가운데 ‘공유할 링크’ 주소가 나오는 것을 볼 수 있는데 이걸 복사하지 말고 위쪽의 ‘지도 퍼가기’ 탭을 클릭하자.
지도 퍼가기 탭으로 오면 <iframe src=..> 주소 코드가 나오는데 바로 오른쪽에 보이는 ‘HTML 복사’ 글자를 클릭하면 전체 코드를 복사할 수 있다.
* iframe : Inline Frame의 약자로 현재 웹 페이지에 다른 웹 페이지를 추가하는 HTML 요소
이제 워드프레스 블로그 글쓰기 화면을 열고 사용 중인 에디터에 맞는 방법으로 본문에 붙여 넣으면 된다.
2. 구텐베르크 적용 방법
구텐베르크 에디터를 사용한다면 지도를 넣을 곳에 ‘Custom HTML’ 요소를 추가해야 한다. 지도가 필요한 paragraph 단락에 ‘/custom HTML’ 또는 ‘/HTML’만 입력해도 목록을 찾을 수 있다.
요소를 선택하면 HTML 빈 칸이 나오는데 그대로 붙여넣기를 진행하면 된다. 조금 전 복사한 지도 iframe 주소가 위처럼 나오면 정상이다.
설정 창의 ‘Preview’ 글자를 눌러보면 위처럼 지도가 잘 첨부되는 것을 볼 수 있다. 지도는 본문 왼쪽을 기준으로 정렬되는데 블록 에디터의 특징을 활용하면 정렬 위치를 간단하게 수정할 수 있다.
1. 화면 왼쪽의 List View 열기 – 지도 HTML의 옵션(⋮) – Add before – Paragraph 추가
2. 본문에서 지도 HTML 요소 위쪽에 마우스 왼쪽 클릭/엔터 키 누르기 – Paragraph 추가
위 두 가지 중에서 편한 방법으로 Paragraph를 추가했다면 이어서 컨테이너 요소가 필요하다.
Paragraph에 ‘/Container’를 입력해서 요소 생성을 마친 다음,
화면 왼쪽 List View의 지도 HTML 아이콘을 마우스 왼쪽 클릭 – 컨테이너 아래로 드래그&드롭을 마치면 이제 지도 HTML은 컨테이너의 하위 요소가 된다.
이후 List View에서 컨테이너 아이콘 클릭 – 화면 오른쪽의 Block 탭에서 Typography – Text Alignment를 원하는 위치로 조정하면 된다.
3. 클래식 에디터 적용 방법
이어서 클래식 에디터에 구글 지도를 넣는 방법도 알아보자. 먼저 구글 지도에서 원하는 위치의 iframe 주소를 복사하는 과정까지는 같다. 이후 에디터 글쓰기 화면으로 이동한 다음 화면 오른쪽 위의 ‘Text’를 클릭하자.
원하는 위치에 조금 전 복사한 구글 지도 iframe 주소를 붙여넣기를 하면 위처럼 나타난다.
다시 ‘visual’ 글쓰기 화면으로 돌아오면 지도가 잘 첨부되는 것을 볼 수 있다.
참고로 클래식 에디터는 구텐베르크와 달리 컨테이너 블록 요소를 사용할 수 없다. 그래서 지도 정렬 위치를 수정하려면 iframe 코드를 직접 수정해야 한다.
예를 들면 iframe 코드 뒤쪽에 width=”600″ height=”450″ 부분이 있을 텐데 “450” 따옴표에서 한 칸 띄우고 바로 뒤에 style=”border: 0; display: block; margin: 0 auto;”를 붙이면 지도를 가운데 정렬할 수 있다.
관련 글
익숙해지면 좋은 구텐베르크 블록 에디터 글 쓰는 법 안내
구텐베르크 에디터 글자 스타일 설정 방법
구텐베르크 에디터 문단 바꿀 때 블록 줄이는 방법
