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

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

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

この記事で分かること

TablePressプラグインには拡張プラグインがある
Responsive Tableアドオン
まとめ

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

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

TablePress – Tables in WordPress made easy

EmbedbeautifulandinteractivetablesintoyourWordPresswebsite’spostsandpages,withouthavingtowritecode!

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

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

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

TablePress Extensions · TablePress

TablePressisthemostpopularandhighestratedWordPresstableplugin!CreateandembedattractiveandresponsivetablesonyourWordPresswebsitewiththisplugin!

Frontend table behavior

More features for the DataTables JavaScript library

Compatibility with other plugins

Change the [table “” not found /]
Shortcode

Adjustments for the admin area of TablePress

Responsive Tableアドオン

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

Responsive Tableのインストール

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

Responsive Tables · TablePress

TablePressisthemostpopularandhighestratedWordPresstableplugin!CreateandembedattractiveandresponsivetablesonyourWordPresswebsitewiththisplugin!

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

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

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

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