WordPressでテーブル作成する有名なプラグインにTablePressがあります。TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。
このプラグインは別プラグインでレスポンシブ対応できるaddonがありますが、実はあまり知られていないようなのでご紹介します。
TablePressプラグインには拡張プラグインがある
まず、TablePressを知らないという方は、以下の公式に登録されているので必要に応じてインストールしてください。
TablePressには様々な拡張プラグインがあります。
Responsive Tableアドオンもその一つです。
Premiumと書かれているアドオンは寄付を募っているので便利だと思って使い続けるのであれば寄付した方が良いかもしれません。
Frontend table behavior
- Responsive Tables Premium
- Automatic URL conversion
- PHP code in table cells
- Row Filtering Premium
- Single Cell Content Shortcode
- Table Row Order Premium
More features for the DataTables JavaScript library
- DataTables Sorting plugins
- DataTables Buttons Premium
- DataTables FixedColumns
- DataTables FixedHeader Premium
- Pagination Length Change “All” Entry
- Change DataTables strings
- DataTables Column Filter
- DataTables ColumnFilterWidgets Premium
- DataTables Counter Column
Compatibility with other plugins
Adjustments for the admin area of TablePress
Responsive Tableアドオン
Responsive Tables Extensionは、これを回避するための4つのアプローチを提供します。
Responsive Tableのインストール
こちらからプラグインのzipファイルをダウンロードします。
次に、Wordpressのプラグイン追加を選び、アップロードしてインストールして有効化すればOK。
Responsive Tableの4つのレスポンシブモード
最初の3つのモードでは、ソート、フィルタリング、ページネーションが引き続き機能します。しかし、stackモードはソートができません。
flip：このモードでは、拡張機能はテーブルを横に反転し（行は列として表示され、逆も同様）、水平にスクロール可能にすることで、テーブルのレイアウトを変更します。このモードは、プレーンなデータ/テキストテーブルには適したソリューションですが、通常、画像を含むテーブルではうまく機能しません。scroll：このモードでは、幅が広すぎて水平方向に完全に表示できないテーブルが作成されます。これにより、ユーザーはすべてのテーブルデータにアクセスできます。これは、画像が自動的にサイズ変更されない場合、通常、画像を含むテーブルに適したアプローチです。collapse：このcollapse方法では、表に非表示/展開効果を追加できます。それ以外の場合は切り捨てられる列からデータを非表示にし、代わりに各エントリの下に挿入される折りたたみ可能な行にそのデータを追加します。その行は、「+」および「-」ボタンで表示および非表示にできます。このモードは、ディレクトリテーブルなど、一部の「メイン」列の追加情報を表示するテーブルで特に役立ちます。stack：このstackモードでは、行のセルが隣同士ではなく、互いの上に表示されます。これにより、列が1つしかないように見えるため、テーブルがより狭くなります。ただし、テーブルヘッド行の列ヘッダーセルは表示されないため、この方法は、ディレクトリテーブルなどの情報が簡単に認識できるテキストデータに最適です。
Responsive Tableの使い方
使い方は、簡単です。
TablePressのショートコードに、レスポンシブのモードとブレークポイントのオプションを指定します。
設定
[table “123” not found /]
responsiveオプション
modeにflip、scroll、collapse、またはstackのいずれかを指定します。
responsive_breakpointオプション
phone：携帯電話（画面幅が768ピクセルより小さいデバイス）のみレスポンシブが有効になります。tablet：携帯電話とタブレット（画面幅が980ピクセル未満のデバイス）のみレスポンシブが有効になります。desktop：携帯電話、タブレット、およびデスクトップモニター（画面幅が1200ピクセル未満のデバイス）でのみレスポンシブが有効になります。all：画面サイズに関係なく、すべての画面でレスポンシブが有効になります。
設定例
[table “123” not found /]
まとめ
TablePressはHTMLタグを知らない初心者の方は必ずと言っていいほど使うと思いますが、せっかく作った表がスマホなどで中途半端なレスポンシブになっており、がっかりする人も多いと思います。
今回ご紹介したResponsive Tableアドオンを導入することですべてのデバイスでテーブルを見やすく表示できるようになりますので、是非試してみてください。
