ヘッダーが繰り返される、より応答性の高いWordPressテーブル

WordPressのテーブルは、長年の進歩にもかかわらず、諸刃の剣です。データを表示するのに最適ですが、ストーリーを伝えるには不向きです。それでもまだ十分ではないと思うなら、スマートフォンやタブレットの話を聞きなさい。データを表示するためのスペースがさらに狭くなるデバイスです。テーブルには、慣れ親しまなければならない欠点がいくつかありますが、レスポンシブ性はそのうちの一つではありません。

WP Table Manager前回のメジャーアップデートでは、表の新しいレスポンシブデザインと追加のレスポンシブオプションが導入されました。そして今、WordPress Table Managerのより新しく、より優れたバージョンが登場しました。新しいレスポンシブモードと、レスポンシブな表とその動作をカスタマイズするための新しいオプション（繰り返しヘッダー）が追加されています。

繰り返しヘッダーを持つレスポンシブテーブル

表を表示するスペースが足りない場合はどうなるでしょうか？前回のアップデートでは、 WP Table Managerスクロールバーの追加と列の非表示という2つのレスポンシブオプションを提供していました。これら2つのモードにはそれぞれ用途がありますが、水平スクロールやデータの非表示を避けたい場合は、新しい3つ目のモード「ヘッダーの繰り返し」が最適かもしれません。

繰り返しヘッダーレスポンシブモードは、他のモードと同様に、デスクトップデバイス（パソコンやノートパソコンなど）など十分なスペースがある場合、デフォルトで通常の表として表示されます。十分なスペースがない場合は、表ヘッダーと行の値の2列で構成されるシンプルな表に縮小されます。

実際には、表に4つの列がある場合、元の表の各行はレスポンシブバージョンでは4つの新しい行として表示されます。新しい行には、元のヘッダーとそのデータ値のみが含まれます。このスキームは元の表の各行に適用されるため、データ値の横には常に同じヘッダーが繰り返し表示されます。

このシンプルなレスポンシブな動作のおかげで、繰り返しヘッダーテーブルモードを使用すると、モバイルやタブレットでの表示を気にすることなく、テーブルに好きなだけデータを追加できます。さらに、 WP Table Manager 小型デバイスでは行ごとに異なる色を使用します。元のテーブルの各行が異なる色で表示されるため、コンテキストが維持され、WordPressの読者はレコードを区別できます。

繰り返しヘッダーモードでレスポンシブテーブルをカスタマイズする

表の編集時に、繰り返しヘッダーモードを選択できます。フォーマットからレスポンシブオプション、繰り返しヘッダーモードを探します。また、レスポンシブブレークポイントとレスポンシブ最大高さの2つの方法で、繰り返しヘッダー表をカスタマイズできます。

レスポンシブブレークポイントとは、WordPressのテーブルマネージャープラグインが表のレンダリングを通常通り行わない範囲の幅のことです。この値は、WordPressのテーマと列数に基づいて推定できます。表が特定の幅以下に収まらないと思われる場合は、その幅をブレークポイントとして使用してください。

行数や列数が多い場合、繰り返しヘッダーモードを使用するとページが非常に長くなる可能性があります。レスポンシブ最大高さ設定は、レスポンシブモード時に繰り返しヘッダーテーブルの高さを制限することでこの問題に対処します。レスポンシブテーブルが長すぎる場合、WordPressのリーダーは通常通りスクロールバーを使用してデータを表示できます。

レスポンシブな表に魔法の解決策はありませんが、WordPressの表の繰り返しヘッダーモードはそれに近いものです。小さな表でも、行や列の多い大きな表でも、 WP Table Managerの新しい繰り返しヘッダーモードを使えば、デバイスを問わずデータが常に適切に表示されます。