Table Pressで作成した表をレスポンシブ対応する為の拡張プラグイン

ここでは、Table Pressで作成した表を、レスポンシブ対応する為の、
プラグインを紹介してきます。

拡張プラグイン Responsive Tablesインストール

プラグインはここからダウンロードできます。

サイトにアクセスして右上のdownloadを選択後、プラグインのダウンロードが始まります。

ダウンロード完了を待つ。

管理メニュー > プラグイン > 新規追加 > プラグインのアップロード を選択して、ダウンロードしたプラグインをアップロードします。

4種類のレスポンシブ モード

Responsive Tablesには、4種類のレスポンシブモードが用意されています。詳しくはこちら

適応するには、ショートコードに、次のように入力します。

flip

[[table id=1 responsive = flip /]]

scroll

[[table id=1 responsive = scroll /]]

collapse

[[table id=1 responsive = collapse /]]

stack

[[table id=1 responsive = stack /]]

ブレークポイント設定

flip、stackモードには、ブレークポイントを設定できます。

ブレークポイントの種類は次の通りです。

• phone : 「画面幅768px未満で適応」
• tablet : 「画面幅968px未満で適応」
• desktop : 「画面幅1200px未満で適応」
• all : 「すべての画面幅で適応」

適応するには、ショートコードに、次のように入力します。

phone

[[table id=1 responsive = flip responsive_breakpoint = "phone" /]]

tablet

[[table id=1 responsive = flip responsive_breakpoint = "tablet" /]]

desktop

[[table id=1 responsive = flip responsive_breakpoint = "desktop" /]]

all

[[table id=1 responsive = flip responsive_breakpoint = "all" /]]

最後に

Responsive Tablesは開発のための寄付を募っているようです。

便利なプラグインなので、開発を応援したい場合は寄付してみてもいいかもしれません。