スポンサード

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

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

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

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」ボタンをクリックします。

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

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


実際にショートコードを記事に貼付けると、このような感じでテーブル表示されます。↓

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

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

テーブル内の情報が多い場合は幅を取りますので、スマフォやタブレットでページでも見れるようにレスポンシブWEBデザインに対応してくれる 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 以下でレスポンシブWEB対応。

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

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

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

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

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

常にレスポンシブWEB対応。

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

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

スポンサード