[WordPress] FooTable で表作成

       

 computer

               

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

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

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

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

(1)上記プラグインをインストールする。

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

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

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

(3)2のコードを編集する。

・<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” を追加した見出しには、展開用のプラスボタンが表示される。これを書かなかった場合、一番左の見出しにプラスボタンが表示される。

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

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

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

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

[JS]

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


> 記事のタイトルとURL をコピーする <

書籍