WordPress에서 데이터 테이블을 사용하는 방법 – 데이터가 채워진 HTML 테이블을 작성하는 창의적인 방법

테이블은 워드 프레스가 특히 좋은 것이 아닙니다. 기본적으로 WordPress에서 데이터 테이블을 보여 주려면 원시 HTML과 CSS를 사용하여 모든 것을보기 좋게 만들기 위해 전체 프레젠테이션을 직접 작성해야 할 것입니다..


그리고 새로운 블록 편집기를 잊어 버리지 않았습니다. 확실히 전체 테이블을 쉽게 만들고 표시 할 수는 있지만 특히 대규모 데이터 세트에는 완벽한 솔루션이 아닙니다..

어쨌든, 테이블은 CodeinWP의 게시물에서 많이 사용하고 있기 때문에 오늘 최고의 전략 중 일부를 공유하고 싶습니다..

이 가이드에서는 WordPress에서 HTML 테이블 / 데이터 테이블을 사용하여 원시처럼 보이게 만드는 방법과 모바일에 최적화되어 있으며 SEO에 친화적 인 방법에 대한 창의적인 아이디어를 제공합니다..
WordPress에서 데이터 테이블을 사용하는 방법

WordPress의 데이터 테이블에 대한 세 가지 갈래 접근

우리의 접근 방식을 빠르게 요약하기 위해 WordPress의 데이터 테이블을 사용하여 세 가지 방법으로 작업했습니다.

(ㅏ) 반응이 빠르고 간단한 표를 사용하여 기본 데이터를 표시하고 게시물의 일부를 더 쉽게 요약 할 수 있습니다..

(비) 우리가 부르는 것을 사용하여 "중간층 테이블" 마우스로 가리키면 사용자 정렬 및 행 강조 표시와 같은 추가 기능을 사용할 수 있습니다..

라이브 예 :

호스팅 회사 등급 / 5 설문 조사 인기도 시장 인기도 (알렉사)
GoDaddy3.50.41223
블루 호스트3.30.261780
HostGator3.70.301872
WPEngine4.40.374065
SiteGround4.61.005708
드림 호스트4.10.2210030
A2 호스팅3.80.1612709
Cloudways4.50.3918544
Kinsta4.80.2523350
플라이휠4.60.1834689

호스팅 설문 조사에서

(씨) 프론트 엔드에서 사용자에게 잘 보이지 않는 훨씬 더 진보 된 내부 작업을 허용하는 자동 새로 고침 테이블을 사용합니다. 예를 들어,이 표는 Google 스프레드 시트를 기반으로 작성되며 자동으로 업데이트됩니다 (즉, 시트를 업데이트 할 때마다 테이블도 업데이트 됨)..

예:비주얼 라이저 호스트 테이블 데모

Google의 접근 방식을 에뮬레이트하고 WordPress에서 멋진 데이터 테이블을 구축하는 방법은 다음과 같습니다.

전략 # 1 : Visualizer를 사용하여 테이블에 생명을 불어 넣으십시오

아마도 가장 진보 된 방법으로 시작해 봅시다! 그런 다음이 포스트를 진행하면서 더 간단하게 만들 것입니다..

비주얼 라이저 WordPress에서 데이터 테이블을 처리하는 첫 번째 전략을 가능하게하는 자체 플러그인 및 기본 도구 중 하나입니다..

  • izer️ Visualizer 란 무엇입니까? 차트, 그래프 및 표를 만든 다음 짧은 코드 나 블록을 통해 블로그 게시물에 포함시킬 수있는 플러그인입니다. 기본 기능 만 필요한 경우 사용이 간단하지만 후드 아래에서 조금 더 땜질하려는 경우 매우 강력합니다..

Visualizer의 멋진 점 중 하나는 여러 소스에서 테이블뿐만 아니라 차트에 대한 데이터를로드 할 수 있다는 것입니다. 예를 들어, 새 테이블을 만들 때 다음에서 가져올 수 있습니다.

  • CSV 파일,
  • URL (Google 스프레드 시트 포함),
  • 다른 차트,
  • WordPress (필터 / 워크 플로를 생성 한 다음 WordPress 데이터베이스를 탐색하고 원하는 데이터를 불러옵니다),
  • 데이터베이스를 직접 (원시 SQL 쿼리 사용),
  • 또한 수동으로 데이터를 입력 할 수도 있습니다.


시각화 도구 : WordPress 용 테이블 및 차트 관리자

저자 : 테마 섬


90 % 등급


40,000+ 설치


WP 3.5 이상 필요

더 많은 정보

visualizer.zip

현재 버전 : 3.4.3

최종 업데이트 : 2020 년 5 월 4 일


90 % 등급


40,000+ 설치


WP 3.5 이상 필요

WordPress.org 플러그인 페이지


시각화 도구 : WordPress 용 테이블 및 차트 관리자

좋아, 그래서 당신의 테이블을 생생하게 여기는 곳은 어디입니까??

일반적으로 테이블에 대해 어려운 점은 수동으로 테이블을 작성하는 것은 기본적으로 나중에 업데이트 할 때와 동일한 시간이 걸린다는 것입니다. 우리는 오히려 테이블을 일회성 작업으로 만들고 모든 것을 자동으로 최신 상태로 유지하려고합니다..

Visualizer를 사용하면 URL에서 테이블의 데이터를 가져 와서 매시간 / 12 시간 / 일 / 3 일마다 가져 오기를 반복하도록 선택할 수 있습니다.

이것이 효과적으로 의미하는 것은 자동으로 새로 고쳐지는 테이블 소스의 변경을 기반으로합니다. 읽기 : 다시 돌아와서 직접 업데이트 할 필요가 없습니다..

다음과 같은 네 가지 창의적인 방법을 활용할 수 있습니다.

사례 연구 또는 분석 게시물을 최신 상태로 유지 (자동)

우리는 WordPress 호스팅 시장에 푹 빠져있었습니다. 우리는 주제에 대한 많은 게시물을 가지고 있으며, 대부분은 지속적인 업데이트가 필요합니다.

주요 호스팅 비교 버전 중 하나에는 호스트의로드 시간을 강조 표시 한 라이브 테이블이 포함되어 있습니다. 다음과 같이 보입니다 (라이브 테이블).

.visualizer-41792oddTableRow {배경색 : #eaeaea! important;}

(지금 해당 게시물로 이동하면 실제로 작동하지 않을 수 있습니다. 많은 경우를 테스트하면서 자주 변경합니다.)

이 전체 테이블은 Google 스프레드 시트에서 자동으로 가져옵니다. 로고와 링크조차 Google 스프레드 시트에 원시 HTML로 저장됩니다. 예를 들어로드 시간을 업데이트 할 때마다 테이블에서도 업데이트됩니다. 말할 것도없이, 사용자는 테이블을 정렬 할 수 있습니다.

이것을 설정하는 것은 전혀 어렵지 않습니다.

1. Google SheetStandard 자료를 준비하십시오. 예를 들면 다음과 같습니다.

시트 예

그때, "웹에 게시" 에 따르면 이 안내서.
2. VisualizerFirst에서 테이블을 생성하고 비주얼 라이저 플러그인, duh!

이동 미디어 → 비주얼 라이저 라이브러리 클릭 새로운 걸 더하다. 선택 .

설정 창에서 URL에서 데이터 가져 오기, 들어가다 일정 가져 오기 그런 다음 가져 오기 URL과 일정을 입력하십시오. 이렇게 :

수입 일정

테이블을 저장.
3. 포스트 / 페이지에 테이블 추가 짧은 코드 또는 블록 편집기를 사용하여 테이블을 포함시킵니다. 이제 워드 프레스에 데이터 테이블이 있습니다.!

이 설정을 사용하면 테이블에 대한 데이터를 자동으로 가져오고 해당 테이블을 자동으로 업데이트 할 수 있습니다.

여러 게시물에서 여러 테이블을 최신 상태로 유지 (자동)

이것은 이전 시나리오와 관련이 있지만 각도가 약간 다릅니다..

기본적으로 여러 테이블의 데이터 소스와 동일한 Google 스프레드 시트를 사용하는 데 방해가되지 않습니다..

즉, 여러 게시물 / 페이지에서 유사한 표를 포함 할 수 있으며 시간이 지남에 따라 동기화가 표류되지 않을까 걱정할 필요가 없습니다 (예 : 하나는 업데이트하지만 다른 하나는 업데이트하지 않는 등)..

Visualizer에서 테이블을 설정할 때 고급 설정으로 이동하여 페이지 매김, 행 수, 사용자 정렬 비활성화 / 활성화, 검색 활성화 등과 같은 다양한 항목을 조정할 수 있습니다. 이는 동일한 데이터 소스를 사용하더라도 테이블이 여전히 다르게 보일 수 있음을 의미합니다..

트래픽 / 사용자 / 판매 번호를 최신 상태로 유지 (자동)

웹 비즈니스에서 트래픽, 판매, 서비스 된 사용자 수 등과 같은 다양한 숫자 / 표시자를 웹 사이트에서 공유하는 경향이있었습니다..

그러나 모든 사람이 외부 서비스를 포함하고 싶지 않아서 어떤 방식 으로든 서비스를 조정할 수는 없습니다..

이상적으로는 매우 투명하더라도 쇼핑 카트 나 트래픽 도구에서 퍼간 광고가 크게 하락하는 것을 확인하고 싶지는 않습니다. "우리가 잘하고 있는지 봐!"

다른 레이어를 추가하고 먼저 데이터를 Google 스프레드 시트로 가져 오는 경우 트래픽 / 판매 테이블로 가져 오기 전에 모든 변경 사항을 조정하여 사이트에 게시 할 수 있습니다..

설정은 이전 시나리오와 동일합니다. 새 Google 스프레드 시트를 만들고 숫자를 가져 오거나 입력 한 다음 Visualizer 테이블 또는 차트에 연결하면됩니다..

데이터베이스 자동 조회

Visualizer는 소매에 멋진 기능이 하나 더 있습니다. 원시 SQL 쿼리를 통해 WordPress 데이터베이스에서 바로 테이블 데이터를 가져올 수 있습니다..

상당히 진보 된 것들입니다.하지만 기꺼이 실험하고 싶다면 많은 가능성을 제공합니다..

몇 가지 빠른 아이디어 :

먼저 가장 댓글이 많은 게시물을 쉽게 보여줄 수 있습니다. 이러한 목록은 투명성 보고서뿐만 아니라 보관 페이지에서도 사용할 수 있습니다. 예:

댓글을 달았습니다

이와 같은 테이블을 만들려면 Visualizer로 이동하여 새 테이블을 만들고 데이터베이스에서 가져 오기.

쿼리 창에서 다음과 같은 것을 넣을 수 있습니다.

post_title AS post, COUNT (DISTINCT c.comment_ID) AS Comments from wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP by p.ID ORDER BY 의견 DESC LIMIT 10

댓글이 가장 많이 올라온 10 개의 게시물 표가 표시됩니다..

쿼리를 복잡하게하여 URL을 가져 와서 게시물 제목을 게시 할 수 있습니다. 이것은 단지 예일뿐입니다. 당신이 할 수있는 다른 것들이 있습니다 :

  • 특정 카테고리의 모든 게시물을 작성하거나 작성자가 작성
  • 다른 플러그인이 데이터를 저장하고 관련 데이터를 가져 오는 데 사용하는 테이블을 찾습니다.
  • WooCommerce에서 가장 많이 팔린 제품을 판매, 링크, 가격 및 기타 원하는 수와 함께 표시하십시오.
  • Easy Digital Downloads와 동일한 작업을 수행하십시오. 여기에 몇 가지가 있습니다 기성품 쿼리

그 문제에 관한 것입니다. 비주얼 라이저 그리고 우리가 그것을 어떻게 사용하는지. 그러나 이런 종류의 고급 자동화가 필요하지 않은 경우 다른 솔루션도 있습니다.

안정적인 정렬 및 테이블 편집을 위해 TablePress 사용

우리는 또한 큰 팬입니다 테이블 프레스 여러 게시물에 사용했습니다.

예를 들어, WordPress 테마 시장에서 상위 100 명의 플레이어를 나열하는 큰 테이블이 있습니다. 시사:

테마 디렉토리 예

TablePress에서 우리가 좋아하는 점은 행을 쉽게 재정렬하고 행을 숨기고 행을 복제하며 사용자가 테이블을 정렬 할 수있는 컨트롤을 제공한다는 것입니다.

예를 들어 특정 테이블의 경우 백엔드에 표시하지 않는 열 (빨간색)이 더 있습니다. TablePress는 강제로 삭제하지 않고 표시에서 숨길 수 있습니다..

테이블 프레스 숨겨진

Shortcodes Ultimate를 사용하여 HTML 테이블 포주

몸소, 쇼트 코드 궁극 (SU)는 내가 가장 좋아하는 플러그인 중 하나입니다..

많은 단축 코드 중에서 표준 HTML 테이블을 훨씬 더 멋지게 보이게하는데 사용할 수있는 코드도 있습니다.

다음은 최고의 VPN 서비스를 비교 한 게시물의 표입니다.

수 테이블

원시 HTML을 통해 빌드 된 다음 SU 단축 코드가 추가되었습니다. 이 하나:

[su_table] [/ su_table]

표시되는 모든 행 스타일과 테두리는 SU입니다..

다시 말해, 테마에 표를 처리하기위한 CSS가 특별히 없으면 SU를 사용하십시오..

�� 참고; 이 게시물에서 언급 한 세 가지 솔루션 – Visualizer, TablePress 및 SU는 모바일 및 응답 가능한 테이블을 출력 할 수 있습니다..

결론

이 세 가지 플러그인을 실험 해 보는 것이 좋습니다. 우리는 자신의 창작물이기 때문에 Visualizer를 좋아하지만 특정 작업에는 다른 두 가지가 깔끔하다는 것을 인정해야합니다.!


시각화 도구 : WordPress 용 테이블 및 차트 관리자

저자 : 테마 섬


90 % 등급


40,000+ 설치


WP 3.5 이상 필요

더 많은 정보

visualizer.zip

현재 버전 : 3.4.3

최종 업데이트 : 2020 년 5 월 4 일


90 % 등급


40,000+ 설치


WP 3.5 이상 필요

WordPress.org 플러그인 페이지


시각화 도구 : WordPress 용 테이블 및 차트 관리자


테이블 프레스

저자 : 토비아스 베지


100 % 등급


800,000+ 설치


WP 5.3+ 필요

더 많은 정보

tablepress.1.11.zip

현재 버전 : 1.11

최종 업데이트 : 2020 년 4 월 1 일


100 % 등급


800,000+ 설치


WP 5.3+ 필요

WordPress.org 플러그인 페이지


테이블 프레스


워드 프레스 단축 코드 플러그인 — 단축 코드 Ultimate

저자 : 블라디미르 아노 킨


98 % 등급


800,000+ 설치


WP 4.6 이상 필요

더 많은 정보

shortcodes-ultimate.5.9.0.zip

현재 버전 : 5.9.0

최종 업데이트 : 2020 년 5 월 24 일


98 % 등급


800,000+ 설치


WP 4.6 이상 필요

WordPress.org 플러그인 페이지


워드 프레스 단축 코드 플러그인 — 단축 코드 Ultimate

WordPress에서 데이터 테이블을 사용하십니까?

WordPress의 최신 UI에서 테이블과 테이블의 위치에 대해 어떻게 생각하십니까?

Gutenberg 블록 편집기를 사용하면 테이블을 훨씬 더 사용자 친화적으로 만들 수 있으므로 일반 사용자는 이제 더 기꺼이 실험 할 것입니다. 결국, 테이블은 MS Word를 사용해 본 모든 사람에게 익숙한 고전적인 것들 중 하나입니다. 왜 당신은 할 수 없을까요 "그냥 추가해" 워드 프레스로?

WordPress에서 데이터 테이블을 많이 사용합니까? 그렇다면 어떻게 작성합니까?

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map