WordPress 및 데이터 시각화

게시 됨: 2022-02-04

WordPress 웹사이트에 그래프 형식으로 표시하고 싶은 데이터가 많이 있습니까? 고객에게 몇 달 동안 웹사이트 트래픽을 어떻게 개선했는지 보여주는 일부 판매 통계 또는 데이터가 있습니까? 이유가 무엇이든 시각적인 방식으로 데이터를 제시하면 청중과 핵심 요점을 훨씬 쉽게 전달할 수 있을 뿐만 아니라 더 즐겁게 즐길 수 있습니다... 결국, 숫자 행과 행이 있는 스프레드시트를 살펴보는 실제 숫자 괴짜가 아니라면 많은 재미의 아무도 생각하지 않습니다!

시각적인 방식으로 데이터를 표시하는 아이디어를 좋아할 수 있지만 핵심 질문은 '어떻게 합니까?'입니다. Canva와 같은 일부 그래픽 디자인 소프트웨어에서 그래프나 원형 차트를 만든 다음 웹사이트에 이미지를 올리고 싶을 수도 있습니다. 그러면 확실히 작업이 완료되지만 더 나은 방법이 있다면 어떨까요?

다행히도 WordPress가 있기 때문에 플러그인으로 시작됩니다! 이 기사에서는 해당 데이터를 사용자 친화적이고 흥미롭고 읽기 쉬운 방식으로 표시하는 데 도움이 되는 몇 가지 플러그인 옵션을 살펴보겠습니다. 가자!

쉬운 차트

쉬운 차트 플러그인은 작업을 완료하는 인기 있는 무료 플러그인입니다. 한동안 업데이트되지 않았지만 이것은 상당한 방치로 인한 것보다 '있는 그대로' 계속 잘 작동하기 때문인 것 같습니다.

그것은 잘 기능하고 시작하기에 매우 간단합니다. 설치가 완료되면 Easy Charts 관리 영역 내에서 '새로 추가' 메뉴 링크로 바로 이동합니다.

행과 열에 데이터를 추가할 수 있음을 알 수 있습니다(Excel 또는 다른 스프레드시트에서와 매우 유사합니다. 보너스로 결과를 즉시 볼 수 있는 미리보기 패널이 있습니다.

구성이 자세히 설명되어 있습니다. 스타일, 타이포그래피, 캡션, 색상 등을 개인화하여 원하는 모양을 얻을 수 있습니다. 데이터를 표시할 수 있는 방법은 여러 가지가 있습니다. 선택하는 방법은 표시하는 데이터의 종류에 따라 크게 달라집니다.

막대 차트
영역 차트
누적 막대 차트
누적 영역 차트
퍼센트 막대 차트
백분율 영역 차트
파이 차트
도넛 차트
스텝 업 막대 차트
폭포 차트
라인 차트
극지방 차트

차트를 만들면 게시물이나 페이지에 붙여넣을 수 있는 단축 코드가 제공됩니다. 또는 빠른 삽입 "Easy Charts" 버튼을 사용하여 시각적 편집기 내에서 직접 차트를 추가할 수 있습니다.

플러그인은 uvCharts Javascript 라이브러리를 사용하여 개발되었으며 SVG 및 CSS3 전환으로 차트를 생성합니다. 멋진 보너스로 생성한 차트를 이미지 파일로 다운로드할 수도 있습니다. 마지막으로 차트는 반응형이라는 사실도 알게 될 것입니다. 오늘날의 모바일 우선 웹 디자인 세계에서는 필수입니다.

시각화 도우미

Visualizer 플러그인은 웹사이트를 위한 보기 좋고 반응이 빠른 차트와 다이어그램을 만들기 위한 또 다른 인기 있는 선택입니다. 40,000개 이상의 설치와 수많은 훌륭한 리뷰가 있는 훌륭한 옵션입니다.

플러그인을 설치하고 활성화하면 WordPress 메뉴에 플러그인이 표시되어야 합니다. 첫 번째 차트를 추가하려면 "Visualizer -> Add new chart"를 클릭하십시오.

특정 차트 요구 사항에 적합한 옵션을 선택하는 과정을 안내하는 팝업 창이 나타납니다.

6가지 무료 템플릿 중에서 선택할 수 있습니다.

테이블
파이/도넛
선
지역
지역
술집

데이터 CSV를 로컬로 업로드하거나 원격 CSV 파일 또는 Google 스프레드시트에서 데이터를 가져올 수 있습니다. 템플릿 CSV 파일을 먼저 다운로드하여 플러그인이 이해할 수 있는 방식으로 데이터가 구성되어 있는지 확인하고 싶을 것입니다. 또는 원격 JSON 소스에서 데이터를 가져오거나 수동으로 데이터를 추가할 수 있습니다.

설정 탭에는 차트를 게시하기 전에 차트의 스타일을 변경할 수 있는 다양한 옵션이 있습니다.

차트를 만든 후에는 연결된 단축 코드를 복사하거나 CSV 또는 이미지로 내보낼 수 있습니다. Visualizer 플러그인은 Google Visualization API, DataTables.net 및 ChartJS를 사용하여 위의 작업을 수행합니다.

wpDataTables

wpDataTables 플러그인은 WordPress 웹사이트에 표시할 데이터 테이블과 차트를 생성하기 위한 또 다른 훌륭한 선택입니다. 프리미엄 플러그인이지만 많은 프로젝트에 충분한 기능을 제공할 수 있는 가벼운 무료 버전을 제공합니다.

설치 및 활성화되면 "wpDatatables -> Create Chart"로 이동하여 시작하십시오.

마법사를 사용하고 단계에 따라 원하는 차트를 생성할 수 있습니다. 차트의 이름을 설정하고 렌더 엔진과 시각화 유형을 선택한 다음 동일한 플러그인으로 생성된 테이블이어야 하는 소스 데이터를 가져옵니다.

앞에서 언급한 플러그인이 제공하지 않는 기능을 살펴보기 위해 이 과정을 조금 더 자세히 살펴보자. 시작하려면 "테이블 만들기"를 클릭하십시오.

보시다시피, 처음부터 만들거나 기존 소스에서 테이블 내용을 가져올 수 있습니다. 이 예에서는 기존 소스에서 생성하도록 선택합니다. 이것을 클릭하면 "입력 데이터 소스 유형"을 선택하라는 메시지가 표시됩니다.

무료 버전에서는 CSV, Excel, XML 또는 JSON 파일 형식을 사용하거나 PHP 직렬화된 개체를 제공할 수 있습니다.

이것은 데이터베이스에서 데이터를 표시할 수 있는 선택권을 제공하는 훌륭한 기능입니다. 이것은 가장 쉬운 일이 아니지만 이봐, 우리는 도전을 시작했습니다!

이 예에서 페이지에 대한 게시물 수를 표시하는 몇 가지 통계를 보고 싶다고 가정해 보겠습니다.

직렬화된 배열을 출력하는 PHP 코드는 다음과 같아야 합니다.

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

wpDataTables에서 제공하는 공식 문서에 따르면 상위 배열 항목은 행으로 구문 분석되고 하위 배열 키는 열 헤더로 구문 분석되며 하위 배열 값은 셀 값으로 구문 분석됩니다.

test.php 라는 파일에 코드를 저장했으며 이 예제의 목적을 위해 WordPress 설치의 루트 폴더에 저장합니다.

관리 영역으로 돌아가서 다음과 같이 파일 경로를 채웁니다.

변경 사항을 저장하고 짜잔.

이제 테이블을 차트의 소스로 설정하고 차트 유형을 선택한 다음 차트를 저장할 수 있습니다. 간단합니다! 마지막 단계는 마법사를 따라 차트에 원하는 디자인을 얻기 위해 사용 가능한 설정을 조정하는 것을 포함하는 결론을 내리는 것입니다. 그 후에는 자유롭게 게시할 수 있습니다.

결론

웹 사이트에서 데이터를 시각적으로 표시할 수 있다는 것은 매우 유용합니다. 그러나 많은 WordPress 사용자는 플러그인의 도움으로 수행하는 것이 상대적으로 쉬운 일이라는 사실을 깨닫지 못합니다. 위의 내용이 사용 가능한 옵션에 대한 아이디어를 제공했기를 바랍니다. 행복한 그래프 만들기!