表作成のWordPressプラグイン【TablePressの設定方法と使い方】

記事内に広告を含む場合があります

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という項目が追加されているのでクリックします。

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

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

[aside type=”normal”]テーブルの名前と説明は、あとで変更できます。

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

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

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

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

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

A B C D F
1 2 3 4 5
a b c d e

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

[voice icon=”https://fujimotoyousuke.com/wp-content/uploads/2017/01/megu1.jpg” name=”西野めぐ” type=”l big”]うわーこのプラグインすごいです!

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

わたしもぜひ使いたいです![/voice]

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

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

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

エクセルを取り込む方法

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

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

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

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

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

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

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

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

エクセルあ エクセルい エクセルう エクセルえ エクセルお
エクセル1 エクセル2 エクセル3 エクセル4 エクセル5
エクセルa エクセルb エクセルc エクセルd エクセルe

[voice icon=”https://fujimotoyousuke.com/wp-content/uploads/2017/01/megu1.jpg” name=”西野めぐ” type=”l big”]えええ!

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

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

わたし、このTablePressにホレちゃいました![/voice] [aside type=”normal”]※今回はわかりやすく説明するために、DataTables JavaScriptライブラリ機能を無効にしています。

DataTablesの機能は、のちほど紹介します。[/aside]

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

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

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

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

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

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

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

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

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

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

[table id=3 column_widths=”120px|120px|120px|120px|120px|120px|120px|120px|120px” /]
(※横幅120pxに設定しています。[]をショートコードの[]に置き換えてください。

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

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

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

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

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

[aside type=”normal”]以前は、レスポンシブ対応を、

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

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

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

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

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

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

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

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

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

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

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

都道府県 人口 男性 女性
–北海道 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を以下のように設定してみてください。

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

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

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

[voice icon=”https://fujimotoyousuke.com/wp-content/uploads/2017/01/megu2.jpg” name=”西野めぐ” type=”l big”]TablePressってすごすぎますね!

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

TablePressは絶対におすすめですね![/voice]

まとめ

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

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

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

[kanren2 postid=”4745″]

5 COMMENTS

ルミ

こんにちは!
とても分かりやすい記事助かります!

記事スクロールができなくて困ってます。
記事通りやってるのですが…

レスポンシブ何とかというプラグインは使っているのでしょうか?

テーブルプレスのプラグインは最新です(。・ω・。)
何かご教授頂けると助かります

返信する
藤本 陽介

ルミさん、こんにちは。
記事スクロールとは、横スクロールのことですかね?

テーブルプレスのDataTables JavaScriptライブラリ機能の、「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する」にチェックを入れて、「列数の多いテーブルを見やすくするために、水平スクロールを有効にする」にもチェックを入れれば、スクロールできるはずですよ。
https://fujimotoyousuke.com/wp-content/uploads/2017/01/tablepress-wordpress-plugins11.png
ここです。

返信する
ルミ

追記です!

テキストで
[table id=2 column_widths=”120px|120px|120px|120px|120px|120px|120px|120px|120px” /]
を入れると
そのまま表示されてしまいます

た、助けて下さい…

返信する
藤本 陽介

ショートコードなので、 [ ではダメで、[ でなくてはいけません。
わたしの記事内のコードを貼り付けているなら、実際にテーブルプレスが表示されないように、[ を使って説明しています。

↓これをそのまま貼ってみてください。
[table id=2 column_widths="120px|120px|120px|120px|120px|120px|120px|120px|120px" /]

返信する
ルミ

藤本様

大変迅速なご対応ありがとうございます!!
まさかあの[が違っていたなんて。

パソコン表示では横スクロールできましたが、スマホでではできません。

私はJINを使っているのですが、相性もありそうですね(。・ω・。)

返信する

コメントを残す

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