HTMLなしでWordPressに動的テーブルを追加する方法

前回WordPressブログにテーブルを追加しようとしたとき、結局すべてを破棄して、代わりに箇条書きを使用しました。

おなじみですか？

非常に多くの素晴らしいWordPressテーマには、見栄えの良いテーブルを作成する機能が付属しています。 そして確かに、それらは最初はよく見えるかもしれませんが、あなたはそれらで多くをすることはできません。

フィルタリング可能なデータが必要ですか？ いいえ。

テーブルをモバイル対応にしたいですか？ いいえ。

CSVからデータをインポートしたいですか？ チャンスではありません。

これが良いニュースです：

適切なプラグインを使用すると、高機能の動的テーブルを作成できます。 フィルタリング可能なデータを表示できるようにするようなものです。

グラフやあらゆる種類のものと一緒に。

いいね？ wpDataTablesを使用してどのように実行できるかを見てみましょう。

ノート： このチュートリアルはインタラクティブなテーブルに焦点を当てていますが、wpDataTablesを使用したモバイルレスポンシブテーブルの作成に関するチュートリアルが役立つ場合があります。 ここをクリックしてチェックしてください。 この新しいチュートリアルでは、wpDataTablesで最近リリースされた更新されたユーザーインターフェイスと追加機能を考慮に入れています。

このプラグインを使用すると、HTMLの知識がなくても美しいテーブルを作成できます

wpDataTablesは、テーブルを作成してWebサイトに公開するプロセスを簡単にするプレミアムWordPressプラグインです。 軽量で直感的で、ほんの数分で作業を完了できるため、コードをたどる回数が減り、ブログを書く時間が増えます。

このプラグインの重要なポイントの1つは、プラグインを起動して実行するためにHTMLの予備知識が必要ないことです。 すべてが使いやすい設定ページ内で行われます。 公開するには、ショートコードをコピーして貼り付けるだけで、準備は完了です。

ブロガーや企業にとって、これは多くのデータを簡潔でわかりやすい方法で表示できるため、すばらしいニュースです。

次の目的にも使用できます。

• 製品カタログ
• 製品の比較表
• 価格表
• ユーザーからのデータ収集
• スポーツ結果
• 数字に関係するすべての進捗状況を追跡する（ブログの収入レポートなど）

可能性は無限大。

最初から最後までテーブルを作成する：ステップバイステップガイド

wpDataTablesプラグインを使用して、WordPress Webサイトに美しく、明確で、完全に機能するテーブルを作成するのは簡単です。

開始方法は次のとおりです。

ステップ1-ファイルを準備します

以下に、いくつかのランダムな経費のExcelドキュメントの例を作成しました。 これには、日付、支払い方法、費用などのいくつかの列が含まれます。

同様の方法でデータが表示されていることを確認してください。そうしないと、プラグインがテーブルの列を定義するのに苦労します。

ステップ2–新しいテーブルを作成する

WordPressダッシュボードの左側にあるwpDataTablesに移動します。

このリンクをクリックすると、上の画面が表示されます。 ここで、新しいテーブルを作成して追加します。

「新規追加」ボタンをクリックすると、この画面が表示されます。 ここで、テーブルのパラメーターの設定を開始し、テーブルが希望どおりに機能して表示されるようにします。

ステップ3–テーブル機能を定義する

テーブル設定ページの最初の3つのセクションでは、次のことを実行できます。

• タイトルを作成する
• ページにテーブルタイトルを表示するかどうかを選択します
• テーブルの入力ソースのタイプを選択します

これらは、最も基本的なテーブル設定です。

「ファイルのアップロード」をクリックして、ドキュメントを検索します。 作成できるテーブルは、必要なだけ複雑にすることができます。

ご覧のとおり、テーブルに関連するタイトルを付け、ドロップダウンボックスからExcelファイルの種類を選択して、ファイルをWordPressにアップロードしました。

ページのさらに下に、テーブルをカスタマイズするための追加の設定があります。

これらは：

• レスポンシブ–デスクトップ、タブレット、モバイルでテーブルを異なる方法で表示できるようにします
• スクロール可能–テーブルを水平方向にスクロールできます
• ページが完全に読み込まれるまでテーブルを非表示にする–ページをゆっくり読み込む場合に便利です
• 高度なフィルタリング–各列の下にフィルターを表示します
• フォーム内のフィルター–フォーム自体のフィルター用
• テーブルツール–コピー、Excelに保存、フォームに埋め込まれたCSVに保存などのオプションの場合
• 並べ替えを有効にする–これにより、テーブルを並べ替えることができます
• テーブルレイアウトの制限–テーブルの幅を親コンテナの100％に制限します
• 表示の長さ–ページに表示されるエントリの数を定義します

「プレビュー」をクリックすると、テーブルを表示し、必要に応じて設定を変更して、必要な外観にすることができます。

表示したいテーブルのタイプに最適なオプションを選択したら、「保存」ボタンをクリックします。

列をさらにカスタマイズしたい場合は、「保存」をクリックすると、ページをさらに下にスクロールしてさらにオプションを表示できるようになります。 デフォルト設定は自動的に生成されますが、これを使用して、各列の色、列、およびフィルターの種類（日付、時刻、テキストなど）を変更できます。

以下では、いくつかの色を追加し、列の種類をテキスト、数値、文字列に編集しました。

ステップ4–ショートコードを保存してコピーする

テーブルを保存したら、[閉じる]をクリックすると、プラグインのホームページに戻ります。 これで、作成したテーブル、テーブルのタイトルとタイプ、投稿またはページに入力するためのショートコード、およびそれを複製するオプションが表示されます。

このテーブルをページに表示したいので、ショートコードをコピーしてから、編集したいページに移動する必要があります。

ステップ5–投稿またはページにショートコードを追加する

テーブルをページに追加するには、ショートコードをページエディタに貼り付けるのと同じくらい簡単です。 ページのどこにテーブルを表示するかを選択し、コードを貼り付けて、コンテンツの作成を続けます。

ステップ6–公開

ページの公開ボタンを押すと、テーブルは次のようになります。 ご覧のとおり、明確で一貫性があり、完全に調整されており、ナビゲートしやすい方法ですべてのデータを保持しています。

テーブルの上部にあるオプションを使用すると、ユーザーはテーブルの内容をさまざまな形式でエクスポートできます。 また、サイトのフロントエンドで結果を簡単にフィルタリングすることもできます。

他にどのようなテーブルを作成できますか？

ただし、単純なCSVベースのテーブルに限定されるわけではありません。 WPデータテーブルは、さまざまなデータを複数の形式で表示できます。

これは、複数の列とオプションを備えた、完全に機能し、応答性が高く、編集可能なテーブルの例です。

このテーブルは、ユーザーのニーズに応じてコンテンツを並べ替えるためのフィルターを備えたMySQLベースです。

このPHP配列ベースのテーブルはシリアル化されており、画像が含まれています。これにより、多くのeコマースストアが特に役立つと思われるまったく異なる動的機能と機能が追加されます。

CSVファイルだけに限定されません。 WPデータテーブルでは、Excelベースのファイルを使用することもでき、それに付属する多くの特定の機能を利用できます。

言及する価値のあるその他のwpDataTable機能

• wpDataChartウィザード–いくつかの簡単な手順でデータをグラフまたはチャートに変換できます。 現在、Google Charts、Highcharts、Chart.jsの3つのレンダリングエンジンをサポートしています。 その他のドキュメントについては、こちらをご覧ください。
• 条件付き書式–コンテンツに基づいてセル、行、および列を強調表示できます。 テーブルが完全に数値である場合は特に便利です。 その他のドキュメントについては、こちらをご覧ください。
• 数式列–他のセルに設定された数値に基づいて数値を計算するために使用できる列を追加できます。 その他のドキュメントについては、こちらをご覧ください。
• 日時列–日付と時刻の両方を含むセルに使用されます。 設定ページで設定した形式で自動的に表示されます。 その他のドキュメントについては、こちらをご覧ください。
• Sum / Totals行–数値列に使用され、すべての値の合計を計算できます。 その他のドキュメントについては、こちらをご覧ください。
• レポートビルダー–wpDataTablesのアドオンです。 レポートビルダーは、WordPressサイトからの実際のデータでテンプレートを埋めるドキュメントとスプレッドシートを即座に作成します。 その他のドキュメントについては、こちらをご覧ください。
• マスター-詳細テーブル– wpDataTablesのアドオンであり、サイトの訪問者はクリックするだけで各行の詳細を確認できます。 その他のドキュメントについては、こちらをご覧ください。

最終的な考え

テーブルは、データを表示するための優れた方法です。 また、フィルタリングなどの動的機能を追加すると、Webサイトの訪問者にとって非常に優れたものになります。

Microsoft Excelから（または他のスプレッドシートツールを使用して）データをアップロードすることにより、WordPressで動的テーブルを作成する方法を説明しました。 しかし、可能なことはもっとたくさんあります。

任意のテーブルをチャートやグラフなどに変換することもできます。

さあ、あなた自身のテーブルで始めましょう–楽しんでください！

関連資料： WordPress用の5つの強力でモバイルレスポンシブなテーブルプラグイン。

開示：この投稿は後援されていますが、私たちの意見は私たち自身のものです。