wpDataTables를 사용하여 WordPress에서 놀라운 반응 형 테이블 만들기

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


기본 HTML 테이블

표준을 사용하여 WordPress에 표를 추가 할 수 있습니다 HTML 테이블 태그. 매우 간단하며 다음과 같은 기본 구조를 사용합니다 (게시물을 만들 때 ‘텍스트’탭에 입력해야 함).

먼저 둘째 제삼
잭슨 25
여자 젠슨 30

그러면 다음과 유사한 표가 나타납니다 (주 – 헤더 셀의 스타일은 테마에 따라 다름).

먼저둘째제삼
잭슨25
젠슨30

HTML을 사용하여 테이블을 만들면 사이트에 하나 또는 두 개의 테이블 만 추가하려는 경우에는 문제가 없습니다. 그러나 테이블을 자주 만들려는 경우 몇 가지 문제가 발생할 수 있습니다..

  • 고급 옵션을 위해 HTML 코딩을 배워야합니다
  • HTML을 추가하면 시간이 많이 걸리고 많은 테이블을 만들면 장기적으로 생산성이 저하됩니다
  • 이 방법은 레이아웃과 디자인이 크게 제한됩니다 (고급 개발자가 아닌 경우)

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

귀하의 사이트는 반응이 좋지만 테이블이 반응하지 않습니다.

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

이전에는 WordPress에서 HTML로 테이블을 삽입하는 세 가지 주요 문제를 식별했습니다. 걱정하지 마십시오. 테이블을 만드는 더 좋은 방법이 있습니다. 위에서 언급 한 모든 문제를 제거하고 유용한 기능을 제공하는 플러그인을 소개하겠습니다..

wpDataTables로 더 나은 테이블 만들기

wpDataTables 반응 형 테이블 플러그인

WordPress로 테이블을 만들려면 wpDataTables를 적극 권장합니다. 이 완전 반응 형 프리미엄 플러그인을 사용하면 WordPress에서 표와 차트를 쉽게 만들고 사용자 지정하고 관리 할 수 ​​있습니다. 코딩 불필요. 테이블과 차트를 설치하고 시작하기 만하면됩니다! 14,300 명 이상의 사람들이 신뢰했으며 이전에이 달의 WordPress 플러그인 중 하나로 지명했습니다. 단순한 의견으로 WordPress 기반 웹 사이트에 테이블을 추가하는 가장 좋은 방법 중 하나입니다..

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

위의 버튼을 클릭하여 Themeforest의 wpDataTables에 대해 자세히 알아 보거나 계속 읽는 이유를 알아 보려면 계속 읽으십시오..

여러 데이터 소스

wpDataTables 데이터 소스

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

MySQL 쿼리는 내가 볼 수 있기 때문에 개인적으로 가장 좋아하는 것입니다. 수정 적절한 데이터베이스의 데이터. 테이블 프로젝트를 수행하는 개발자 팀이 있으면 협업이 매우 간단 해집니다 (나중에 자세히 설명).!

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

테이블 디자인이 훨씬 쉬워졌습니다. 몇 개의 확인란과 몇 가지 색상을 선택하면 사이트 테마를 보완하도록 플러그인을 디자인 할 수 있습니다. 플러그인이 제공하는 멋진 디자인 기능을 살펴보십시오.

wpDataTables 사용자 정의 스타일링

인터페이스 언어, 시간 / 날짜 형식, 정렬, 사용자 정의 JS / CSS 등을위한 내장 옵션도 있습니다. 그리고 플러그인도 모바일 반응 형이라고 언급 했습니까? 화면 크기에 관계없이 테이블이 소비하는 공간의 양을 설정할 수 있습니다!

효율적인 검색을위한 필터

wpDataTables 정렬 및 필터 옵션

새 테이블을 만들거나 기존 테이블을 편집 할 때 필터를 활성화하는 옵션이 있습니다. 필터를 사용하면 원하는 항목만으로 결과 집합을 줄일 수 있습니다. 큰 데이터베이스를 쿼리 할 때 매우 유용합니다. 예를 들어 라이브러리 데이터베이스가있는 경우 제목 책을 더 빨리 찾는 데 도움이 될 것입니다.

그러나 필터를 편집 할 때마다 데이터베이스에서 수행 할 계산 수가 증가하여 서버 압력이 증가합니다. 따라서 필터를 완전히 비활성화하는 달콤한 옵션이 있습니다..

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

wpDataTables 프런트 엔드 편집 허용

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

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

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

wpDataTables 차트 스타일

wpDataTables를 사용하면 Google 차트, HighCharts 또는 Chart.js를 통해 동적 차트를 만들어 테이블 데이터를 시각화 할 수 있습니다. 이는 월간 소득 보고서를 공유하는 블로거와 같이 많은 숫자 데이터가있는 테이블에 특히 유용합니다..

평생 업데이트

대부분의 플러그인 개발자는 1 년 동안의 업데이트 및 지원을 제공합니다. 그러나이 개발자는 일회성 비용으로 평생 업데이트 및 6 개월의 지원을 포함했습니다 (참고 – 지속적인 지원을 위해서는 라이센스를 갱신해야합니다).

자세한 문서

개발자는 wpDataTables 사용법을 설명 할 때 돌을 돌리지 않습니다. 플러그인의 모든 기능을 이해하는 데 도움이되는 광범위한 온라인 설명서와 비디오 자습서가 있습니다.!

이것은 우리에게 두 가지를 알려줍니다.

  1. 개발자는 고객을 걱정하여 제품 구매를 위해 다시 방문합니다.
  2. 지식이 풍부한 고객 = 딸꾹질 감소 = 지원 티켓 감소 = 행복한 고객

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

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

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

1. wpDataTables 설치

나는 이것이 명백한 것을 알고 있지만, 먼저 wpDataTables를 설치해야합니다. 이 플러그인은 프리미엄 플러그인이므로 CodeCanyon에서 구매 및 다운로드해야합니다 (구입으로 이동하여 “설치 가능한 WordPress 파일 만”다운로드)..

wpDataTables 플러그인 설치

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

2. 데이터 테이블 생성

플러그인이 활성화되면 새로운 “wpDataTables”메뉴 항목이 있어야합니다. 그것을 클릭 한 다음 큰 파란색 새로 추가 버튼을 클릭하여 새 테이블 만들기를 시작하십시오..

wpDataTables 테이블 작성 또는 가져 오기

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

wpDataTables 테이블 관리

데이터 소스를 업로드하면 맞춤 테이블 이름을 입력하고 옵션을 사용하여 열과 행을 수정, 추가 또는 삭제할 수 있습니다. 그런 다음 녹색 버튼을 클릭하여 테이블 만들기를 완료하십시오..

wpDataTables 테이블 설정

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

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

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

wpDataTables 짧은 코드

표를 사용하려면 위의 이미지와 같이 게시물 또는 페이지의 내용에 단축 코드를 붙여 넣기 만하면됩니다. 이 단축 코드는 표 스타일에 따라 웹 사이트 프런트 엔드에 표시됩니다.

wpDataTables 프런트 엔드 테이블

우리는 테이블 도구 (인쇄, 내보내기 등), 필터링 및 프런트 엔드 제출을 사용하도록 설정했습니다. 하지만 그게 다야 – 식탁 준비가 끝났다!

차트를 만들고 싶다?

wpDataTables를 사용하여 차트를 작성할 수도 있습니다. 표를 만든 후“차트 만들기”를 클릭하여 시작하십시오.

wpDataTables 차트 작성

여기에서 차트 이름을 지정하고 스타일을 선택하고 (선택할 수 있음) 다음 화면으로 이동하여 차트를 작성하는 데 사용할 데이터 테이블을 선택하십시오..

wpDataTables 데이터 할당

데이터 소스로 사용할 테이블을 선택한 후 테이블 컬럼을 차트의 파트에 지정하십시오. 선택한 차트에 따라 필요한 최소값이있을 수 있습니다. 이 예에서는 차트에 대해 적어도 두 개의 열 (막대가 됨)이 필요한 막대 차트를 선택했습니다. 열을 정렬하면 다음 단계로 넘어갑니다..

wpDataTables 차트 사용자 정의

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

편집을 마치면 다음을 클릭하고 차트 단축 코드를 복사하십시오. 게시물이나 페이지 내용에 붙여 넣기 만하면 웹 사이트의 프런트 엔드로 이동하여 차트를 볼 수 있습니다.!

워드 프레스 테이블 기능 추가

더 원해? 여러 가지가 있습니다 wpDataTables의 확장 및 추가 기능 WordPress 사이트에 더 많은 표 및 차트 옵션 추가.

wpDataTables 고급 필터

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

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

wpDataTables 강력한 양식

강력한 형태: 인기있는 Forms Pro 폼 빌더에 대한 지원을 추가하십시오. 강력한 양식을 사용하여 설문 조사와 같은 데이터 수집 양식을 만든 다음 각 필드를 열로 변환하여 사용자 제출을 기반으로 테이블을 자동 생성.

중력 형태: Gravity Forms 제출을 wpDataTables와 통합하여 사용자 데이터를 기반으로 WordPress 테이블을 자동으로 작성합니다. 확장 프로그램은 테이블을 만들 때 새로운 데이터 소스를 추가하여 특정 중력 양식에 쉽게 연결하고 데이터를 시각화합니다.

스스로 wpDataTables 사용해보기

wpDataTables 라이브 샌드 박스

대부분의 개발자는 플러그인이 무엇을 할 수 있는지에 대한 라이브 데모를 제공합니다. 그러나 출력, 즉 미리 정의 된 입력을 기반으로하는 “프론트 엔드”보기 만 표시합니다. 대부분의 플러그인 라이브 데모가 부족한 경우 – 플러그인의 설정 및 도구 (예 : 백엔드)에 액세스 할 수 없습니다..

그러나 wpDataTables는 데모에서 전체 샌드 박스를 제공합니다. 구입 전 시도. 모든 자동차 딜러는 악명 높은 시운전을합니다. 샌드 박스를 통해 마음의 내용에 대한 플러그인 기능을 테스트하고 실시간으로 결과를 볼 수 있습니다.

wpDataTables 데모보기

자신의 설치에서 테스트하기 위해 사본을 다운로드하고 싶습니까? wpDataTables는 WordPress.org 저장소에서 가져올 수있는 라이트 버전을 제공합니다. 위에 설명 된 멋진 기능을 모두 갖추고 있지는 않지만 플러그인이 귀하의 요구에 적합한 솔루션인지 확인할 수있는 좋은 방법입니다.

wpDataTables Lite 가져 오기

그리고 당신이 그것을 좋아한다면, 당신은 계속해서 마음의 평화로 그것을 구입할 수 있습니다. 왜? 이미 제품을 테스트하고 사용했기 때문에.

결론

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

WordPress 용 wpDataTables 가져 오기

wpDataTables를 사용해 보셨습니까? 또는이 플러그인이 무엇을 할 수 있는지에 대한 질문이 있습니까? 아래에 의견을 남겨주세요 – 귀하의 의견을 듣고 싶습니다!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me