【WordPress】表作成が簡単！テーブル作成プラグインTablePress

WordPressで表（テーブル）を簡単に作れるプラグインをお探しの方向け。

 

WordPressでサイトやブログを運営していて、下記のように考えたことはありませんか？

このような時、表（テーブル）を使うと情報が整理され、見やすくまとめることができますが、行や列が増えると作成や管理に手間がかかります。

 

このような時は、「TablePress」という表作成プラグインを使うと、表作成はもちろん、編集作業が楽になります。

ショートコードを貼るだけで、下表のように表示できます。

入荷日	商品	品番	価格	数量
11/01	バナナ	fr001	200円	170
11/01	りんご	fr004	120円	156
11/05	すいか	fr021	1,400円	30
12/15	みかん	fr901	450円	55

 

この記事では、表作成を簡単にできるプラグイン「TablePress」の使い方を解説します。

表作成が簡単にできるテーブル作成プラグインTablePress

「TablePress」は、表作成が簡単にできるテーブル作成プラグインです。

プラグインの設定画面で表を作成し、記事中にショートコードを貼るだけで作成した表が表示されます。

 

tebleタグを使わずに表を作成できるので、記事編集画面がごちゃごちゃせず、画面がスッキリするのでコンテンツの作成に集中できます。

また、表の値の編集はプラグインの管理画面で行うため、表作成でありがちな入力ミスが低減します。

ユーザー側で表の並べ替えや検索が可能

TablePressで作成された表は、ユーザー側で以下の操作ができます。

表作成が簡単にできるだけでなく、表を見るユーザーがデータを検索しやすいようになっています。

 

TablePressで表（テーブル）を作成する手順

それでは、TablePressで表（テーブル）を作成する手順を解説します。

上記のとおりです。

手順①：プラグインのインストール

まずはプラグインをインストールします。

ダッシュボード＞プラグイン＞新規追加 を選択して下さい。

プラグイン検索窓に「TablePress」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。

インストール後、「有効化」をクリックします。

プラグインが有効化されると左側のメニューに「TablePress」の項目が追加されます。

以上でプラグインのインストールは完了です。

手順②：新規の表（テーブル）を作成

プラグインをインストールしたら、TablePressの設定画面に移動して新規の表を作成しましょう。

ダッシュボード＞TablePress＞新しいテーブルを追加 を選択します。

TablePressの設定画面が表示されますので、①テーブルの名前を入力して、②行数・列数を入力し、③テーブルを追加」をクリックします。

 

「テーブルを追加」をクリックすると、表（テーブル）の編集画面が表示されますので、ここに表の値を入力していきます。

手順③：表（テーブル）に値を入力する

初期設定（行数5 × 列数5）の状態で表を作成すると、下図のように5マスづつ入力項目が表示されます。

見出しから順に値を入力していきましょう。

テーブルの見出しの入力場所

テーブルに見出しを入力する際は、一番上の行に入力します。

見出しが不要な場合は、「テーブルのオプション」にある下記チェック項目を外すと見出しの無いテーブルを作成できます。

とりあえず、サンプルとして下記のような値を入力してみました（このページの最初の方に掲載しています）。

行（横の並び）や列（縦の並び）の編集

行（横の並び）を編集する場合、編集したい行にチェックを入れます。

そして、「テーブルの操作」から選択した行の「非表示/表示」や「コピー」、「挿入」、「削除」等を選択します。

上記と同様、列（縦の並び）にチェックを入れるとその列の「非表示/表示」や「コピー」、「挿入」、「削除」等を行う事ができます。

手順④：ページ内に表（テーブル）を表示させる

表を作成したら、Webページ内に表（テーブル）を表示せましょう。

ページに表を表示するには以下2つの方法があります。

上記順に解説します。

ショートコードをコピペする方法

下図「テーブル情報」にあるショートコードをコピーします。

表（テーブル）を表示させたいページにショートコードを貼り付けます。

プレビューでチェックすると、ページ内に表（テーブル）が表示されている事が確認できます。

ビジュアルエディタのボタンからテーブルを挿入する方法

ビジュアルエディタの表のアイコンをクリックします。

アイコンをクリックすると画面が暗転し、作成した表の一覧が表示されますので、ページ内に挿入したい表の「ショートコードを挿入」をクリックします。

「ショートコードを挿入」をクリックすると、下図のように記事編集項目にショートコードが挿入されます。

 

TablePressのDataTables JavaScriptライブラリの機能の設定方法

TablePressのDataTables JavaScriptライブラリの機能の設定方法を解説します。

 

TablePressの画面下部に「DataTables JavaScriptライブラリの機能」という項目があり、「DataTablesを使用」にチェックを入れるとオプション機能が使えるようになります。

オプション機能を使うことでできる機能は下記6つです。

上記の順に各機能を解説します。

並べ替え

「訪問者がテーブルの並べ替えを選択できるようにする」にチェックを入れると、
ユーザーが見出し項目をクリックした時に、下図のように表を並び替える事ができます。

検索/フィルター

「訪問者がテーブルの検索またはフィルターを使用できるようにする。テーブル内で検索語を含む行だけが表示されます。」にチェックを入れると、
下図のように、ユーザーが表の項目を検索できるようになります。

ページ送り

「テーブルのページ分割（一度に表示する行数の指定）を訪問者が使用できるようにする」にチェックを入れ、任意の行数を入力すると、入力した行数がページに表示されます。

表示されない行は表の右下にある「前」、「次」をクリックすると表示されます。

下図は1ページに「3」行を表示させた場合です。

ページ分割の行数を変更

「ページ分割で表示する行数を訪問者が変更できるようにする」にチェックを入れると、ユーザーが表示できる行数を変更できます。

情報

「行数など、現在表示されているデータに関する情報とともにテーブル情報の表示を有効にする」にチェックを入れると、下図のように表の行数が表示されます

水平スクロール

「列数の多いテーブルを見やすくするために、水平スクロールを有効にする」にチェックを入れると、表の下に水平スクロールバーが出現します。

列数が多い表でもユーザーは全ての列を確認できます。

 

TablePressのカスタマイズ方法

最後に、TablePressのカスタマイズ方法を紹介します。

テーブル（表）幅の変更方法

ショートコードを挿入する際、列の幅を指定することで表の幅を変更できます。

 

通常、ショートコードは下記のように挿入しますが、

[table id=テーブルID /]

列の幅を変更したい場合、「column_widths」という項目を追加すると左から順に列の幅を変更できます。

[table id=テーブルID column_widths="20%|50%|30%" /]

A列	B列	C列
20%	50%	30%

指定が少ない時は左から順に自動調節されます

例えば、テーブルの列が3列あるのに対し、ショートコードには1列分の幅しか指定しなかった場合、

[table id=テーブルID column_widths="300px" /]

 

一番左の列が300pxとなり、指定しない列は自動調整されます。

A列	B列	C列
30px	指定なし	指定なし

 

まとめ

以上、表作成が簡単にできる多機能テーブル作成プラグイン「TablePress」の使い方を解説しました。

一度作成したら殆ど内容の変更を行わない表であれば、プラグインを使わずにビジュアルエディタで作成しても良いと思います。

しかし、内容が頻繁に変わるような表（商品一覧、セミナー日程、料金表など）や、行・列が多い表を作成する時は、TablePressを使った方が管理は楽です。

CSVファイルのインポート・エクスポートにも対応していますので、頻繁にデータを変更するような時はTablePressの利用を検討してみて下さい。

 

ちなみに、プラグインを使わずに表（テーブル）を作成したいという方は、以下の記事で作り方を紹介していますので、是非どうぞ。