テーブル(表)作成プラグイン「TablePress」を使って簡単にテーブル作成。使い方と設定方法を解説

記事を書く際に、表を作成したい事が出てきたりします。製品・サービスの一覧表や、料金表など、こうした情報は表にして記載した方が見やすいです。そのような時に重宝するのが表作成のプラグイン「TablePress」です。

このようなテーブル(表)を簡単に作成できます。

入荷日商品品番価格数量
11/01バナナfr001200円170
11/01りんごfr004120円156
11/05すいかfr0211,400円30
12/15みかんfr901450円55

このプラグインを使用する事により、投稿や固定ページでテーブル(表)を作成する際、tableタグを入力しなくても簡単にテーブル(表)を作成できるようになります。

デザインも自由に設定でき、機能も豊富なので、お勧めのプラグインです。

プラグインのインストールとテーブルの作成

プラグインのインストール

ダッシュボード>プラグイン>新規追加 を選択します。

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

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

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

テーブルの作成

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

「①テーブルの名前」と「②行数・列数」を入力し「テーブルを追加」をクリックします。 テーブル名は管理しやすい名前を入れておけば良いと思います。

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

「テーブルを追加」をクリックすると、テーブル(表)の編集画面が表示されますので、テーブルの値を入力します。

テーブルに値を入力する

初期設定(行数5 × 列数5)の状態でテーブルを作成すると、下記のように5マスづつ入力項目が表示されます。

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

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

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

 

行(横の並び)や列(縦の並び)の編集

行(横の並び)を編集する場合、編集したい行にチェックを入れ、「テーブルの操作」から選択した行の「非表示/表示」や「コピー」、「挿入」、「削除」等を行う事ができます。

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

記事にテーブルを表示させる

記事にテーブルを表示させるには、①「ショートコードをコピペ」する方法と、②記事作成画面のビジュアルエディタ「TablePressからテーブルを挿入」の2通り方法があります。

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

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

テーブル(表)を表示させたい記事にコピーします。

プレビューをチェックしてみると、テーブルが表示されている事が確認できます。

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

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

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

「ショートコードを挿入」をクリックすると、下記のように記事編集欄にショートコードを挿入する事が出来ます。

 

TablePressのその他の機能

「DataTables JavaScriptライブラリの機能」でオプション機能を使用することができるようになります。初期設定では「DataTableを使用」にチェックが入ってますので、DataTableを使用しない場合はチェックを外して下さい。

並べ替え

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

  • 一回クリックすると、昇順(小さい値から順番)にソートする事ができます。
  • 二回クリックすると、降順(大きい値から順番)にソートする事ができます
  • 一番左上のセルをクリックすると、並び替えをリセットする事ができます。

検索/フィルター

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

  • 見出しの行(一番上の行)は検索の対象になりません。
  • 検索機能を使うと、そのワードを含む行だけが表示されます。

ページ送り/ページ分割の行数を変更

「テーブルのページ分割(一度に表示する行数の指定)を訪問者が使用できるようにする」にチェックを入れ、任意の行数を入力すると、入力した行数がページに表示され、表示されない行はテーブル右下にある「前」、「次」をクリックすると表示されます。

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

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

情報

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

水平スクロール

「列数の多いテーブルを見やすくするために、水平スクロールを有効にする」にチェックを入れると、テーブルの下に水平スクロールバーが出現しますので、列数が多いテーブルでもユーザーは全ての列を確認する事ができるようになります。

 

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="300%" /]

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

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

Follow me!

PROFILE

Takashi Sema
上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

はじめてのWordPressサイト作成講座:1日でできるサイト制作

誰でも簡単にプロが作ったようなウェブサイトを作る事が出来ます。

この講座では1人1台パソコンを使用し、WordPressを使用したスマホ対応のウェブサイトを作成します。WordPressのシンプルな決まった型(デザインテーマ)を使用しますので、初心者の方でもプロが作ったようなウェブサイトを作る事ができます。