説明
幅の狭いディスプレイで、ページを開いた場合に、テーブル表示をリスト表示に変えるプラグインです。幅の狭いディスプレイ用のリストは、ブロックエディタで入力したテーブルから生成されます。テーブルと同じ内容のリストを用意する必要はありません。簡単な操作で、このプラグインの機能を使用することができます。
プラグインはリストをブラウザ上で動的に生成します。リストは、Wordpressのデータベースには存在しません。プラグインをアンインストールしても、スマートテーブルを有効にしていたテーブルは、ほとんど影響なく編集することができます。
表示の確認
こちらで表示結果を確認することができます。
テーブル構造とリスト構造
テーブルは、セルが水平方向に並んだヘッダーをもっています。テーブルの内容(body)は、ヘッダセルと関連づいているので、水平方向にデータが並びます。
たとえ幅の狭いディスプレイであっても、セルの情報は、水平方向にならびます。一方で、他の情報は、垂直方向に並ぶ傾向にあります。
ページを開いた時、上から下の方に向かってページを見ていくことになります。垂直方向にスクロールさせることは、自然な操作です。垂直方向に内容をスクロールさせているときに、横に長いテーブルが現れると、一旦スクロールを止めて、ディスプレイを水平方向にスクロールさせます。テーブルの最後まで横スクロールさせたら、反対方向にスクロールをさせます。そして鉛直方向にスクロールを開始させるのです。
これは、水平方向にカテゴリー分けされたセルを並べていることに由来しています。テーブル構造を保ったまま、垂直方向にデータを表示することは、適切とは感じる事ができませんでした。私にとっては、リストを使用してデータを再配置するほうが適切とおもいました。リストは、データを垂直に並べるような性質を持っていると思っているからです。
バックグランドでのスマートテーブル
OC スマートテーブルはページが開かれた時にブラウザ側で 動的にテーブルからリストを生成します。表示幅が広くて、テーブルで十分な場合は、表示されません。テーブル表示をするには、十分でない場合は、リスト表示に切り替わります。
使用方法
OC スマートテーブル(フリー)を有効にする
高度な設定の追加 CSS クラスに”oc-smart-table”と入力します。現在編集中のテーブルで、スマートテーブルが有効になります。テーブルブロックを配置したり、入力済のテーブルをクリックしたりすることで、テーブルが編集状態となります。
OCスマートテーブルを有効にする
スタンダードエディションのOC スマートテーブルを使っている場合は、テーブルブロックエディタのツールバーから、スマートテーブルを有効をクリックすれば、スマートテーブルが有効になります。
スタンダードエディションはこちらから購入できます。
色とスタイルを継承
テーブルエディタの色とスタイルをリストにも引き継ぐことができます。このこの継承(引継ぎ)を有効にするには、設定サイドバーの色とスタイルを継承を有効とします。