ウェブサイト検索

wpDataTables を使用して素晴らしい応答性の高いテーブルを作成する

WordPress でテーブルを作成するのは簡単です。コードを使用して WordPress にテーブルを追加する従来の方法もありますが、テーブル (またはグラフ) を構築する最も便利な方法は、wpDataTables WordPress プラグインを使用することです。これにより、さまざまな外部ソースからテーブルをインポートし、好みに合わせてスタイルを設定し、Web サイトに追加することが非常に簡単になります。

基本的な HTML テーブル

標準の HTML テーブル タグを使用して、WordPress にテーブルを追加できます。これらは非常に単純で、次の基本構造を使用します (投稿を作成するときに「テキスト」タブに入力することを忘れないでください)。

<table style="width: 100%;">
<tbody>
<tr>
<th style="width: 33%;">First</th>
<th style="width: 34%;">Second</th>
<th style="width: 33%;">Third</th>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Jenson</td>
<td>30</td>
</tr>
</tbody>
</table>

これにより、次のようなテーブルが作成されます (注 – ヘッダー セルのスタイルはテーマによって異なります)。

Jack

ジャクソン

Jen

ジェンソン

HTML を使用してテーブルを作成することは機能しますが、サイトに 1 つまたは 2 つのテーブルを追加するだけの場合は問題ありません。ただし、テーブルを頻繁に作成する場合は、いくつかの問題に遭遇する可能性があります。

  • 高度なオプションを使用するには HTML コーディングを学ぶ必要があります
  • HTML の追加には時間がかかり、多数のテーブルを作成すると長期的には生産性が低下します。
  • この方法では、レイアウトとデザインが大幅に制限されます (上級開発者でない限り)。

WordPress を使用している場合は、1) 最新バージョンの WordPress を使用しており、2) テーマがレスポンシブであると想定して問題ありません。 HTML テーブル タグを使用して WordPress サイトにテーブルを挿入する場合、レイアウトの調整に多くの時間を費やすことになります。

サイトは応答性が高いかもしれませんが、テーブルは応答性が高くありません。

これにより、当然のことながら、サイトの応答性が損なわれてしまいます。サイトにデータを挿入する際にも問題が発生する可能性があります。 Google スプレッドシートや Microsoft Excel などのスプレッドシート処理ソフトウェアには、データベースからデータを取得するためのインポート ツールが多数あります。しかし、すべての文字を入力していると、あまり生産的ではありません。

先ほど、WordPress で HTML を使用してテーブルを挿入する際の 3 つの大きな問題を特定しました。心配しないでください。テーブルを作成するには、もっと良い方法があります。そこで、前述の問題をすべて解決し、多くの便利な機能をもたらすプラグインを紹介しましょう。

wpDataTables でより良いテーブルを作成する

WordPress でテーブルを作成するには、wpDataTables を強くお勧めします。この完全にレスポンシブなプレミアム プラグインを使用すると、WordPress での表やグラフの作成、カスタマイズ、管理がコーディング不要で簡単になります。インストールして表やグラフの作成を始めるだけです。 14,300 人を超える人々に信頼されており (以前、今月の WordPress プラグインの 1 つに選ばれました)、私たちの謙虚な意見では、WordPress を利用した Web サイトにテーブルを追加する最良の方法の 1 つです。

wpDataTables の詳細 ライブデモを見る

上のボタンをクリックして、Themeforest の wpDataTables について詳しく学ぶことができます。または、読み続けて、なぜそれが素晴らしいと考えるのかを知ることができます。

複数のデータソース

データを保存する場所に応じて、wpDataTables を使用すると、さまざまなソースからインポートできます。データをインポートするには、Excel、CSV、Google Doc、XML、JSON、シリアル化された PHP 配列、または MySQL クエリから選択します。新しいテーブルを手動で作成したり、ライブ データ ソースにリンクしたり (ページに読み込むときにテーブルが動的に更新されるまで)、GUI (グラフィカル ユーザー インターフェイス) ツールを使用してカスタム クエリを生成したりするオプションもあります。

MySQL クエリは、適切なデータベースのデータを表示し変更できるため、私の個人的なお気に入りです。 wpDataTables は、MS SQL および PostgreSQL データベースの個別のデータベース接続と、複数の個別のデータベース接続を追加するオプションをサポートしています。テーブルは複数のデータベースおよびサーバーからデータを取得できます。テーブル プロジェクトに取り組んでいる開発者のチームがある場合、これにより共同作業が非常に簡単になります (これについては後で詳しく説明します)。

強化されたカスタマイズとレスポンシブなレイアウト

テーブルのデザインがかつてないほど簡単になりました。いくつかのチェックボックスといくつかの色を選択することで、サイトのテーマを補完するプラグインをデザインできます。パープル、ダーク、アクアなど、新しいモダンなテーブル スキンも選択できます。プラグインが提供する素晴らしい設計機能をご覧ください。

インターフェイス言語、時刻/日付の書式設定、配置、カスタム JS/CSS などの組み込みオプションもあります。ああ、プラグインがモバイル対応であることも言いましたか?画面のサイズに関係なく、テーブルが消費するスペースを設定できます。

効率的な検索のためのフィルター

新しいテーブルを作成するとき (または既存のテーブルを編集するとき)、フィルターを有効にするオプションがあります。フィルターを使用すると、必要な項目のみを含む結果セットを減らすことができます。これは、大規模なデータベースをクエリする場合に非常に役立ちます。たとえば、図書館データベースがある場合、主題に基づいて結果をフィルタリングすると、書籍をより速く見つけることができます。

ただし、フィルターを編集するたびにデータベースで実行される計算の数が増加するため、サーバーの負荷が増加します。したがって、フィルターを完全に無効にするという便利なオプションがあります。

フロントエンドから MySQL データベースを編集する

wpDataTables を使用すると、フロントエンド、つまりライブ WordPress サイトからデータベースを直接編集することもできます。テーブルを構成するときに、「編集」タブでオプションを有効にするだけです。どのユーザーがデータベース内の値を編集できるかを設定することもでき、すべてのユーザーがデータベースを送信したり、ユーザー ロールに基づいてアクセスできるようにしたりできます。

チャートを使用してデータを視覚化する

視覚化は、通常のテキストよりもはるかに効果的に注目を集めます。結局のところ、百聞は一見にしかずです。従来の読書と比べてデータ摂取率が向上します。たとえば、年収レポートの円グラフを表示している場合、12 か月すべてのデータを読む場合と比較して、ほとんどの場合、データをより速く解釈できます。

wpDataTables は、(Google Charts、HighCharts、または Chart.js 経由で) 動的チャートを作成してテーブルのデータを視覚化するのに役立ちます。これは、月次収入レポートを共有するブロガーなど、大量の数値データを含むテーブルに特に役立ちます。

生涯アップデート

ほとんどのプラグイン開発者は、1 年間のアップデートとサポートを提供します。ただし、この開発者には、生涯アップデートと 1 回限りの料金で 6 か月間のサポートが含まれています (注 – 継続的なサポートを利用するには、ライセンスを更新する必要があります)。

詳細なドキュメント

開発者は、wpDataTables の使用方法を徹底的に説明します。プラグインの全機能を理解するのに役立つ、広範なオンライン ドキュメントとビデオ チュートリアルがあります。

これにより、次の 2 つのことがわかります。

  1. 開発者は顧客のことを気にかけています - 彼らが製品を買いに戻ってくるように
  2. 知識豊富な顧客=問題が少ない=サポート チケットが少ない=顧客が満足している

また、サポート チケットが少なくなるため、開発者はプラグインの改善や新しい機能の導入により多くの時間を費やすことができます。

wpDataTables を使用してレスポンシブなテーブルを構築する方法

wpDataTables が優れたプラグインである理由がわかったので、その使用方法を説明しましょう。 wpDataTables プラグインを使用して新しいテーブルを作成するには、正確に 3 つの手順があります。

1.wpDataTablesをインストールする

これは明らかなことだと思いますが、まず wpDataTables をインストールする必要があります。これはプレミアムプラグインであるため、CodeCanyon から購入してダウンロードする必要があります (購入ページに移動し、「インストール可能な WordPress ファイルのみ」をダウンロードするだけです)。

その後、画面上の指示に従ってインストールとアクティベーションを完了します。

2. データテーブルを作成する

プラグインがアクティブになると、新しい「wpDataTables」メニュー項目が表示されるはずです。それをクリックし、大きな青い「新規追加」ボタンをクリックして、新しいテーブルの作成を開始します。

最初のオプションはテーブルの作成方法です。 5 つのオプションが表示されるはずです。使用したい単純なスプレッドシートがあったため、CVS からインポートするオプションを選択しました。 [次へ] をクリックすると、ファイルを選択してアップロードするように求められます。

データ ソースをアップロードすると、カスタム テーブル名を入力したり、オプションを使用して列と行を編集、追加、削除したりできるようになります。次に緑色のボタンをクリックしてテーブルの作成を完了します。

あなたは今ホームストレッチ中です！このページから、テーブルの追加設定を調整できます (オプション)。 「表示」オプションを使用して、小型デバイスでのレスポンシブ折りたたみの有効化、水平スクロールバーの追加、表の幅の制限などを行います。「編集」タブに移動してフロントエンド編集を有効にするか、表ツール（印刷、コピー、エクスポート）を有効にします。クイックリンク）。何よりも、微調整をしながら編集内容をライブでプレビューできるのが優れています。変更を加えた場合は、必ず保存（または適用）チェックマークをクリックしてください。

完了したら、画面の上部からテーブルのショートコードをコピーします。これは 3 番目の最後のステップで必要になるためです。

3. 表を投稿またはページに挿入する

テーブルを使用するには、ショートコードを投稿またはページのコンテンツに貼り付けるだけです (上の画像のように)。このショートコードは、テーブルのスタイルをどのように設定したかに応じて、Web サイトのフロントエンドでレンダリングされます。

私たちの例では、テーブル ツール (印刷、エクスポートなど)、フィルタリング、フロントエンド送信が有効になっていることがわかります。でもそれだけです。テーブルの準備は完了です。

チャートを作成したいですか?

wpDataTables を使用してグラフを作成することもできます。表を作成したら、「チャートの作成」をクリックして開始します。

ここでグラフに名前を付け、スタイルを選択し (選択できるものはたくさんあります)、次の画面に進み、グラフの作成に使用するデータ テーブルを選択します。

データ ソースとして使用するテーブルを選択したら、テーブルの列をグラフの部分に割り当てます。選択したグラフによっては、必要な値の最小数が存在する場合があります。この例では、棒グラフを選択しました。これには、グラフに (棒になるために) 少なくとも 2 つの列が必要です。数値範囲スライダーを使用して、浮動小数点列と整数列をフィルタリングすることもできます。列を並べ替えたら、次のステップに進みます。

ここからは楽しい部分です。オプションを使用して、グラフのスタイルを設定し、機能を追加します。レスポンシブな幅、高さ、背景、境界線、フォント、ラベル、色、タイトルの表示/非表示、ホバー時のツールチップなどのオプションが豊富にあります。

編集が完了したら、「次へ」をクリックしてグラフのショートコードをコピーします。投稿またはページのコンテンツに貼り付けて保存し、Web サイトのフロントエンドに移動してグラフを確認するだけです。

追加のボーナスとして、wpDataTables には、プラグインを削除した場合でもテーブルを保持するかどうかを選択する独自のオプションが含まれています (デフォルトでは、テーブルはプラグインの削除後にデータベースに保存されます)。

WordPress テーブル機能をさらに追加する

もっと欲しい？ WordPress サイトにさらに多くの表やグラフのオプションを追加するための、wpDataTables の拡張機能やアドオンが多数あります。

強力なフィルター: カスケード (左から右へ複合) フィルター、ファセット フィルター (複数のフィルターを適用して結果を絞り込む) を設定し、ユーザーがフィルターを選択するまでテーブル ビューを無効にし、ライブ検索機能などを追加します。 。テーブルを設定するときにオプションを有効にして構成するだけです。

レポート ビルダー: データ テーブルに基づいて独自の Word または Excel のカスタム レポートを生成します。これは、ユーザーによるフロントエンド編集を許可する場合 (データを収集するときにレポートを再実行して印刷できるようにするため)、またはレポートを定期的に再生成する必要がある場合 (毎月の請求書やタイムカードなど) に特に役立ちます。

Formidable Forms: 人気の Formidable Forms Pro フォーム ビルダーのサポートを追加します。 Formidable Forms を使用してデータ収集フォーム (アンケートなど) を作成し、ユーザーの送信に基づいて各フィールドが列に変換された表を自動生成します。

Gravity Forms: Gravity Forms の送信を wpDataTables と統合して、ユーザー データに基づいて WordPress テーブルを自動的に作成します。この拡張機能はテーブルの作成時に新しいデータ ソースを追加するため、特定の Gravity Form にリンクしてデータを視覚化することが簡単になります。また、Gravity Forms ベースのテーブルのフロントエンド編集も簡単です (Gravity Forms 統合アドオンを使用)。

wpDataTables を自分で試してみてください

ほとんどの開発者は、プラグインで何ができるかを知るためにライブ デモを提供します。ただし、出力、つまり、事前に決定された入力に基づく「フロントエンド」ビューのみが表示されます。これは、ほとんどのプラグインのライブデモが不十分な点です。プラグインの設定やツール、つまりバックエンドにはアクセスできません。 。

ただし、wpDataTables では、購入前に試してみることができるデモで完全なサンドボックスを提供しています。すべての自動車ディーラーはこれを行っています - 悪名高い試乗です。サンドボックスを介して、プラグインの機能を思う存分テストし、出力をリアルタイムで確認できます。

wpDataTables のデモを見る

コピーをダウンロードして、独自のインストールでテストしたいですか? wpDataTables は、WordPress.org リポジトリから取得できるライト バージョンを提供しています。上記で説明したすべての優れたプレミアム機能はありませんが、プラグインがニーズに合った適切なソリューションであるかどうかを確認する優れた方法です。

wpDataTables Lite を入手する

気に入った場合は、安心して購入していただけます。なぜ？なぜなら、すでに製品をテストして使用しているからです。

結論

wpDataTables は、膨大な量のデータを扱う WordPress サイトにとって不可欠なプラグインの 1 つです。学校のプロジェクトを作成する場合でも、会社の年次報告書を作成する場合でも、テーブルとその視覚化はデータ表現において重要な役割を果たします。

WordPress 用の wpDataTables を取得する

wpDataTables を試したことがありますか?それとも、このプラグインで何ができるかについて質問がありますか?以下にコメントを残してください – ぜひご意見をお待ちしております!