wpDataTables를 사용하여 멋진 반응형 테이블 만들기

WordPress에서 테이블을 만드는 것은 쉽습니다. 코드를 사용하여 WordPress에 테이블을 추가하는 전통적인 방법이 있지만, 테이블(또는 차트)을 작성하는 가장 편리한 방법은 wpDataTables WordPress 플러그인을 사용하는 것입니다. 다양한 외부 소스에서 테이블을 가져와 원하는 대로 스타일을 지정하고 웹 사이트에 추가하는 것이 매우 쉽습니다.

기본 HTML 테이블

표준 HTML 테이블 태그를 사용하여 WordPress에 테이블을 추가할 수 있습니다. 매우 간단하며 다음과 같은 기본 구조를 사용합니다(게시물을 작성할 때 "텍스트" 탭에 입력하는 것을 잊지 마세요).

<table style="width: 100%;">
<tbody>
<tr>
<th style="width: 33%;">First</th>
<th style="width: 34%;">Second</th>
<th style="width: 33%;">Third</th>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Jenson</td>
<td>30</td>
</tr>
</tbody>
</table>

그러면 다음과 유사한 표가 생성됩니다(참고 – 헤더 셀의 스타일은 테마에 따라 다릅니다).

Jack: 잭슨
Jen: 젠슨

HTML을 사용하여 테이블을 만드는 것은 효과가 있으며 사이트에 하나 또는 두 개의 테이블만 추가하려는 경우에도 괜찮습니다. 그러나 테이블을 자주 생성하려는 경우 몇 가지 문제에 직면하게 될 가능성이 높습니다.

고급 옵션을 사용하려면 HTML 코딩을 배워야 합니다.
HTML을 추가하는 것은 시간이 많이 걸리고 많은 테이블을 생성하는 경우 장기적으로 생산성을 저하시킵니다.
이 방법은 레이아웃과 디자인이 심각하게 제한됩니다(고급 개발자가 아닌 경우).

WordPress를 사용하는 경우 1) 최신 버전의 WordPress를 사용하고 있고 2) 테마가 반응형이라고 가정할 수 있습니다. HTML 테이블 태그를 사용하여 WordPress 사이트에 테이블을 삽입하면 레이아웃을 조정하는 데 많은 시간을 소비하게 됩니다.

귀하의 사이트는 반응적일 수 있지만 테이블은 그렇지 않습니다.

이로 인해 자연스럽게 사이트의 반응형 속성이 손상될 수 있습니다. 사이트에 데이터를 삽입하는 것도 문제가 될 수 있습니다. Google 스프레드시트 또는 Microsoft Excel과 같은 스프레드시트 처리 소프트웨어에는 데이터베이스에서 데이터를 가져오는 많은 가져오기 도구가 있습니다. 하지만 모든 문자를 입력할 때는 별로 생산적이지 않습니다.

앞서 우리는 WordPress에서 HTML을 사용하여 테이블을 삽입할 때 세 가지 주요 문제를 확인했습니다. 걱정하지 마세요. 테이블을 만드는 훨씬 더 좋은 방법이 있습니다. 위에서 언급한 모든 문제를 해결하고 다양한 유용한 기능을 제공하는 플러그인을 소개하겠습니다.

wpDataTables로 더 나은 테이블 만들기

WordPress로 테이블을 생성하려면 wpDataTables를 적극 권장합니다. 완벽하게 반응하는 이 프리미엄 플러그인을 사용하면 코딩이 필요하지 않습니다. 테이블과 차트를 설치하고 만들기만 하면 됩니다! 14,300명 이상의 사람들이 신뢰하고 있으며 이전에는 이 달의 WordPress 플러그인 중 하나로 선정되었습니다. 이는 우리의 소견에 따르면 WordPress 기반 웹사이트에 테이블을 추가하는 가장 좋은 방법 중 하나일 뿐입니다.

wpDataTables에 대한 자세한 내용 라이브 데모 보기

위의 버튼을 클릭하여 Themeforest의 wpDataTables에 대해 자세히 알아보거나, 계속해서 읽으면서 이것이 왜 그렇게 훌륭하다고 생각하는지 알아보세요.

다중 데이터 소스

데이터를 저장하려는 위치에 따라 wpDataTables를 사용하면 다양한 소스에서 가져올 수 있습니다. Excel, CSV, Google Docs, XML, JSON, 직렬화된 PHP 배열 또는 MySQL 쿼리 중에서 선택하여 데이터를 가져옵니다. 새 테이블을 수동으로 생성하거나, 라이브 데이터 소스에 연결하거나(페이지에 테이블을 로드할 때 테이블을 동적으로 업데이트할 때까지), GUI(그래픽 사용자 인터페이스) 도구를 사용하여 사용자 정의 쿼리를 생성하는 옵션도 있습니다.

MySQL 쿼리를 사용하면 적절한 데이터베이스의 데이터를 보고 수정할 수 있으므로 개인적으로 가장 좋아하는 쿼리입니다. wpDataTables는 MS SQL 및 PostgreSQL 데이터베이스에 대한 별도의 데이터베이스 연결과 두 개 이상의 별도 데이터베이스 연결을 추가하는 옵션을 지원합니다. 테이블은 여러 데이터베이스와 서버에서 데이터를 가져올 수 있습니다. 테이블 프로젝트를 진행하는 개발자 팀이 있다면 협업이 매우 간단해질 것입니다(나중에 자세히 설명)!

향상된 사용자 정의 및 반응형 레이아웃

테이블 디자인이 이보다 쉬웠던 적은 없었습니다. 몇 가지 확인란과 몇 가지 색상 선택을 통해 사이트 테마를 보완하도록 플러그인을 디자인할 수 있습니다. 보라색, 어두운 색, 청록색 등 선택할 수 있는 새로운 현대적인 테이블 스킨도 있습니다. 플러그인이 제공하는 멋진 디자인 기능을 살펴보세요.

인터페이스 언어, 시간/날짜 형식, 정렬, 사용자 정의 JS/CSS 등을 위한 내장 옵션도 있습니다. 아 그리고 제가 플러그인이 모바일에도 반응한다고 언급했었나요? 화면 크기에 관계없이 테이블이 얼마나 많은 공간을 차지할지 설정할 수 있습니다!

효율적인 검색을 위한 필터

새 테이블을 만들거나 기존 테이블을 편집할 때 필터를 활성화하는 옵션이 있습니다. 필터를 사용하면 원하는 항목만으로 결과 집합을 줄일 수 있습니다. 이는 대규모 데이터베이스를 쿼리하는 데 매우 유용합니다. 예를 들어 도서관 데이터베이스가 있는 경우 주제를 기준으로 결과를 필터링하면 책을 훨씬 더 빨리 찾는 데 도움이 됩니다.

그러나 필터를 편집할 때마다 데이터베이스에서 수행해야 하는 계산 수가 증가하므로 서버 부담이 증가합니다. 따라서 필터를 완전히 비활성화하는 좋은 옵션이 있습니다.

프런트엔드에서 MySQL 데이터베이스 편집

wpDataTables를 사용하면 프런트엔드, 즉 라이브 WordPress 사이트에서 데이터베이스를 직접 편집할 수도 있습니다. 테이블을 구성할 때 "편집" 탭에서 옵션을 활성화하기만 하면 됩니다. 어떤 사용자가 데이터베이스의 값을 편집할 수 있는지 설정할 수도 있습니다. 즉, 모든 사용자가 자신의 사용자 역할에 따라 액세스를 제출하거나 기반으로 할 수 있도록 데이터베이스를 열어 둘 수도 있습니다.

차트를 사용하여 데이터 시각화

시각화는 일반적인 텍스트보다 훨씬 효과적으로 주의를 끌 수 있습니다. 결국 보는 것이 믿는 것입니다. 기존 독서에 비해 데이터 섭취 속도가 증가합니다. 예를 들어, 연간 소득 보고서의 원형 차트를 볼 때 거의 항상 12개월 전체에 대한 데이터를 읽는 것과 비교할 때 데이터를 더 빠르게 해석하게 됩니다.

wpDataTables는 동적 차트(Google Charts, HighCharts 또는 Chart.js를 통해)를 생성하여 테이블 데이터를 시각화하는 데 도움이 됩니다. 이는 월별 수입 보고서를 공유하는 블로거와 같이 숫자 데이터가 많은 테이블에 특히 유용합니다.

평생 업데이트

대부분의 플러그인 개발자는 1년 간의 업데이트 및 지원을 제공합니다. 하지만 이 개발자는 일회성 비용으로 평생 업데이트와 6개월 지원을 제공합니다(참고 – 지속적인 지원을 받으려면 라이선스를 갱신해야 합니다).

자세한 문서

개발자는 wpDataTables 사용 방법을 설명할 때 모든 노력을 다합니다. 플러그인의 전체 기능을 이해하는 데 도움이 되는 광범위한 온라인 문서와 비디오 튜토리얼이 있습니다!

이는 우리에게 두 가지 사실을 알려줍니다.

개발자는 고객을 배려하여 고객이 다시 제품을 구매하도록 합니다.
지식이 풍부한 고객=문제가 적음=지원 티켓이 적음=행복한 고객

또한 지원 티켓이 적으므로 개발자는 플러그인을 개선하고 새로운 기능을 도입하는 데 더 많은 시간을 할애할 수 있습니다!

wpDataTables를 사용하여 반응형 테이블을 구축하는 방법

이제 wpDataTables가 훌륭한 플러그인이라고 생각하는 이유를 알았으니 사용 방법을 보여드리겠습니다! wpDataTables 플러그인을 사용하여 새 테이블을 생성하는 데는 정확히 세 단계가 있습니다.

1. wpDataTables 설치

나는 이것이 분명해야 한다는 것을 알고 있지만 먼저 wpDataTables를 설치해야 합니다. 이 플러그인은 프리미엄 플러그인이기 때문에 CodeCanyon에서 구매 및 다운로드해야 합니다(구매 항목으로 이동하여 "설치 가능한 WordPress 파일만"을 다운로드하세요).

그런 다음 화면의 지시에 따라 설치 및 활성화를 완료하세요.

2. 데이터 테이블 만들기

플러그인이 활성화되면 완전히 새로운 "wpDataTables" 메뉴 항목이 표시됩니다. 이를 클릭한 다음 큰 파란색 새로 추가 버튼을 클릭하여 새 테이블 생성을 시작하세요.

첫 번째 옵션은 테이블을 만드는 방법입니다. 5가지 옵션이 제시되어야 합니다. 우리는 사용하고 싶은 간단한 스프레드시트가 있었기 때문에 CVS에서 가져오는 옵션을 선택했습니다. 그런 다음 다음을 클릭하면 파일을 선택하고 업로드하라는 메시지가 표시됩니다.

데이터 소스를 업로드하면 사용자 정의 표 이름을 입력할 수 있을 뿐만 아니라 옵션을 사용하여 열과 행을 편집, 추가 또는 삭제할 수 있습니다. 그런 다음 녹색 버튼을 클릭하여 테이블 생성을 완료합니다.

당신은 지금 집에 있습니다! 이 페이지에서 테이블에 대한 추가 설정을 조정할 수 있습니다(선택 사항). 더 작은 기기에서 반응형 축소를 활성화하고, 가로 스크롤바를 추가하고, 표 너비를 제한하려면 '디스플레이' 옵션을 사용하세요. '편집' 탭으로 이동하여 프런트엔드 편집을 활성화하거나 표 도구(인쇄, 복사, 내보내기)를 활성화하세요. 빠른 링크). 무엇보다도 조정하는 동안 편집 내용을 실시간으로 미리 볼 수 있습니다. 변경사항이 있는 경우에는 저장(또는 적용) 체크 표시를 클릭하세요.

완료되면 세 번째이자 마지막 단계에 필요하므로 화면 상단에서 표 단축 코드를 복사하세요.

3. 게시물이나 페이지에 표 삽입

테이블을 사용하려면 위 이미지와 같이 게시물이나 페이지의 콘텐츠에 단축 코드를 붙여넣기만 하면 됩니다. 이 단축 코드는 테이블 스타일 지정 방법에 따라 웹 사이트의 프런트 엔드에서 렌더링됩니다.

우리의 도구에서는 표 도구(인쇄, 내보내기 등), 필터링 및 프런트엔드 제출이 활성화되었음을 확인할 수 있습니다. 하지만 그게 전부입니다. 테이블이 준비되었습니다!

차트를 만들고 싶나요?

wpDataTables를 사용하여 차트를 작성할 수도 있습니다. 테이블을 만든 후 "차트 만들기"를 클릭하여 시작하세요.

여기에서 차트 이름을 지정하고 스타일(선택할 수 있는 항목이 많음)을 선택한 후 차트를 만드는 데 사용할 데이터 테이블을 선택하는 다음 화면으로 계속 진행하세요.

데이터 소스로 사용할 테이블을 선택한 후 테이블 열을 차트 부분에 할당합니다. 선택한 차트에 따라 필요한 최소 값 수가 있을 수 있습니다. 이 예에서는 차트에 최소 두 개의 열(막대)이 필요한 막대형 차트를 선택했습니다. 부동 소수점 및 정수 열을 필터링하기 위해 숫자 범위 슬라이더를 사용할 수도 있습니다. 열을 정렬한 후 다음 단계로 이동하세요.

이제 재미있는 부분입니다. 옵션을 사용하여 차트에 스타일을 지정하고 기능을 추가하세요. 반응형 너비, 높이, 배경, 테두리, 글꼴, 레이블, 색상, 제목 표시/숨기기, 마우스 오버 시 도구 설명 등에 대한 수많은 옵션이 있습니다.

편집이 끝나면 다음을 클릭하고 차트 단축 코드를 복사하세요. 게시물이나 페이지 콘텐츠에 붙여넣고 저장한 후 웹사이트 프런트 엔드로 이동하여 차트를 확인하세요!

추가 보너스로 wpDataTables에는 플러그인을 삭제하더라도 테이블을 유지할지 여부를 선택할 수 있는 고유한 옵션이 포함되어 있습니다(기본적으로 테이블은 플러그인을 삭제한 후 데이터베이스에 저장됩니다).

더 많은 WordPress 테이블 기능 추가

더 원해? WordPress 사이트에 더 많은 테이블 및 차트 옵션을 추가할 수 있는 wpDataTables용 확장 및 추가 기능이 많이 있습니다.

강력한 필터: 계단식(왼쪽에서 오른쪽으로 복합) 필터, 패싯 필터링(좁은 결과에 여러 필터 적용) 설정, 사용자가 필터를 선택할 때까지 표 보기 비활성화, 실시간 검색 기능 추가 등 . 테이블을 설정할 때 옵션을 활성화하고 구성하기만 하면 됩니다.

보고서 작성 도구: 데이터 표를 기반으로 나만의 맞춤 Word 또는 Excel 보고서를 생성합니다. 이는 사용자가 프런트엔드 편집을 허용할 때(데이터를 수집하여 보고서를 다시 실행하고 인쇄할 수 있음) 정기적으로 보고서를 재생성해야 하는 경우(예: 월별 송장 또는 타임카드)에 특히 유용합니다.

Formidable Forms: 인기 있는 Formidable Forms Pro 양식 작성 도구에 대한 지원을 추가합니다. Formidable Forms를 사용하여 설문 조사와 같은 데이터 수집 양식을 만든 다음 각 필드가 열로 변환된 사용자 제출을 기반으로 테이블을 자동 생성합니다.

Gravity Forms: Gravity Forms 제출을 wpDataTables와 통합하여 사용자 데이터를 기반으로 WordPress 테이블을 자동으로 생성합니다. 확장 프로그램은 테이블을 생성할 때 새로운 데이터 소스를 추가하므로 특정 Gravity Form에 쉽게 연결하고 데이터를 시각화할 수 있습니다. 또한 Gravity Forms 기반 테이블에 대한 쉬운 프런트 엔드 편집도 있습니다(Gravity Forms 통합 추가 기능 사용).

wpDataTables를 직접 사용해 보세요

대부분의 개발자는 플러그인이 수행할 수 있는 작업에 대한 느낌을 주기 위해 라이브 데모를 제공합니다. 하지만 출력, 즉 미리 결정된 입력을 기반으로 하는 '프런트엔드' 보기만 표시됩니다. 대부분의 플러그인 라이브 데모가 부족한 부분이 바로 여기에 있습니다. 플러그인의 설정 및 도구(예: 백엔드)에 대한 액세스 권한을 제공하지 않습니다. .

그러나 wpDataTables는 데모에서 구매 전 체험할 수 있는 전체 샌드박스를 제공합니다. 모든 자동차 딜러는 악명 높은 테스트 드라이브를 수행합니다. 샌드박스를 통해 플러그인 기능을 마음껏 테스트하고 실시간으로 출력을 볼 수 있습니다.

wpDataTables 데모 보기

복사본을 다운로드하여 자신의 설치 환경에서 테스트해 보고 싶으십니까? wpDataTables는 WordPress.org 저장소에서 가져올 수 있는 라이트 버전을 제공합니다. 위에서 다룬 멋진 프리미엄 기능이 모두 포함되어 있지는 않지만 해당 플러그인이 귀하의 요구 사항에 적합한 솔루션인지 확인할 수 있는 좋은 방법입니다.

wpDataTables Lite 받기

그리고 마음에 드신다면 안심하고 구매하셔도 됩니다. 왜? 이미 제품을 테스트하고 사용해 보셨기 때문입니다.

결론

wpDataTables는 엄청난 양의 데이터를 처리하는 WordPress 사이트에 없어서는 안될 플러그인 중 하나입니다. 학교 프로젝트를 만들거나 회사의 연례 보고서를 만들 때 테이블과 시각화는 데이터 표현에서 중요한 역할을 합니다.

WordPress용 wpDataTables 받기

wpDataTables를 사용해 보셨나요? 아니면 이 플러그인의 기능에 대해 궁금한 점이 있으신가요? 아래에 의견을 남겨주세요. 여러분의 의견을 듣고 싶습니다!