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

この記事では、こういった疑問にお答えします。

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は、表作成が簡単にできるテーブル作成プラグインです。

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

表作成は記事編集画面ではなく、プラグインの管理画面で作成するので表作成に集中しやすいです。

表作成でありがちな入力ミスが低減します。

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

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

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

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

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

上記のとおり。

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

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

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

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

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

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

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

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

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

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

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

テーブル名は管理しやすい名前を入れておけばOKです。

「テーブルの名前」と「説明」は省略できます。また、全ての項目はテーブル作成後に編集可能です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上記順に解説します。

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

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

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

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

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

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

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

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

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

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

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

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

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

初期設定では「DataTableを使用」にチェックが入ってますので、DataTableを使用しない場合はチェックを外して下さい。

並べ替え

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

検索/フィルター

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

ページ送り

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

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

下表は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の利用を検討してみて下さい。

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