워드프레스에 멋진 차트를 넣어 보자

워드프레스를 활용하여 홈페이지를 운영하다 보면 다양하고 멋진 플러그인들이 많이 있습니다. 이 플러그인들은 워드프레스를 더욱 활용도 있게 만들어 주는 역할을 합니다.

만약 자신의 홈페이지에 차트를 넣는다고 한다면 어떻게 하시겠습니까?

우리는 그동안 그림을 만들어서 차트를 만들어 왔습니다. 

하지만 구글이나 다른 서비스를 활용해 보시면 HTML5를 활용한 멋진 차트들이 많이 보실 겁니다. 

이런 차트 기능을 자신이 홈페이지에 넣고 싶으시다면 M CHART를 활용해 보세요.

만들고 싶은 차트 

웹페이지에 출력되는 차트를 html로 노출되는 웹페이지를 만들고 그림으로 만들어진 차트 이미지를 삽입하는 기존 방식과 달리 멋진 차트를 넣고 싶을 때

http://hancoma.com/?page_id=113

이렇게 넣어 봅니다. 실제 구성한 차트 페이지입니다. 각 셀에 데이터를 넣으면 자동으로 만들어 주는 플러그인입니다.

워드프레스 추천 플러그인 M CHART

워드프레스의 플러그인 삽입 페이지에서 검색하시면 쉽게 삽입 가능합니다.

플러그인 페이지입니다.

https://wordpress.org/plugins/m-chart/

플러그인 설치하기만 하시면 쉽게 설치됩니다. 

차트 생성하기 

MCHART를 설치하시면 왼쪽 메뉴에 차트가 나타납니다. 여기에 원하시는 차트를 만드시면 됩니다.

차트 데이터 넣기

관리자 모드에서 데이터를 넣으면 자동으로 차트를 생성해 줍니다. 물론 수정하면 수정된 차트가 노출됩니다.

셀단 위로 적용하기 때문에 엑셀을 사용해 보신 분이라면 쉽게 생성 가능합니다.

차트 특징 지정 (차트 모양)

차트는 여러 모양의 차트를 선택하실 수 있습니다.

상당히 쉽게 생성됩니다. 여기까지 만드셨으면 차트가 생성되었을 겁니다. 그럼 발행하기 하시면 차트가 생성됩니다.

그런데 이 차트를 페이지에 어떻게 나타내야 될지 모르는 분들이 계신 것 같습니다..

위 그림을 보시면 SHORTCODE가 있습니다. 저 코드를 페이지에 복사하시면 됩니다.

페이지를 생성하시고 저 코드를 붙여 넣기 해보세요. 그럼 그 페이지에 노출됩니다.

페이지에 차트 넣기

페이지에 위에서 생성한 차트의 SHORTCODE를 넣으시면 됩니다.

그럼 완성됩니다. 

너무 쉽게 완성돼서 저도 처음 만들고 놀랐는데요. 보통 JQUERY와 XML이나 JSON을 활용하는 경우 손을 봐야 되는 게 많은데 플러그인 설정만 하시면 다양한 차트들을 삽입하실 수 있습니다.

그리고 포토샵으로 삽입하시는 것보다 더 편하고 이쁘게 나옵니다.

꼭 한번 해보세요.