[WordPress]TablePressのレスポンシブ対応

TablePressで書いた表を様々なデバイスに対応させる為、変化する横幅を基準として対応させる為のプラグインのご紹介です。
このプラグインを導入する事で、指定した幅以下になると表を横倒しにしてくれるようになります。
WPで検索しても出てこないので、元サイトからダウンロードして、手動で設定をする必要があります。

1)元サイトのResponsive Tablesから「Responsive Tables Extension 1.1」をダウンロードします。
2)ダウンロードしたzipファイルをWPをインストールしたサーバーへアップロードします。
3)zipファイルをwp-content/pluginsに解凍します。
4)必要ならownerを変更します。
 # chown -R apache.apache tablepress-responsive-tables
5)プラグイン「TablePress Extension: Responsive Tables」を有効にします。

この後、記事に記載したTablepressの定義を変更します。

[table id=1 /] ⇒ [table id=1 responsive=”phone” /]

responsiveで指定するパラメータは下記のようなのがあります。
・768px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”phone” /]
・980px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”tablet” /]
・1200px以下になるとテーブルを横向きにする場合
[table id=1 responsive=”desktop” /]
・常にテーブルを横向きにする場合
[table id=1 responsive=”all” /]

横幅が指定以上のとき

横幅が指定未満のとき

このようにResponsive Tables Extensionはブラウザの幅を読み取って表を横倒しに表示してくれます。
これでスマートフォンで見ても、一応は見れるかなって感じです。

Follow me!

コメントを残す

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