最好的 WordPress 表格和圖表插件?

已發表: 2022-02-01

需要一種在 WordPress 網站上顯示數據、表格或圖表的方法? 在我們的實踐 wpDataTables 評論中,我們將看看簡單或複雜表的最強大的解決方案之一。

一般來說,wpDataTables 是您會發現的最靈活的表格和圖表插件之一。 您可以從大量不同來源導入或同步數據,包括 Excel、Google 表格、CSV、JSON、WordPress 網站的數據庫、外部數據庫等。 如果需要,您可以從任何表格創建各種圖表。

或者,使用新的簡單表格生成器,您可以設計簡單的可視表格,例如產品比較表或定價表。

最重要的是,前端和後端的用戶界面都非常出色,這為您的訪問者提供了絕佳的體驗,也讓您可以輕鬆地使用表格和圖表。

總的來說,我認為 wpDataTables 插件非常擅長它的功能,所以我們的 wpDataTables 評論通常會非常積極。

在下面的實踐部分中,我將重點介紹 wpDataTables 中的關鍵功能,並向您展示一切是如何工作的,以便您了解積極性的來源。

注意——我們最初在 2018 年發布了這篇評論,但我們在 2021 年 10 月對其進行了全面更新,以說明 wpDataTables 界面的新功能和更改。

wpDataTables 評論:快速了解功能

wpDataTables 評論

首先,您使用 wpDataTables 創建的所有表格和圖表都是響應式的。 我知道——“響應式”在 2021 年並不是什麼性感的東西。但是你會對不能很好地處理響應式設計的表格插件的數量感到驚訝,所以這實際上是一個很大的好處。 您可以設置自己的自定義斷點並隱藏平板電腦/移動設備上的特定列。

關於 wpDataTables,您會喜歡的另一件事是它為您提供了多少種方式來創建表格和/或導入內容。 你可以:

  • 從頭開始創建表
  • 將錶鍊接到外部源,如 Excel、Google 表格、JSON、SQL 查詢、PHP 數組等。數據將隨著源文件的更改而更新
  • 從外部源導入,例如 Excel 或 Google 表格。 與前一個不同,這是一次性導入。 數據不同步。
  • 使用數據庫查詢構建器將 WordPress 內容添加到您的表中,例如帖子、分類法、postmeta 等。
  • 使用 MySQL 查詢從您自己的外部數據庫中提取數據。

雖然我不確定如何測試它,但 wpDataTables 聲稱它能夠處理大表,甚至可以處理數百萬行。

要編輯表格數據,您可以使用類似 Excel 的編輯器,只需單擊並輸入字段即可。 或者,您可以使用“標準”編輯器,讓您在彈出窗口中編輯整行。

對於更簡單的表,wpDataTables 最近還推出了“簡單表”構建器。 您可以使用它來創建更多的可視化表格,例如產品比較表、定價表等。 基本上,您不需要處理大量數據的表格,但您確實希望對設計進行更多控制。

除此之外,您還可以獲得大量設置來控製表格的外觀和功能,包括:

  • 條件格式
  • 前端表格編輯
  • 排序選項
  • 過濾器功能(包括專用小部件)
  • 搜索選項
  • 將表格導出到 Excel 或 CSV 的前端選項
  • 打印表格的前端選項

哦,是的,wpDataTables 不僅適用於表格! 你也可以用它把你的任何一張桌子變成一張漂亮的圖表。 您可以從多種圖表類型中進行選擇,當您更改表格中的數據時,您的圖表將自動更新。 以下是一些圖表類型的部分列表:

  • 折線圖
  • 條形圖
  • 柱形圖
  • 面積圖
  • 餅形圖
  • 甜甜圈圖
  • 直方圖
  • 儀表圖
  • 散點圖
  • 燭台圖

如果您想查看實際的表格和圖表,可以在此處查看一些演示。

動手實踐 wpDataTables:您會喜歡的八件事

好的,現在讓我們動手操作 wpDataTables,我將向您展示這些功能的實際工作原理。 我將以一種線性的方式對此進行介紹,以便您還可以了解使用 wpDataTables 創建表格和圖表的感覺。

1. 表構造器嚮導

為了幫助您創建表,wpDataTables 為您提供了一個精心設計的表構造器嚮導。

首先,您將選擇要從何處獲取表數據。 您可以看到我上面提到的六個選項——其中五個選項專注於數據表,同時您還可以獲得新的“簡單表”選項以獲取更多可視化表:

創建表

我選擇從數據源導入。 就我而言,這是一個已發布的 Google Sheets 表格,其中包含每年奧斯卡男性獲獎者的年齡。

對於此方法,您只需粘貼 URL:

表源

wpDataTables 然後為您提供它找到的列的摘要。 如果需要,您可以更改每列的數據類型(例如,您可以將列設為數字或日期)。 如果需要,您還可以手動添加新列:

在 wpDataTables 中配置表列

一旦您對事物的外觀感到滿意,您就告訴 wpDataTables 導入表,它將引入所有數據。

2. 兩種不同的數據表編輯器,包括類 Excel 編輯器

除了用於可視化表格的簡單表格構建器(稍後我將與您分享)之外,wpDataTables 還為您提供了兩種不同的編輯器來處理數據:

  • 類似 Excel 的編輯器——聽起來就是這樣。 您可以在瀏覽器中編輯數據,就像在 Excel 單元格中鍵入一樣。
  • 標準編輯器——您將獲得更直觀的界面,以及用於管理列設置等詳細信息的彈出窗口。

下面是類似 Excel 的編輯器的工作方式 - 要編輯字段,您只需雙擊並鍵入(就像在 Excel 中工作一樣):

wpdatatables excel編輯器

對於非文本字段,您將獲得其他選擇器。 例如,您可以為具有日期數據類型的列打開日期選擇器。

您還可以打開一個列列表視圖,讓您快速配置列或對數據進行排序/過濾:

編輯列

以下是使用標準編輯器的工作原理:

wpDataTables 標準編輯器

這裡的一件好事是,當您在標準編輯器中工作時,您可以快速打開列的設置作為滑出。

總體而言,當您實際處理數據時,類似 Excel 的編輯器會很有幫助。 但標準編輯器的好處是可以輕鬆訪問詳細的列控件。 說起…

3.詳細的欄目設置

在標準編輯器中,您可以訪問每列的詳細設置,以便您控制設置,例如:

  • 數據類型
  • 自定義 CSS 類
  • 是否允許排序
  • 是否允許過濾。 如果是,如何使用過濾器
  • 條件格式。 例如,您可以根據單元格的數據添加自定義 CSS 類(它確實很像 Excel 或 Google 表格中的條件格式
wpDataTables 列設置

4.詳細的整體表設置

在表格數據上方,您可以獲得表格的整體設置集合。

在這裡,您可以控制:

  • 過濾器、排序和搜索的表範圍設置。
  • 前端編輯——人們是否可以從前端編輯表格。
  • 表格工具——這些讓用戶可以打印您的表格或將其導出到 Excel/CSV。

這也是您可以打開在各種設備上隱藏某些列的功能的地方:

wpDataTables 表設置

當您打開響應式折疊時,您會獲得新的列設置,可讓您在移動設備或平板電腦設備上隱藏各個列。

在最近的版本中,wpDataTables 還添加了一個新的自定義選項卡,可讓您自定義表格的設計。 您可以從選擇基礎“皮膚”開始。 然後,您可以使用其他選項來控制顏色、版式、邊框和其他設置:

wpDataTables 自定義選項

5. 從表格創建圖表

除了表格功能之外,wpDataTables 還包括非常強大的圖表功能,可讓您將任何一張表格轉換為由幾個不同圖表引擎提供支持的各種類型的圖表。

當您創建圖表時,您將首先選擇要使用的渲染引擎。 您的選擇是:

  • 谷歌圖表
  • 高圖
  • 圖表.js

然後,您可以從所選渲染引擎支持的類型中選擇要創建的圖表類型。 例如,使用 Google Charts,您可以從 14 種不同的圖表類型中進行選擇:

wpDataTables 圖表生成器

選擇圖表類型後,您可以選擇現有表之一作為圖表的數據源:

wpDataTables 圖表源

然後,您可以準確選擇要使用該表中的哪些數據。

例如,您可以只選擇兩個或三個特定列。

您還可以輸入要包含的行的範圍,並選擇是否遵循表格過濾選項(這很酷,因為如果您的一位訪問者在您的網站前端更改了他們的過濾選項,圖表實際上會重新呈現自己):

選擇圖表的列

選擇要使用的數據後,wpDataTables 將為您提供圖表的實時預覽,以及控制選項:

  • 響應式圖表寬度
  • 分組
  • 顏色
  • 邊框
  • 標籤
  • 其他一些較小的設置
wpDataTables 圖表表

一旦您對自己的設置感到滿意,wpDataTables 就會生成一個簡碼,您可以在網站的任何地方使用它。 或者,您也可以使用專用塊。

6. 專用過濾器小部件

如果您不想在表格上方包含過濾器選項,wpDataTables 還帶有自己的專用過濾器小部件,您可以將其放置在任何小部件區域中。 這適用於 WordPress 經典小部件系統和新的基於塊的小部件編輯器。

添加小部件時,它將包括活動表的過濾器控件:

wpDataTables 過濾器小部件

7.很多全局設置

除了特定於表格/圖表的設置之外,wpDataTables 還在wpDataTables → 設置區域中為您提供了大量選項。 在這裡,您可以配置以下內容:

  • 是否解析表格中的簡碼
  • 響應式斷點
  • 顏色
  • 字體
  • 自定義 CSS 和 JavaScript
  • 獨立的數據庫連接
全局設置

8. 用於可視化表的新簡單表構建器

過去,wpDataTables 幾乎專門用於關注數據而不是表設計的數據表。 例如,在過去,您不會將 wpDataTables 用於產品比較表或定價表。

2021 年,當 wpDataTables 推出其新的簡單表格構建器時,這種情況發生了變化。 使用簡單的表格構建器,您可以獲得更直觀的表格構建體驗,其中包括有用的功能,例如:

  • 合併單元格
  • 造型
  • 星級
  • 等等

您可以更好地控制格式,但您會失去使用更高級的數據表選項獲得的排序、過濾和分頁規則。 您也不能從使用簡單表構建器創建的表中創建圖表。

出於這些原因,我認為簡單的表構建器最適合沒有大量數據的表,但如何呈現數據是關鍵。 同樣,一個常見的例子是您自己的產品或您正在推廣的附屬產品的產品比較表。

下面是一個示例 - 再次,您可以看到您獲得了更多格式化選項。 您還可以輕鬆地將簡碼插入任何單元格。

簡單的表格生成器

在頁面下方,您還將獲得已完成表格的實時預覽。

快速了解導入圖表數據的其他方法

上面,我向您展示瞭如何從 Google 表格中導入數據。 但是 wpDataTables 的一大優點是它在導入數據時非常靈活。

因此,在我完成這篇 wpDataTables 評論之前,讓我帶您了解可以將數據放入表中的其他方法。

查詢生成器

查詢生成器允許您查詢:

  • 來自 WordPress 網站數據庫的數據(帖子、分類法等)
  • 來自外部 MySQL 數據庫的任何數據

如果您選擇 WordPress 網站的數據庫,wpDataTables 會為您提供這個非常有用的查詢構建器,您可以在其中瀏覽各種帖子類型並創建有針對性的過濾器:

wpDataTables 查詢生成器

同樣,wpDataTables 可以幫助您使用相同的可視化界面生成對外部數據庫的查詢。

與外部源同步

另一個巧妙的選擇是與外部源同步。 使用這種方法,插件將自動更新每次頁面重新加載的表(或者如果您使用緩存插件,則每次清除緩存時)。

在這裡,您可以從一系列來源中進行選擇:

  • SQL查詢
  • CSV 文件
  • Excel文件
  • 谷歌電子表格
  • XML 文件
  • JSON文件
  • 序列化的 PHP 數組
wpDataTables 同步表源

手動創建表

最後,您始終可以從頭開始創建表。 當您走這條路時,您將首先設置要使用的列及其關聯的數據類型:

wpDataTables 回顧手動創建表

然後,您可以使用類似 Excel 的編輯器或標準編輯器輸入數據。

wpDataTables 定價:有限免費版/專業版 59 美元起

WordPress.org 上有一個有限版本的 wpDataTables。 然而,也只是——“有限”。 您可以使用簡單表構建器將它用於簡單表,但對於嚴肅的數據表來說,它並不是真正的選擇。

如果您特別需要用於數據表或圖表的免費表插件,則最好使用不同的選項。

但是,wpDataTables 真正閃耀的地方在於高級版本。

您可以購買具有一年支持和更新的許可證,也可以購買具有終身支持和更新的許可證。 所有許可證都包含所有功能; 唯一的區別是您可以使用它的網站數量:

  • 一個站點- 一年許可證 59 美元或終身許可證 189 美元。
  • 三個站點- 一年許可證 109 美元或終身許可證 389 美元。
  • 無限站點——一年許可證 249 美元或終身許可證 589 美元。

您還可以使用我們獨家的 wpDataTables 優惠券代碼節省一些錢。

注意– 確保直接從開發商的網站購買。 過去,wpDataTables 僅通過 Envato 的 CodeCanyon 市場銷售。 開發者仍然在 CodeCanyon 維護列表頁面,但價格比直接從開發者那裡購買要高得多,因此我們不建議再通過 CodeCanyon 進行。

wpDataTables 評論:我們的最終想法

在使用了很多 WordPress 表格插件之後,我很有信心地說 wpDataTables 絕對是最好的解決方案之一。

導入表格數據的方式很靈活。 界面使原本可能很複雜的過程變得異常簡單。

除此之外,由於有兩個不同的編輯器,編輯表格很容易。 您可以在各種設置區域中對整個表格或各個列進行大量控制。

使用新的簡單表構建器,您還可以將 wpDataTables 用於更多數據表。 您還可以將其用於更直觀的產品比較表、定價表等。

最後,能夠從同一個插件創建圖表很方便,並且圖表功能非常易於使用。

一個缺點是 WordPress.org 上 wpDataTables 的免費版本非常有限,因此您需要為高級版本付費才能訪問大多數功能。

話雖如此,如果您願意為 Pro 版本付費,這絕對是您應該考慮的。

如果您想查看在 WordPress 中使用表格的其他選項,請查看我們的 TablePress 教程。

獲取 wpDataTables

️ 不要忘記使用我們獨家的 wpDataTables 優惠券來獲得 20% 的折扣。

您對 wpDataTables 或我們的 wpDataTables 評論還有任何疑問嗎? 請在評價部分留下您的意見。