最高のWordPressテーブルとチャートプラグイン?
公開: 2022-02-01WordPressサイトにデータ、表、またはグラフを表示する方法が必要ですか? wpDataTablesの実践的なレビューでは、単純なテーブルまたは複雑なテーブルの最も強力なソリューションの1つを見ていきます。
一般に、wpDataTablesは、最も柔軟なテーブルおよびチャートプラグインの1つです。 Excel、Googleスプレッドシート、CSV、JSON、WordPressサイトのデータベース、外部データベースなど、さまざまなソースからデータをインポートまたは同期できます。 必要に応じて、任意のテーブルからさまざまなグラフを作成できます。
または、新しいシンプルなテーブルビルダーを使用すると、製品比較テーブルや価格テーブルなどのシンプルなビジュアルテーブルを設計できます。
何よりも、ユーザーインターフェイスはフロントエンドとバックエンドの両方で優れており、訪問者に優れたエクスペリエンスを提供し、テーブルやチャートの操作も簡単にします。
全体として、wpDataTablesプラグインはその機能に非常に優れていると思うので、wpDataTablesのレビューは一般的にかなり前向きになります。
以下の実践的なセクションでは、wpDataTablesの主要な機能を強調し、その積極性がどこから来ているのかを理解できるように、すべてがどのように機能するかを示します。
注–このレビューは2018年に最初に公開されましたが、wpDataTablesインターフェイスの新機能と変更を考慮して、2021年10月に完全に更新されました。
wpDataTablesレビュー:機能の概要

まず、wpDataTablesを使用して作成するすべてのテーブルとチャートはレスポンシブです。 私は知っています–「レスポンシブ」は2021年には本当にセクシーなものではありませんでした。しかし、レスポンシブデザインをうまく処理できないテーブルプラグインの数に驚かれることでしょう。それは、実際にはかなり大きなメリットです。 タブレット/モバイルデバイスで独自のカスタムブレークポイントを設定し、特定の列を非表示にすることができます。
wpDataTablesについてもう1つ気に入るのは、テーブルを作成したり、コンテンツをインポートしたりする方法がいくつあるかです。 あなたはできる:
- テーブルを最初から作成する
- テーブルをExcel、Googleスプレッドシート、JSON、SQLクエリ、PHP配列などの外部ソースにリンクします。ソースファイルを変更すると、データが更新されます。
- ExcelやGoogleスプレッドシートなどの外部ソースからインポートします。 前のものとは異なり、これは1回限りのインポートです。 データが同期されません。
- データベースクエリビルダーを使用して、投稿、分類法、postmetaなどのWordPressコンテンツをテーブルに追加します。
- MySQLクエリを使用して、独自の外部データベースからデータをプルします。
テスト方法はわかりませんが、wpDataTablesは、数百万行であっても、大きなテーブルを処理できると主張しています。
テーブルデータを編集するには、Excelのようなエディタを使用して、クリックしてフィールドに入力するだけです。 または、ポップアップで行全体を編集できる「標準」エディターを使用することもできます。
より単純なテーブルの場合、wpDataTablesは最近「単純なテーブル」ビルダーも立ち上げました。 これを使用して、製品比較テーブル、価格設定テーブルなど、より視覚的なテーブルを作成できます。 基本的に、大量のデータを処理する必要はないが、設計をより細かく制御したいテーブル。
それ以外にも、テーブルの外観と機能を制御するための設定がたくさんあります。
- 条件付き書式
- フロントエンドテーブルの編集
- 並べ替えオプション
- フィルタ機能(専用ウィジェットを含む)
- 検索オプション
- テーブルをExcelまたはCSVにエクスポートするためのフロントエンドオプション
- 表を印刷するためのフロントエンドオプション
そうそう、wpDataTablesはテーブルだけのものではありません! また、これを使用して、テーブルのいずれかを見栄えの良いグラフに変えることもできます。 さまざまな種類のグラフから選択でき、表のデータを変更するとグラフが自動的に更新されます。 いくつかのチャートタイプの部分的なリストを次に示します。
- 折れ線グラフ
- 棒グラフ
- 縦棒グラフ
- 面グラフ
- 円グラフ
- ドーナツチャート
- ヒストグラム
- ゲージチャート
- 散布図
- ローソク足チャート
表やチャートの動作を確認したい場合は、ここでいくつかのデモを確認できます。
wpDataTablesの実践:あなたが好きになる8つのこと
では、wpDataTablesを実際に使ってみましょう。これらの機能が実際にどのように機能するかを説明します。 これについては、wpDataTablesを使用してテーブルやグラフを作成するのがどのようなものかを確認できるように、一種の直線的な方法で説明します。
1.テーブルコンストラクタウィザード
テーブルの作成を支援するために、wpDataTablesは適切に設計されたテーブルコンストラクターウィザードを提供します。
まず、テーブルデータを取得する場所を選択します。 上記の6つのオプションを確認できます。5つのオプションはデータテーブルに焦点を当てていますが、より視覚的なテーブル用の新しい「シンプルテーブル」オプションもあります。

データソースからインポートすることを選択しました。 私の場合、これは公開されたGoogleスプレッドシートの表で、毎年のオスカー受賞者の男性の年齢が含まれています。
この方法では、URLを貼り付けるだけです。

次に、wpDataTablesは、検出された列の要約を提供します。 必要に応じて、各列のデータ型を変更できます(たとえば、列を数値または日付にすることができます)。 必要に応じて、手動で新しい列を追加することもできます。

外観に満足したら、wpDataTablesにテーブルをインポートするように指示すると、すべてのデータが取り込まれます。
2. Excelのようなエディタを含む、データ用の2つの異なるテーブルエディタ
ビジュアルテーブル用のシンプルなテーブルビルダー(後で共有します)に加えて、wpDataTablesには、データを操作するための2つの異なるエディターが用意されています。
- Excelのようなエディター–これはそのように聞こえます。 Excelセルに入力するのと同じように、ブラウザでデータを編集できます。
- 標準エディター–列設定などの詳細を管理するためのポップアップとともに、より視覚的なインターフェイスを利用できます。
Excelのようなエディタの仕組みは次のとおりです。フィールドを編集するには、ダブルクリックして入力するだけです( Excelでの作業と同じように)。

非テキストフィールドの場合、他のセレクターを取得します。 たとえば、日付データ型の列の日付ピッカーを開くことができます。
列リストビューを開いて、列をすばやく構成したり、データを並べ替え/フィルタリングしたりすることもできます。

そして、これが標準エディタを使用するためにどのように機能するかです:

ここでの優れた点の1つは、標準のエディターで作業しているときに、列の設定をスライドアウトとしてすばやく開くことができることです。
全体として、Excelのようなエディターは、実際にデータを操作するときに役立ちます。 ただし、標準エディターの利点は、詳細な列コントロールに簡単にアクセスできることです。 と言えば…
3.詳細な列設定
標準エディターでは、次のような設定を制御できる各列の詳細設定にアクセスできます。
- データ型
- カスタムCSSクラス
- 並べ替えを許可するかどうか
- フィルタリングを許可するかどうか。 もしそうなら、フィルタリングを使用する方法
- 条件付き書式。 たとえば、セルのデータに基づいてカスタムCSSクラスを追加できます(実際、ExcelやGoogleスプレッドシートの条件付き書式によく似ています)。

4.詳細な全体的なテーブル設定
テーブルデータの上に、テーブルの全体的な設定のコレクションが表示されます。
ここでは、以下を制御できます。
- フィルタ、並べ替え、検索のテーブル全体の設定。
- フロントエンド編集–ユーザーがフロントエンドからテーブルを編集できるかどうか。
- テーブルツール–これらを使用すると、ユーザーはテーブルを印刷したり、Excel/CSVにエクスポートしたりできます。
また、これは、さまざまなデバイスで特定の列を非表示にする機能をオンにできる場所でもあります。

レスポンシブ折りたたみをオンにすると、モバイルデバイスまたはタブレットデバイスで個々の列を非表示にできる新しい列設定が得られます。
最近のリリースでは、wpDataTablesは、テーブルのデザインをカスタマイズできる新しい[カスタマイズ]タブも追加しました。 ベースの「スキン」を選択することから始めることができます。 次に、他のオプションを使用して、色、タイポグラフィ、境界線、およびその他の設定を制御できます。

5.テーブルからチャートを作成します
wpDataTablesには、テーブル機能に加えて、非常に強力なチャート機能も含まれています。これにより、テーブルのいずれかを、いくつかの異なるチャートエンジンを搭載したさまざまなタイプのチャートに変えることができます。

グラフを作成するときは、最初に使用するレンダリングエンジンを選択します。 オプションは次のとおりです。
- Googleチャート
- HighCharts
- Chart.js
次に、選択したレンダリングエンジンでサポートされているタイプから、作成するチャートのタイプを選択できます。 たとえば、Google Chartsでは、14種類のグラフから選択できます。

グラフの種類を選択したら、既存のテーブルの1つを選択して、グラフのデータソースとして機能させることができます。

次に、そのテーブルで使用するデータを正確に選択できます。
たとえば、2つまたは3つの特定の列だけを選択できます。
含める行の範囲を入力し、テーブルのフィルタリングオプションに従うかどうかを選択することもできます(訪問者の1人がサイトのフロントエンドでフィルターオプションを変更すると、グラフが実際に再レンダリングされるため、これはすばらしいことです。 )::

使用するデータを選択すると、wpDataTablesは、チャートのライブプレビューと、以下を制御するためのオプションを提供します。
- レスポンシブチャートの幅
- グループ化
- 色
- ボーダー
- ラベル
- 他のいくつかの小さな設定

設定に満足したら、wpDataTablesはサイトのどこでも使用できるショートコードを吐き出します。 または、専用のブロックを使用することもできます。
6.専用フィルターウィジェット
テーブルの上にフィルターオプションを含めたくない場合は、wpDataTablesに専用のフィルターウィジェットが付属しており、任意のウィジェット領域に配置できます。 これは、WordPressのクラシックウィジェットシステムと新しいブロックベースのウィジェットエディターの両方で機能します。
ウィジェットを追加すると、アクティブなテーブルのフィルターコントロールが含まれます。

7.多くのグローバル設定
表/グラフ固有の設定に加えて、wpDataTablesには、 wpDataTables→[設定]領域に多数のオプションがあります。 ここでは、次のように構成できます。
- テーブル内のショートコードを解析するかどうか
- レスポンシブブレークポイント
- 色
- フォント
- カスタムCSSとJavaScript
- 個別のデータベース接続

8.ビジュアルテーブル用の新しいシンプルなテーブルビルダー
以前は、wpDataTablesは、テーブルのデザインではなく、データに重点を置いたデータテーブル専用でした。 たとえば、以前は、製品比較テーブルや価格設定テーブルにwpDataTablesを使用していませんでした。
これは、wpDataTablesが新しい単純なテーブルビルダーを起動した2021年に変更されました。 シンプルなテーブルビルダーを使用すると、次のような便利な機能を含む、より視覚的なテーブル作成エクスペリエンスを得ることができます。
- 結合されたセル
- スタイリング
- 星による評価
- 等々
書式設定をより細かく制御できますが、より高度なデータテーブルオプションで得られる並べ替え、フィルタリング、およびページネーションのルールは失われます。 また、単純なテーブルビルダーで作成したテーブルからグラフを作成することもできません。
これらの理由から、単純なテーブルビルダーは、データが少ないテーブルに最適だと思いますが、そのデータをどのように表示するかが重要です。 繰り返しになりますが、一般的な例は、宣伝している自社製品またはアフィリエイト製品の製品比較表です。
以下に例を示します。ここでも、フォーマットのオプションがさらに多くなっていることがわかります。 ショートコードを任意のセルに簡単に挿入することもできます。

ページのさらに下には、完成したテーブルのライブプレビューも表示されます。
チャートデータをインポートするための他の方法の概要
上記では、Googleスプレッドシートの表からデータをインポートする方法を説明しました。 しかし、wpDataTablesの優れた点の1つは、データのインポートに関して柔軟性があることです。
したがって、このwpDataTablesのレビューを終える前に、データをテーブルに取り込む他の方法について説明します。
クエリビルダー
クエリビルダーを使用すると、次のクエリを実行できます。
- WordPressサイトのデータベースからのデータ(投稿、分類法など)
- 外部MySQLデータベースからのデータ
WordPressサイトのデータベースを選択した場合、wpDataTablesは、さまざまな投稿タイプを調べてターゲットフィルターを作成できる、この非常に便利なクエリビルダーを提供します。

同様に、wpDataTablesは、同じビジュアルインターフェイスを使用して外部データベースへのクエリを生成するのに役立ちます。
外部ソースと同期する
もう1つの優れたオプションは、外部ソースと同期することです。 この方法では、プラグインはページのリロードごとに(または、キャッシュプラグインを使用している場合はキャッシュがクリアされるたびに)テーブルを自動的に更新します。
ここでは、さまざまなソースから選択できます。
- SQLクエリ
- CSVファイル
- Excelファイル
- Googleスプレッドシート
- XMLファイル
- JSONファイル
- シリアル化されたPHP配列

手動テーブル作成
最後に、いつでも最初からテーブルを作成できます。 そのルートに行くときは、最初に使用する列とそれに関連するデータ型を設定します。

次に、Excelのようなエディターまたは標準のエディターを使用してデータを入力できます。
wpDataTablesの価格:限定無料バージョン/プロ$59から
WordPress.orgには限定バージョンのwpDataTablesがあります。 しかし、それはまさにそれです–「制限された」。 単純なテーブルビルダーを使用して単純なテーブルに使用できますが、実際には深刻なデータテーブルのオプションにはなりません。
データテーブルまたはチャート用の無料のテーブルプラグインが特に必要な場合は、別のオプションを使用する方がよい場合があります。
ただし、wpDataTablesが本当に優れているのは、プレミアムバージョンです。
1年間のサポートとアップデートを含むライセンスを購入するか、生涯サポートとアップデートを含むライセンスを購入することができます。 すべてのライセンスには、すべての機能が含まれています。 唯一の違いは、それを使用できるサイトの数です。
- 1つのサイト–1年間のライセンスの場合は59ドル、生涯ライセンスの場合は189ドル。
- 3つのサイト–1年間のライセンスで109ドル、生涯ライセンスで389ドル。
- 無制限のサイト– 1年間のライセンスの場合は249ドル、生涯ライセンスの場合は589ドル。
また、専用のwpDataTablesクーポンコードを使用してお金を節約することもできます。
注–開発者のWebサイトから直接購入してください。 これまで、wpDataTablesはEnvatoのCodeCanyonマーケットプレイスでのみ販売されていました。 開発者は引き続きCodeCanyonでリストページを維持していますが、価格は開発者から直接購入するよりもはるかに高いため、CodeCanyonを使用することはお勧めしません。
wpDataTablesレビュー:私たちの最終的な考え
多くのWordPressテーブルプラグインを使用した後、私はwpDataTablesが間違いなくそこにある最良のソリューションの1つであると言うことにかなり自信を持っています。
テーブルデータのインポート方法は柔軟です。 また、インターフェースにより、複雑なプロセスになる可能性のあるものが驚くほど単純になります。
さらに、2つの異なるエディターのおかげで、テーブルを簡単に編集できます。 また、さまざまな設定領域でテーブル全体または個々の列を十分に制御できます。
新しいシンプルなテーブルビルダーを使用すると、wpDataTablesをデータテーブル以外にも使用できます。 また、より視覚的な製品比較表、価格表などにも使用できます。
最後に、同じプラグインからチャートを作成できることは便利であり、チャート機能は本当に使いやすいです。
1つの欠点は、WordPress.orgのwpDataTablesの無料バージョンが非常に限られているため、ほとんどの機能にアクセスするにはプレミアムバージョンの料金を支払う必要があることです。
そうは言っても、Proバージョンにお金を払っても構わないと思っているなら、これは間違いなく検討すべきものです。
また、WordPressでテーブルを操作するための他のオプションを確認したい場合は、TablePressチュートリアルを確認してください。
wpDataTablesを取得します
️20%オフになるには、専用のwpDataTablesクーポンを使用することを忘れないでください。
wpDataTablesまたはwpDataTablesレビューについてまだ質問がありますか? コメント欄でお知らせください。