워드프레스 지도 삽입, 리스트, 테이블, 애니메이션 삽입하기
1. 지도 삽입 방법
1) 글 쓰기 혹은 페이지 작성
'찾아오시는 길' 등 거의 안 바뀌는 지도는 '글쓰기' 보다 '페이지 쓰기'로 작성하는 것이 낫다.
(글쓰기와 페이지 쓰기의 차이점은 이전의 워드프레스 글 참고)
(숏코드 삽입 방법은 아래 글 참고)
숏코드 삽입 방법
2) insert shortcode 선택
(워드프레스 고전 편집기 기준) insert shortcode 선택 후 - Google map을 선택한다.
3) 지도 옵션 지정
- width : 지도의 넓이 지정(아래 그림)
- Height : 지도의 높이 지정
- responsive: 마우스로 지도를 확대하고 축소하는 기능
- Marker: '서울역'이라고 입력하면 구글 지도에서 '서울역'을 찾아 표시해 준다.
4) 미리 보기
5) insert shortcode를 클릭하면 페이지에 지도가 삽입된다.
'공개' 눌러 글 또는 페이지를 발행하면 브라우저에 다음과 같이 디스플레이된다.
6) 페이지 발행 후 브라우저에 출력되는 모습
지도 위에 마우스를 얹어서 Ctrl을 누르고 스크롤하면 지도롤 확대 및 축소할 수 있다.
7) 기타
'연락 폼 추가하기'도 가능하며 버튼을 클릭하여 페이지에 삽입한 후, 메일 수신 등이 가능하다.
2. 테이블 삽입
1) insert shortcode 선택
위 지도 삽입 방법과 동일
2) Table 선택
3) Table 편집
다음 그림과 같이 미리 보기(preview)로 모니터링하면서 편집하면 됨
테이블 태그에 관한 참고사항/th, tr, td란/
3. list 숏코드 삽입 및 불릿 기호 편집
insert shortcode 선택 - list 선택
1) 다음 1,2,3 순서대로 아이콘 및 색상 선택
2) 글머리 기호가 빨간 카메라로 표시되는 것을 확인할 수 있다.(아래 그림)
아래 그림처럼 미리 보기(preview)로 모니터링하면서 li태그 문단을 편집하면 됨.
(li는 list의 약자, ul은 unordered list, ol은 ordered list)
3) 인서트 숏코드 삽입 및 글 공개
편집 결과에 만족하면 insert shortcode를 클릭하고 공개하기를 눌러 글을 발행하면 됨.
4. 애니메이션 삽입
1) 숏코드 - 애니메이션 선택
2) 애니메이션 타입을 선택
애니메이션 타입을 선택하여 미리보기를 하면서 조정하면 된다.
fade out, slide, rotatein 등 다양한 애니메이션 효과를 직접 시도해보면 된다.
홈페이지를 역동적으로 만들 수 있다.