[WordPress] FooTable で表作成

WordPress で表を作成したくなった。

情報量が多い、横長の表を作りたい。しかし、スマートフォン等では表が小さくなって見にくくなってしまう（最近はスマートフォンからのアクセスが多いからね）。だから、必要な箇所だけクリックすれば、そこだけ追加情報として表示させるようにしたい。

いろいろ検討した結果、FooTable というプラグインを使えば良さそうだ。デザイン的に美しい。

FooTable | WordPress.org
https://wordpress.org/plugins/footable/

（１）上記プラグインをインストールする。

（２）大きめの表なので一旦 Excel でデータを作り、それを HTML テーブルに変換する。そのためには以下のページを利用すると簡単だ。

Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited
https://tech-unlimited.com/exceltable.html

ExcelからHTMLテーブル変換
https://ao-system.net/exceltable/

（３）２のコードを編集する。

・<table> を <table class="footable"> に変更する。
・ソートを無効化するなら data-sort="false"、フィルタリングを無効化するなら data-filter="false"、ページネーションをを無効化するなら data-page="false" を同じく <table> に追加する。
・見出し行部分のコードを <thead> で囲む。見出しごとに date-hide="phone"（スマートフォンのみ）、date-hide="tablet"（タブレットのみ）、date-hide="phone,tablet"（スマートフォンおよびタブレット）と追記することで、どの端末で非表示するかを設定できる。
・data-class="expand" を追加した見出しには、展開用のプラスボタンが表示される。これを書かなかった場合、一番左の見出しにプラスボタンが表示される。

（４）「WordPress の設定画面＞Settings＞Footable＞Breakpoints」で、スマートフォンやタブレットとして認識される幅の大きさを指定する。

しかし、表の表示はできるが、なぜか折りたたみができない・・・。これが一番肝心な機能なのに。他のテーマだと動いたので、テーマとの相性の問題みたい。

参考：
TablePressにも対応！横長テーブルのスマホ対応はFooTableで決まり。【WordPressプラグイン】 | ふくどん
http://fukudon.com/footable-responsive-table/

WordPress – レスポンシブサイトでテーブルを実装するなら「FooTable」がいいね！ | みずかず
http://mizukazu.minibird.jp/footable/

[JS]＜table＞ をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」
https://www.webantena.net/javascriptjquery/plugin-footable/