TablePressの設定方法と使い方|エクセルを取り込むことも可能!表(テーブル)作成のWordPressプラグイン

HTMLやCSSが書けないから、表(テーブル)をつくるのをあきらめたりしたことはありませんか?

そんな人には、HTMLやCSSの知識がなくても、テーブルを簡単に設定できるWordPressのプラグインが、なんと無料であります。

「TablePress」というプラグインです。

このTablePressというプラグインを使えば、初心者でも簡単にテーブルが設定できますし、テーブルの該当の行にマウスをあわせるとハイライト表示させたりできます。

また、エクセルやCSVのデータを簡単に取り込んで、テーブルをつくったり、つくったテーブルの並び替えなど非常に高機能です。

今回は、テーブルをつくるWordPressプラグインTablePressの設定方法と使い方を紹介します。

TablePress とは

公式プラグインディレクトリ「TablePress」

HTMLやCSSを知らないと、テーブルを設定することができないと思ったら、そんなことはありません。

TablePressは、HTMLやCSSが良くわからなくても、簡単にテーブルをつくることができてしまう、WordPressのプラグインです。

このプラグインは初心者のためのプラグインと思ったら、そんなことはありません!

TablePressを使うと、以下のようなことができます。

  1. 連続する行の背景色を別々の色にする
  2. マウスカーソルを行に合わせている間、行の背景色をハイライト表示する
  3. ユーザーがテーブルの並び替えを選択できるよう設定できる
  4. ユーザーがテーブル内の検索ができるよう設定できる
  5. スマホのために水平スクロールが設定できる
  6. 列幅を簡単に設定できる

このようなことが、できてしまいます。

テーブルを設定するときは、わざわざテキストモードでHTMLを書いていたのが、バカバカしくなるぐらい簡単にできますし、CSSの設定もこのプラグインの中でできてしまいます。

TablePress の設定手順

WordPressの管理画面左メニューのプラグインの中にある新規追加をクリックし、画面右上の検索窓に「TablePress」と入力します。

そうすると上図のようにTablePressが表示されますので、「今すぐインストール」を選択し、そのまま「有効化」します。

これでTablePressのインストールは完了です。

TablePress の使い方

WordPressの管理画面左メニューに、TablePressという項目が追加されているのでクリックします。

そうすると、以下のような画面に切り替わります。

 

この画面で、テーブルの名前と説明を入力しましょう。また作成する表の行と列の数値も入力します。

テーブルの名前と説明は、あとで変更できます。

行数や列数もあとで追加や削除できます。

画面下のテーブルを追加をクリックすると、画面が切り替わります。

 

とりあえず、なにか表を作ってみましょう。

テーブルの内容に以下のように入力します。

上図のように入力すると、以下のように表示されます。

ABCDF
12345
abcde

どうですか?すごく簡単ではないですか?

西野めぐ
うわーこのプラグインすごいです!

マウスを行に合わせている間、行の背景色を変更してハイライト表示するのは、とてもカッコよいですよね。

わたしもぜひ使いたいです!

これがデフォルトで、できてしまうなんてとても便利です。

この実装は、CSSなどで設定しますが、めんどくさいです。でもこのプラグインを使えば、こんなに簡単にできてしまいます。

ぜひ、さっそくやってみてください。

エクセルを取り込む方法

TablePressは、エクセルやCSVなども取り込んで、テーブル表記できる素晴らしいプラグインです。。

例えばこのエクセルデータを取り込んでみましょう。

このエクセルを、WordPressサイトのテーブルに取り込みたいときは、

WordPressの管理画面の左メニューのTablePressのなかにある、テーブルをインポートをクリックします。

ここで先ほどのエクセルを選択し、インポート形式をエクセルにして、インポートをクリックします。

そうすると、上図赤枠のようにエクセルのデータが管理画面に取り込まれているのが分かります。

このテーブルを表示させたければ、上図の青枠に表示されているショートコードをコピペしてみてください。

エクセルを取り込んで表示させたテーブル

エクセルあエクセルいエクセルうエクセルえエクセルお
エクセル1エクセル2エクセル3エクセル4エクセル5
エクセルaエクセルbエクセルcエクセルdエクセルe
西野めぐ
えええ!

こんなに簡単にできてしまうんですか?

TablePressは、HTML初心者のためのプラグインではなく、HTML上級者でもすごく重宝するプラグインではないですか?

わたし、このTablePressにホレちゃいました!

※今回はわかりやすく説明するために、DataTables JavaScriptライブラリ機能を無効にしています。

DataTablesの機能は、のちほど紹介します。

このようにエクセルでデータを取り込んで、簡単にテーブルを設定できてしまいます。

エクセルだけじゃなく、CSVファイルだって取り込んでしまうので、エクセルでたくさんデータがあれば、需要ありそうですね。

スマホでテーブルを見やすくする方法

TablePressで作成したテーブルは、基本的にレスポンシブ対応になっています。

デフォルトだと等間隔で文字サイズや写真サイズが調整されてしまいます。

ようすけゆみせいいちめぐこんどうまきたはなだいぶちょう

これ、PCだと気にならないかもしれませんが、スマホだと特に表示幅が狭いので、見にくくなってしまいます。

こういう時は、DataTablesを以下のように設定してみてください。

「列数の多いテーブルを見やすくするために、水平スクロールを有効にする」を有効にします。

さらに、ショートコードを貼りつけるときに、以下のように「column_widths=”120px”」というように引数と値を入力すると、横幅の設定ができるので、文字や画像が自動で小さくなるのを防ぐことができます。

[table id=3 column_widths=”120px|120px|120px|120px|120px|120px|120px|120px|120px” /]
(※横幅120pxに設定しています。)

ようすけゆみせいいちめぐこんどうまきたはなだいぶちょう

これがしっかり表示できていると、ヨコにスクロールできるようになっているはずです。

ぜひスマホでも表示を確認してみてください。

このようにカスタマイズすることで、テーブルの情報でもスマホユーザーが見やすくなります。

ぜひ参考にしてください。

以前は、レスポンシブ対応を、

// 768px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”phone” /]
// 980px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”tablet” /]
// 1200px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”desktop” /]

と引数入力する方法もありました。

この方法は、最新のプラグインのバージョン1.7だと使えません。

ネット上にこの方法を紹介している情報もありますが、気にせず、今回紹介した方法で対応しましょう。

検索や表示順変更できるようにする方法

テーブルで大きなデータを扱うときには、検索ができたらとても便利ですよね。

あと、表の並び順が変えられると見やすいですよね。

レアなケースかもしれませんが、エクセルを取り込んで表示させる場合は、ぜひ覚えておいてほしい内容なので、ぜひチェックしてみてください。

 

例えば、日本の都道府県別の人口を表にしました。

自分の出身の都道府県のデータが知りたければ、検索窓に都道府県名を入力してみてください。

あと人口をクリックしてみてください。

都道府県人口男性女性
–北海道5,381,733 2,537,089 2,844,644
青森県1,308,265 614,694 693,571
岩手県1,279,594 615,584 664,010
宮城県2,333,899 1,140,167 1,193,732
秋田県1,023,119 480,336 542,783
山形県1,123,891 540,226 583,665
福島県1,914,039 945,660 968,379
茨城県2,916,976 1,453,594 1,463,382
栃木県1,974,255 981,626 992,629
群馬県1,973,115 973,283 999,832
埼玉県7,266,534 3,628,418 3,638,116
千葉県6,222,666 3,095,860 3,126,806
東京都13,515,271 6,666,690 6,848,581
神奈川県9,126,214 4,558,978 4,567,236
新潟県2,304,264 1,115,413 1,188,851
富山県1,066,328 515,147 551,181
石川県1,154,008 558,589 595,419
福井県786,740 381,474 405,266
山梨県834,930 408,327 426,603
長野県2,098,804 1,022,129 1,076,675
岐阜県2,031,903 983,850 1,048,053
静岡県3,700,305 1,820,993 1,879,312
愛知県7,483,128 3,740,844 3,742,284
三重県1,815,865 883,516 932,349
滋賀県1,412,916 696,941 715,975
京都府2,610,353 1,248,972 1,361,381
大阪府8,839,469 4,256,049 4,583,420
兵庫県5,534,800 2,641,561 2,893,239
奈良県1,364,316 643,946 720,370
和歌山県963,579 453,216 510,363
鳥取県573,441 273,705 299,736
島根県694,352 333,112 361,240
岡山県1,921,525 922,226 999,299
広島県2,843,990 1,376,211 1,467,779
山口県1,404,729 665,008 739,721
徳島県755,733 359,790 395,943
香川県976,263 472,308 503,955
愛媛県1,385,262 654,380 730,882
高知県728,276 342,672 385,604
福岡県5,101,556 2,410,418 2,691,138
佐賀県832,832 393,073 439,759
長崎県1,377,187 645,763 731,424
熊本県1,786,170 841,046 945,124
大分県1,166,338 551,932 614,406
宮崎県1,104,069 519,242 584,827
鹿児島県1,648,177 773,061 875,116
沖縄県1,433,566 704,619 728,947
全国127,094,745 61,841,738 65,253,007

このようにユーザーが、検索できたり、並び替えができてしまうのはすごいですよね。

これは、DataTablesを以下のように設定してみてください。

テーブルの並び替えと、検索/フィルターの欄を有効にします。

 

この方法は、情報量の多いエクセルなどをサイトにアップするに大活躍します。

ぜひ試してみてください。

西野めぐ
TablePressってすごすぎますね!

表示させた表を並び替えたり、検索機能をつけるなんて、本当に便利です!

TablePressは絶対におすすめですね!

まとめ WordPressプラグインTablePress

TablePressは、テーブルを作成するのに、HTMLやCSSができない初心者でも、カッコいい表を表示させることができる素晴らしいプラグインです。

背景のハイライトだけではなく、水平スクロールや、検索、並び替えなど、あらゆることができるので、テーブルを使うサイトなら、ぜひ使ってみてください。

 

おすすめプラグインは、こちらで紹介していますのでチェックしてみてください。
→厳選おすすめプラグイン

【保存版】WordPressのおすすめプラグイン2017年版

2017.01.01

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です