【ワードプレス】TablePressのプラグインで面倒な表組・テーブルの作業効率が激減!すると思うよ

こんにちわIQUNEです。(自己紹介はこちらから

imageself

wordpressに使用するプラグインTablePressについてのお話です。

スポンサーリンク

TablePressとは?

TablePressとはワードプレスにて、簡単に表を作成させることのできるプラグインです。例えば、料金表や成分表などを、ある程度の見栄えと、使い勝手を実現してくれ、非常に重宝します。一回使うとちょっと離れたくなくなりますね。

TablePressをインストールしよう!

管理画面のプラグインのところより、「新規追加」を押して「プラグインの検索」フォームに「TablePress」と入力し、インストール・有効化を行ってください。

TablePressの設定をしよう!

有効化が済めば下の図のように管理画面に「TablePress」の項目が追加されてくるので、クリック!TablePress-06

すると、下の図のような、現在登録されている「テーブルデータ」の一覧が表示されます。

TablePress-07

ちょっと、待って!さっきからテーブルテーブルって!

そうですね、テーブルとは主にHTMLのコーデイングに使う「タグ」の名称なのですが、このタグを使うと、段組などのエクセルのような表をウェブ上に表すことができます。通常は<table></table>という具合に結構ちまちました「タグ打ち作業」をしないとダメなのですが、これがTablePressを利用すると、いとも簡単に実行できるのです。要は時間と労力を大幅にカットできるのです。


テーブルを作成しよう!

下の図の、「新規追加」のタブボタンを押すと、新規テーブルを作成することができます。「新しいテーブルの追加」という項目に任意で名前を入力します。例えば「くだものの人気ランキング」とか。こちらの名称は、後に活用することも活用しないこともできるし、もちろん修正もできますので、軽い気持ちでやりましょう!今回はわかりやすいように、「テスト」と入力しました。
同様に「説明」のところも後に活用することも活用しないこともできるし、もちろん修正もできます。今回はわかりやすいように、「こちらはテストです。」と入力しました。
あとは、作りたい表が決まっているならば、横に何列か?縦に何行必要か?入力しましょう!もちろん後で修正できます。
ここで、「表のタイトル」は数にいれるのか??という疑問が出てくると思いますが、とりあえず、そこは考えずに自分の思った表の列と行を入力しましょう!

TablePress-04

入力が終わると、視下の図のように情報が反映されてきます。この右上にある「ショートコード」というのをPHPの作動可能画面(投稿ページとか、固定ページとかです。ウィジェットエリアの「テキスト入力」の画面は基本PHPが動作しないので、貼り付けることができません。ただし、プラグインを導入すれば可能になります。)にコピーして、貼り付ければ、いとも簡単に表が表示されます。あとは、実際の表を見て、修正しながらやっていけばわかるとは思いますが、もう少し補足をします。

TablePress-03

テーブルの表記内容を入力しよう!

このテーブルの内容のところに表記したい文字を入力していってください。
例えば1のAには”バナナ” 1のBには”200円” などのようにです。

TablePress-02

ここがTablePressの凄いところ!

上記の内容でしたら、まあ普通なんです以下のオプション設定が非常に便利です。

A.『テーブルの見出し行』:上記の「テーブルの内容」に記載した1行目が見出しとして表示されます。例えば「商品名」とか「価格」とかいれておけば、見やすい表になるかと思います。

B.『テーブルのフッター行』:上記の「テーブルの内容」に記載した最後の行が下の見出しとして表示されます。例えば「すべて税込みです」とか、補足が表の中でできるかと思います。

C.『行の色を交互にする』:これは大変便利で、行が多くなると、目の錯覚が起きて、どの項目がどの内容に対応しているかが見づらくなります。しかし、これを設定すると行ごとに色が交互に変わるので大変見やすくなります。

D.『カーソルのある行をハイライト表示』:これも大変便利で、行が多くなると、目の錯覚が起きてどの項目がどの内容に対応しているかが見づらくなります。しかし、これを設定すると行ごとにマウスを乗せるだけで、対応項目が明るく光りますので大変見やすくなります。

E.『テーブル名を表示』:最初に設定した「テーブルの名前」を表の外の先頭につけることができます。今回は「テスト」にしましたが、「くだものの人気ランキング」などにするとわかりやすい表になります。

F.『テーブルの説明を表示』:同じく最初に設定した「説明」を表の外のすぐ下につけることができます。今回は「こちらはテストです。」と入力しましたが、「表記価格は全て税込み価格です。」などを記載しておくと、補足が楽にできます。

G.『追加のCSSクラス』:こちらは設定しなくても十分見やすいので、何も設定しなくても良いかと思います。

また、その下の「DataTables JavaScriptライブラリ機能」という項目ですが、ちょっと上級者向けで、全然シンプルな「表組」だけをつくるだけならば不要な項目ですので、チェックはなしでも十分だと思います。

TablePress-01

エクセルデータをそのままアップロード!

また、エクセルデータをアップロードすると、「エクセルが見たままの状態で」「テーブルの内容」で設定されます。さらにそこから編集することも可能ですので。雑務程度の仕事ならウェブ作業を任せれないような人にでも「エクセル入力作業」だけをお願いして、あとはアップロードするという分業も可能になります。これはとても便利です。

TablePress-05

まとめ

以上で、TablePressの大まかな説明になりますが、いかがだったでしょうか??個人的にはかなり重宝しています。ぜひ、活用してみてください。

tablepresscatch   TablePressが管理画面に表示されないバグが発生したら【wordpress】

バナー-17



スポンサーリンク
スポンサーリンク