お問い合わせはコチラから

TablePressのレスポンシブ対応は?拡張アドオンでできます

WordPressでテーブル作成する有名なプラグインにTablePressがあります。TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。

このプラグインは別プラグインでレスポンシブ対応できるaddonがありますが、実はあまり知られていないようなのでご紹介します。

TablePressプラグインには拡張プラグインがある

まず、TablePressを知らないという方は、以下の公式に登録されているので必要に応じてインストールしてください。

TablePressには様々な拡張プラグインがあります。

Responsive Tableアドオンもその一つです。

Premiumと書かれているアドオンは寄付を募っているので便利だと思って使い続けるのであれば寄付した方が良いかもしれません。

TablePress Extensions | TablePress

Frontend table behavior

More features for the DataTables JavaScript library

Compatibility with other plugins

Adjustments for the admin area of TablePress

 

Responsive Tableアドオン

Responsive Tables Extensionは、これを回避するための4つのアプローチを提供します。

Responsive Tableのインストール

こちらからプラグインのzipファイルをダウンロードします。

Responsive Tables | TablePress

次に、Wordpressのプラグイン追加を選び、アップロードしてインストールして有効化すればOK。

Responsive Tableの4つのレスポンシブモード

最初の3つのモードでは、ソート、フィルタリング、ページネーションが引き続き機能します。しかし、stackモードはソートができません。

  • flip:このモードでは、拡張機能はテーブルを横に反転し(行は列として表示され、逆も同様)、水平にスクロール可能にすることで、テーブルのレイアウトを変更します。このモードは、プレーンなデータ/テキストテーブルには適したソリューションですが、通常、画像を含むテーブルではうまく機能しません。
  • scroll:このモードでは、幅が広すぎて水平方向に完全に表示できないテーブルが作成されます。これにより、ユーザーはすべてのテーブルデータにアクセスできます。これは、画像が自動的にサイズ変更されない場合、通常、画像を含むテーブルに適したアプローチです。
  • collapse:このcollapse方法では、表に非表示/展開効果を追加できます。それ以外の場合は切り捨てられる列からデータを非表示にし、代わりに各エントリの下に挿入される折りたたみ可能な行にそのデータを追加します。その行は、「+」および「-」ボタンで表示および非表示にできます。このモードは、ディレクトリテーブルなど、一部の「メイン」列の追加情報を表示するテーブルで特に役立ちます。
  • stack:このstackモードでは、行のセルが隣同士ではなく、互いの上に表示されます。これにより、列が1つしかないように見えるため、テーブルがより狭くなります。ただし、テーブルヘッド行の列ヘッダーセルは表示されないため、この方法は、ディレクトリテーブルなどの情報が簡単に認識できるテキストデータに最適です。

Responsive Tableの使い方

使い方は、簡単です。

TablePressのショートコードに、レスポンシブのモードとブレークポイントのオプションを指定します。

設定

[table id = 123 responsive = "mode" responsive_breakpoint = "device" /]
responsiveオプション

modeflipscrollcollapse、またはstackのいずれかを指定します。

responsive_breakpointオプション
  • phone:携帯電話(画面幅が768ピクセルより小さいデバイス)のみレスポンシブが有効になります。
  • tablet:携帯電話とタブレット(画面幅が980ピクセル未満のデバイス)のみレスポンシブが有効になります。
  • desktop:携帯電話、タブレット、およびデスクトップモニター(画面幅が1200ピクセル未満のデバイス)でのみレスポンシブが有効になります。
  • all:画面サイズに関係なく、すべての画面でレスポンシブが有効になります。

設定例

[table id = 123 responsive = flip responsive_breakpoint = phone /]

まとめ

TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。

今回ご紹介したResponsive Tableアドオンを導入することですべてのデバイスでテーブルを見やすく表示できるようになりますので、是非試してみてください。

 

タイトルとURLをコピーしました