코딩 없이 WordPress에서 고급 HTML 테이블을 만드는 방법

게시 됨: 2021-12-11

WordPress는 전체 웹의 43%를 차지하는 세계에서 가장 인기 있는 CMS 플랫폼으로 남아 있습니다. 의심할 여지 없이 가장 매력적인 기능을 제공하는 것이지만 WordPress가 코딩 없이 HTML 테이블을 생성할 때 반드시 최고의 플랫폼은 아닙니다.

많은 사람들이 HTML 테이블이 구식이라고 생각하지만 여전히 청중에게 탁월한 가치를 제공합니다. 결과적으로 대부분의 사용자는 특정 "개발자 전용" 작업에 대해 전문가를 고용해야 했습니다. 그 목적을 생각하면 당시 워드프레스 사용자들에게는 큰 실망이었습니다.

Gutenberg: 테이블 블록이 있는 WordPress의 기본 편집기

2017년 7월에 열린 유럽 워드캠프에서 워드프레스 설립자인 매트 뮬렌웨그는 구텐베르크 블록 에디터가 워드프레스의 미래 에디터라고 발표했습니다. 많은 WordPress 사용자를 기쁘게 하기 위해 새로운 편집기에는 테이블 블록이 내장되어 있다고 약속했습니다.

그러나 Gutenberg가 WordPress 5.0과 함께 나왔을 때 편집기는 다른 장치에서 응답성과 최적화 문제를 일으킨다는 비판을 받았습니다. 그럼에도 불구하고 편집기에는 약속대로 테이블 블록이 내장되어 있어 사용자가 코딩하지 않고도 웹사이트에서 테이블을 생성할 수 있습니다.

Gutenberg 테이블 블록은 WordPress에서 HTML 테이블을 생성하는 데 매우 편리한 옵션이지만 효과적인 테이블 빌더 솔루션이 되는 데 몇 마일이 걸렸습니다. 가장 매력적인 모양을 제공하지 않으며 재사용할 수 없으며 대규모 데이터베이스를 처리하는 데 적합하지 않습니다.

Gutenberg는 평범한 테이블 빌더에 불과합니다. 테이블 정렬, 필터링 또는 스타일 지정과 같은 고급 HTML 테이블 기능에는 Gutenberg를 사용할 수 없습니다. 대체로 구텐베르크 블록 편집기는 고급 테이블 빌더가 되는 것과는 거리가 멉니다.

따라서 대시보드에 고급 테이블 기능을 추가하는 플러그인을 만드는 것은 WPManageNinja와 같은 무료 로밍 WordPress 개발자에게 달려 있습니다.

Ninja Tables: 고급 HTML 테이블 WordPress 플러그인

Gutenberg가 발표되기 전에도 WPManageNinja의 개발자는 사용자가 번거로움 없이 테이블을 생성할 수 있는 안정적인 WordPress 테이블 플러그인을 만들기 위해 부단히 노력했습니다.

2018년 2월 27일에 WordPress 플러그인 스토어에 Ninja 테이블을 출시했으며 Ninja Tabes가 30000개 이상의 활성 설치를 달성하는 데 몇 달 밖에 걸리지 않았습니다! 우리 사용자들의 놀라운 지원과 감사는 또한 우리가 첫 번째 릴리스 이후 2.5년 이내에 45개 이상의 플러그인 업데이트를 출시하도록 동기를 부여하여 Ninja Tables를 그 과정에서 최고의 WordPress 테이블 플러그인으로 만들었습니다!

동적 기능과 사용자 친화적인 인터페이스 덕분에 Ninja Tables는 현재 70,000개 이상의 웹사이트와 기업에서 사용하고 있습니다.

Ninja Tables는 웹사이트에서 보여줄 다양한 테이블을 생성할 수 있는 데이터 시각화 플러그인입니다. 응답성, 기능, 사용자 정의 기능 및 타사 통합으로 인해 고급 HTML 테이블을 WordPress 사이트로 가져오기가 어려울 때 최상의 선택이 됩니다.

닌자 테이블을 무료로 받으세요

이제 Ninja Tables의 가장 진보된 HTML 테이블 작성 및 사용자 정의 기능에 대해 알아보겠습니다.

  • UI
  • 테이블 편집기
  • 통합

UI

활성화하면 WordPress 대시보드의 사이드바에서 Ninja Tables를 찾을 수 있습니다. 대부분의 WordPress 플러그인과 마찬가지로 Ninja Table은 여러 기능이 있는 UI를 제공합니다. 자세히 알아보자!

  • 모든 탭
  • 도구 및 설정
  • 도움말 및 문서

홈/모든 테이블

Ninja Tables Home 은 신선한 제품으로 매력적인 인터페이스를 제공합니다. 생성 및 가져오기를 위한 두 개의 버튼을 제공합니다.

닌자 테이블 사용

Create Your First Table 버튼을 누르면 수동 WordPress 테이블 빌더로 이동하지만 CSV에서 가져올 수도 있습니다.

처음부터 테이블을 생성하기로 결정한 경우 팝업 창에 제목 과 설명 을 제공하라는 메시지가 표시됩니다. 또한 다양한 가져오기 및 통합 기능을 제공하는 여러 다른 탭을 볼 수 있습니다. 그러나 Ninja Tables의 무료 버전에서는 CSV 또는 JSON을 통해서만 가져오고 WP Fluent Forms와 통합할 수 있습니다.

플러그인으로 테이블을 만드는 방법

제목 과 설명 을 제공했으면 추가 버튼을 클릭하여 테이블 작성기에 액세스합니다. 필요하지 않은 경우 설명 상자를 건너뛸 수 있습니다.

가져오기 기능도 같은 방식으로 작동합니다. Excel 파일이나 컴퓨터에서 만든 다른 CSV 파일을 선택하여 웹사이트에 업로드할 수 있습니다.

어느 쪽이든, 테이블 편집기에서 끝납니다. 생성된 테이블 은 재사용 할 수 있으며 홈 창에 나타납니다. Ninja Tables는 단축 코드를 사용하여 테이블을 식별합니다. 웹사이트의 게시물 또는 페이지에서 표를 사용하려면 페이지 또는 게시물에 표 숏코드를 복사하여 붙여넣기만 하면 됩니다.

도구 및 설정

홈 탭 외에도 Ninja Table에는 사용자가 가져오기, 전역 모양 수정, 사용자 권한 설정 및 전역 설정 변경을 가능하게 하는 도구 및 설정 탭이 있습니다.

워드프레스 테이블 가져오기

가져오기 도구는 이미 다른 인기 있는 테이블 플러그인을 사용 중이고 Ninja Table로 전환한 경우에 적합합니다. Ninja Table에는 Supsystic의 TablePress, Ultimate Tables 및 Data Tables Generator를 위한 원클릭 테이블 가져오기 기능이 있습니다. 이 탭 내에서 CSV 파일을 가져올 수도 있습니다.

다음으로 Global Appearance 탭에서 테이블 스타일을 변경할 수 있습니다. Ninja 테이블은 세 가지 다른 테이블 UI 스타일을 사용하여 테이블을 즉흥적으로 만들 수 있습니다. 또한 기본 설정에 따라 각 스타일을 사용자 정의하고 방문자가 테이블을 검색하고 필터링하도록 허용할지 여부를 선택할 수도 있습니다. 그러나 모양 규칙은 각 테이블에 대해 별도로 수정할 수도 있습니다.

불행히도 Ninja Tables pro 버전이 없으면 다른 백엔드 사용자에 대한 권한 을 설정할 수 없습니다. 나머지 탭에서는 Javascript 오류 를 처리하고 테이블 캐시를 지우는 방법을 선택할 수 있습니다.

도움말 및 문서

다양한 Ninja Tables 기능을 사용하려면 신뢰할 수 있는 문서가 필요하며 당사 팀은 Ninja Tables에 대해 알아야 할 모든 것을 준비했습니다.

닌자 테이블 문서

도움말 및 문서 인터페이스는 Ninja Tables가 무엇을 할 수 있는지에 대한 심층적인 이해를 위해 잘 문서화된 사용자 가이드 를 제공합니다. 여전히 문제가 발생하면 지원 티켓을 제출하여 언제든지 문의할 수 있습니다!

이제 UI에 대해 배웠으므로 테이블을 만들고 싶을 것입니다! 이제 홈으로 돌아가 홈 만들기를 시작하세요!

테이블 편집기

테이블 편집기는 Ninja Tables에서 가장 흥미로운 기능 중 하나입니다. 가장 고급 HTML 테이블 빌더 기능과 사용자 정의로 향상됩니다. 추가 또는 가져오기 버튼을 클릭하면 다재다능한 Ninja Tables 테이블 편집기로 이동합니다.

워드프레스 테이블 기능

Ninja Tables 테이블 빌더 UI는 위에 표시된 섹션으로 구성됩니다. 각 테이블 작성기 섹션에는 아름다운 WordPress HTML 테이블을 만들고 디자인하기 위한 여러 사용자 정의 기능이 있습니다.

상단의 편집 버튼을 클릭하여 테이블 제목 및 설명을 변경하고 테이블 캡션 을 설정할 수 있습니다. 또한 Ninja Tables 테이블 빌더 UI를 사용하면 원할 때마다 테이블을 미리 볼 수 있습니다.

  • 테이블 행
  • 구성
  • 설계
  • 프론트엔드 편집
  • 맞춤 CSS
  • 수입 수출

테이블 빌더 기능에 대해 하나씩 논의해 보겠습니다.

테이블 행

테이블 행은 WordPress의 모든 HTML 테이블 빌더의 기본 측면 중 하나입니다. 말했듯이 열 추가 버튼을 클릭하여 시작할 수 있습니다!

조건부 서식 워드프레스 표

버튼을 누르면 WordPress에서 가장 고급 HTML 테이블 기능 중 일부를 부여하는 열 생성 창이 열립니다. Ninja Tables는 단순한 열 생성 기능을 갖춘 기본 테이블 빌더가 아닙니다. 그 이상입니다.

따라서 열 제목을 작성할 수 있는 동안 데이터 유형 및 반응형 중단점 을 설정할 수도 있습니다(반응형 중단점을 사용하면 특정 장치에서 열을 표시할지 여부를 선택할 수 있음) .

그러나 무료 버전은 선택 필드, 이미지 및 파일 업로드를 제한하고 버튼 생성을 허용하지 않습니다. 여전히 플러그인은 HTML 필드 , 숫자 값 및 날짜 필드 와 같은 놀라운 데이터 추가 기능으로 향상됩니다.

그리고 여전히 테이블 열에 대한 더 많은 제어를 찾고 있다면 다른 열 사용자 정의 탭에서 사용할 수 있는 고급 설정 , 조건부 설정 및 변환 값 의 잠금을 해제할 수 있습니다. 작동 방식에 대한 자세한 내용은 Ninja Tables 문서를 확인하세요.

테이블 열을 추가하면 편집기에 데이터 추가 버튼이 나타납니다. 웹사이트에 데이터를 손쉽게 추가할 수 있습니다. 열 머리글 옆에 있는 톱니바퀴 아이콘을 클릭하여 열을 개별적으로 사용자 정의하고 언제든지 데이터를 편집, 복제 또는 삭제할 수 있습니다!

닌자 테이블 수동 정렬

마지막으로 테이블 행 섹션에서는 테이블이 많은 데이터로 구성된 경우 대량 작업 을 수행하거나 간략한 보기 를 설정할 수도 있습니다.

테이블 구성

테이블 구성 탭은 끌어서 놓기 열 구성을 제공합니다. 일반적으로 HTML 테이블은 일단 생성되면 WordPress에서 구성할 수 없습니다.

워드프레스 테이블 디자인

그런 점에서 Ninja Tables는 테이블 구성을 제한하지 않습니다. 테이블 행은 끌어서 놓기로 구성할 수 있으며 새 열을 생성하거나 기존 열을 편집할 수도 있습니다.

테이블 구성 탭의 다음 탭에서는 렌더링 설정 , 즉 브라우저에서 테이블을 렌더링하는 방법을 선택할 수 있습니다. 기본적으로 테이블은 Ajax 테이블 설정으로 렌더링됩니다. 이 기능을 사용하면 웹사이트 속도에 영향을 주지 않고 대규모 데이터베이스를 통합할 수 있습니다.

두 가지 렌더링 옵션이 있지만 프로 버전이 없으면 고급 테이블 설정을 선택할 수 없습니다. 고급 테이블 은 셀 마지 및 단축 코드를 포함하여 가장 고급 테이블 필드 중 일부를 통합할 수 있으며 SEO 최적화에 적합합니다.

사용자 정의 필터 는 라디오 버튼, 확인란, 날짜 선택기 또는 기타 다양한 특수 UI를 테이블에 포함하려는 경우 편리한 기능입니다. 제품을 표시하거나 테이블 셀에 더 많은 데이터를 추가하는 경우 이러한 기능은 탁월한 전환 최적화 기능을 제공할 수 있습니다. 그러나 사용자 정의 필터도 프로 기능입니다.

버튼 구성을 통해 인쇄 또는 CSV 가져오기 버튼(Pro 기능)을 포함할 수 있습니다. 언어 설정 은 테이블 검색 표시줄, 검색 자리 표시자 또는 검색 드롭다운 제목에 다른 언어를 사용하려는 경우에 유용합니다.

테이블 디자인

Ninja Tables Table Design 은 놀라운 시각적 커스터마이저입니다. 최대 9개의 스타일 사용자 정의 기능이 있는 3개의 스타일 라이브러리 가 있어 WordPress의 HTML 테이블을 시각적으로 최대한 제어할 수 있습니다.

닌자 테이블을 사용자 정의하는 방법

스타일 외에도 테이블 제목, 설명, 검색 표시줄, 열 필터, 머리글 행, 테두리 등을 표시할지 여부를 선택할 수도 있습니다. 또한 스택 가능한 테이블 구성 을 활성화하여 대상 장치가 깨지지 않도록 설정할 수 있습니다. 모든 장치에서.

스타일은 테이블의 시각적 매력에 중요한 역할을 합니다. 그러나 색상이 가장 중요합니다. Ninja 테이블은 테이블 색상 탭 내에서 완전한 색상 사용자 정의를 제공합니다. 표 머리글 색상부터 표 테두리까지 모든 항목을 사용자 지정할 수 있으며 허용되는 색상에는 제한이 없습니다.

색상 사용자 정의를 결정할 수 없는 경우 Ninja Table에는 테이블에 대해 미리 정의된 13가지 색상 구성표가 있습니다! 그러나 이 놀라운 기능을 사용하려면 프리미엄 버전이 필요합니다.

나머지 테이블 디자인 탭은 페이지 매김, 검색 창 위치, 정렬 방법과 같은 다양한 사용자 정의 기능을 제공하며 테이블 디자인을 위한 추가 CSS 클래스를 제공할 수 있습니다.

프론트엔드 편집

프론트엔드 편집은 Ninja Tables가 테이블 플러그인 이상인 또 다른 예시적인 이유입니다. 이를 통해 프론트 엔드 사용자에 대한 편집을 활성화할 수 있습니다. 예를 들어, 사용자가 테이블 데이터를 작성해야 하는 경우 프런트엔드 편집을 용이하게 할 수 있습니다. 그러나 프론트엔드 편집 기능은 프리미엄 버전에서만 사용할 수 있습니다.

커스텀 CSS/JS

사용자 정의 CSS를 사용하면 WordPress에서 HTML의 모양을 제어할 수 있으며 플러그인의 경우 테이블을 제어할 수 있습니다. 이 기사는 비코더를 위한 것이지만 CSS와 Javascript를 알고 있으면 Ninja Tables의 모양을 포괄적으로 제어할 수 있습니다.

수입 수출

다시 말하지만, 가져오기 기능을 사용하면 CSV 파일을 가져오거나 CSV를 통해 기존 테이블을 교체할 수 있습니다. 반면 내보내기 기능을 사용하면 테이블을 CSV 파일로 저장할 수 있습니다.

통합

Ninja Tables는 번거로움 없이 WordPress에서 HTML 테이블을 구축하기 위한 모든 필수 도구와 기능을 통합합니다. 그러나 권한은 테이블 빌딩에만 국한되지 않습니다. 그것은 단순한 테이블 플러그인 그 이상이며 몇 가지 놀라운 통합과 함께 제공됩니다. 모두 최고의 시설을 제공합니다!

  • Fluent Forms 통합
  • WP 게시물
  • 우커머스
  • 구글 스프레드시트
  • 닌자 차트
WordPress에서 수동으로 테이블 만들기

Fluent Forms 통합

웹사이트 소유자는 아마도 웹사이트에서 양식 플러그인을 사용하고 있을 것입니다. 양식 항목을 테이블로 가져오고 싶다면 어떻게 하시겠습니까? Ninja Tables는 양식 항목을 사용하여 테이블 설정 이외의 작업을 수행하지 않고도 테이블을 만들고 표시합니다.

WP Fluent Forms는 현재 세계 최고의 연락처 양식 플러그인이며, 청중으로부터 데이터를 수집하기 위해 플러그인을 사용해 왔다면 많은 작업을 하지 않고도 WordPress 테이블로 가져올 수 있습니다.

WP 게시물 통합

Ninja Tables는 연락처 양식 항목을 테이블로 가져오는 것이 아닙니다. 또한 몇 번의 클릭으로 모든 게시물, 제품, 페이지 등을 표로 정리할 수 있습니다. 게시물이나 제품을 분류하려는 경우 Ninja 테이블 WP Posts 통합을 통해 작업을 크게 최소화할 수 있습니다.

WooCommerce 통합

WooCommerce는 가장 인기 있는 WordPress 상점 플러그인입니다. 그러나 WooCommerce를 사용하는 많은 사람들이 동일한 사용자 경험을 제공한다는 의미이기도 합니다. Ninja Tables with WooCommerce 통합은 사이트의 다양성과 백엔드의 효율성을 제공할 수 있는 전설적인 플러그인입니다. 가장 간단한 WooCommerce 상점 관리를 허용하면서 전환율을 높입니다! Ninja Tables는 WooCommerce 상점을 관리하는 데 필요한 것입니다.

Google 스프레드시트 통합

Ninja Tables가 소매 아래에 숨긴 것은 정말 놀랍습니다! 그게 당신이 생각하는거야, 그렇지?

아마도 Google 스프레드시트는 WordPress 플러그인이 제공할 수 있는 최고의 통합 옵션 중 하나일 것입니다. Google 시트는 가장 단순한 기능을 갖춘 가장 인기 있는 온라인 스프레드시트입니다. 웹 앱은 절대적으로 세계적인 수준의 기능을 가지고 있으며 더 중요한 것은 모든 장치에서 액세스할 수 있다는 것입니다!

Ninja Tables는 모든 Google 시트와 연결하여 시트 업데이트에 따라 웹사이트에 데이터를 표시할 수 있습니다. 따라서 이동 중에 테이블을 업데이트해야 하는 경우 Ninja Tables Google 시트 통합은 절대적인 마스터 클래스입니다!

닌자 차트 통합

테이블은 데이터와 함께 작동합니다. 통계 데이터를 보여주기 때문에 우리는 WordPress 테이블에 의존합니다. 그러나 때때로 우리는 약간의 창의력을 발휘하고 이를 그래픽으로 표시하는 방법을 찾아야 합니다. Ninja Charts 통합은 테이블 데이터의 시각적 표현을 생성하기 위한 완벽한 솔루션입니다. 그것으로 무엇을 할 수 있는지 보고 싶습니까? 영상을 확인하세요!

마무리

Ninja Tables를 사용하면 WordPress에서 고급 HTML 테이블을 만드는 어려움이 마침내 끝났습니다! HTML 코드를 버리고 아름다운 데이터 테이블을 표시해야 하는 모든 WordPress 사용자를 위한 원스톱 솔루션입니다.

Ninja Tables를 사용하여 테이블을 만들고, 참여도를 높이고, 전환율을 높이고, 테이블을 만드는 것 이상을 수행하십시오.

오늘은 그게 다야. 나는 당신에게 최선을 다하기를 바랍니다.

닌자 테이블 가격

공동 저자: Nusrat Fariha

Nusrat은 다양한 주제에 대한 작업을 좋아하는 WPManageNinja의 크리에이티브 콘텐츠 작가입니다. 그리고 그녀가 글을 쓰지 않을 때는 아마도 그녀가 가장 좋아하는 책을 읽고 있을 것입니다!