[WordPress]テーブル用プラグインTablePressの使い方とレスポンシブ対応の方法

<table> タグを使ったコーディングはまだまだ多いですが、例えばWordPressで作った企業サイトで「会社概要」のような表組を掲載する場合に便利なプラグインが、今回紹介させていただくTablePressです。

TablePressmとは？

TablePressは、例えば「企業情報で使うテーブル」「会社沿革で使うテーブル」「商品情報で使うテーブル」のように、コンテンツ毎にテーブルを複数管理でき、投稿記事や固定ページでショートコードを使ってフロント画面に表示させることができる便利なプラグインです。

また、拡張機能を使えばテーブルコンテンツをレスポンシブWEBデザイン対応することができますので、<table> を使うサイトであれば是非導入しておきたいプラグインではないかと思います。

TablePress のインストール

管理画面のプラグイン新規追加画面よりTablePressを検索するか、以下のサイトよりプラグインファイルをダウンロードします。
TablePress

TablePress の設定

まずはWordPressの管理画面でのTablePress設定方法について簡単にご紹介します。

TablePress の使い方

TablePressを有効にすると、WordPress管理画面の左メニューにTablePressが出現します


TablePressのページから「Add New」リンクをクリックして新規にテーブルを作成します。


①「Table Name」には、管理しやすいようにテーブルの名前を入力します。

②「Description」にオプションですが、ここにも分かりやすいようにテーブルの説明文を入力しておきます。

③「Number of Rows」「Number of Columns」にはそれぞれテーブルの「列」と「行」の数を入力します。

テーブルの編集

新規にテーブルを作成した後は、セルに情報を入力したり、行や列を追加削除するなど、各種オプション設定を行います。

行と列の入れ替え

「Table Content」欄では、マウスのドラッグ操作で列と行を自由に移動、入れ替えすることができます。

行と列の追加と削除

例として「行」を追加削除する方法のご紹介です。
※「列」を追加削除、コピーする場合も操作方法はほぼ同じです。

まず最初に「行」を新規に追加する場合は、「Table Maniplation」欄の「Add」のテキストフォームに数値を入れて、「Add」ボタンをクリックします。


続いて「行」を消す場合は、消去したい行にチェックを入れて「Selected columns」の「Delete」ボタンをクリックします。


「行」をコピーする場合は、コピーする行にチェックを入れて「Duplicate」ボタンをクリックします。

フロント画面にテーブルの出力

発行されたショートコードを投稿画面に貼付けます。

テーブルのレスポンシブWEBデザイン対応

テーブル内の情報が多い場合は幅を取りますので、スマフォやタブレットでページでも見れるようにレスポンシブWEBデザインに対応してくれる TablePress Extension: Responsive Tablesのプラグイン（拡張機能）も合わせて導入しておきましょう。

TablePress Extension: Responsive Tables のインストール

以下のページより、TablePress Extension: Responsive Tablesファイルをダウンロードしてアップします。
TablePress Extension: Responsive Tables

WordPress管理画面のプラグイン一覧画面より、TablePress Extension: Responsive Tablesプラグインを有効にします。

レスポンシブWEBデザイン対応のサンプル

先ほどの [table id=1 /] のショートコードを [table id=1 responsive="phone" /] などのように変更します。
responsive の値には「phone」「tablet」「desktop」「all」と4パターンありますが、以下のようにブラウザの幅で条件分岐するという点で用途が異なります。

ブラウザの幅が768px以下でレスポンシブ対応

項目	説明	説明
項目1	項目1の説明が入ります。	項目1の説明が入ります。
項目2	項目2の説明が入ります。	項目2の説明が入ります。
項目3	項目3の説明が入ります。	項目3の説明が入ります。

ブラウザの幅が980px以下でレスポンシブ対応

項目	説明	説明
項目1	項目1の説明が入ります。	項目1の説明が入ります。
項目2	項目2の説明が入ります。	項目2の説明が入ります。
項目3	項目3の説明が入ります。	項目3の説明が入ります。

ブラウザの幅が1200px以下でレスポンシブ対応

項目	説明	説明
項目1	項目1の説明が入ります。	項目1の説明が入ります。
項目2	項目2の説明が入ります。	項目2の説明が入ります。
項目3	項目3の説明が入ります。	項目3の説明が入ります。

常にレスポンシブ対応

項目	説明	説明
項目1	項目1の説明が入ります。	項目1の説明が入ります。
項目2	項目2の説明が入ります。	項目2の説明が入ります。
項目3	項目3の説明が入ります。	項目3の説明が入ります。

上記の4つのサンプルテーブルは、このページをブラウザ伸縮させる事で幅に応じて見え方が変わる仕組みになっています。