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

WordPress

WordPressで表(テーブル)を簡単に作る事ができるプラグインをお探しの方向け。

 

数字を使って情報を整理したい時や、製品スペックの比較や料金表をWebページに掲載する時は、表(テーブル)を使うと情報が整理され、見やすくまとめることができます。

ただ、こうした表も行や列が増えてくると、作成や管理に手間が掛かるようになります。

このような時は、表作成プラグインを使えば下図のような表を記事中にショートコードを貼るだけで簡単に表示できるようになります。

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

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

スポンサーリンク

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

表作成が簡単にできるテーブル作成プラグイン「TablePress」は、プラグインの設定画面で表を作成し、作成した表はページ内にショートコードを挿入するだけで表が表示できる非常に便利なプラグインです。

 

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

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

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

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

  • 表の並べ替え
  • 検索・フィルター
  • ページ送り

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

 

TablePressで表(テーブル)を作成する手順

TablePressを使って、表(テーブル)を作成する手順を解説します。

  • 手順①:プラグインのインストール
  • 手順②:新規の表(テーブル)を作成
  • 手順③:表(テーブル)に値を入力する
  • 手順④:ページ内に表(テーブル)を表示させる

上記のとおりです。

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

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

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

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

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

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

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

手順②:新規の表(テーブル)を作成

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

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

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

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

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

 

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

手順③:表(テーブル)に値を入力する

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

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

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

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

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

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

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

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

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

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

手順④:ページ内に表(テーブル)を表示させる

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

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

  • ショートコードをコピペする方法
  • ビジュアルエディタのボタンからテーブルを挿入する方法

上記順に解説します。

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

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

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

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

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

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

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

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

 

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

 

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

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

 

まとめ

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

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

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

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

 

ちなみに、プラグインを使わずに表(テーブル)を作成したいという方は、以下の記事を作成方法を紹介していますので、参考にして下さい。

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました