WordPress でレスポンシブ テーブルを作成する方法
公開: 2023-02-12表は、大量の情報を整理された方法でエレガントに表示するのに役立つ Web サイトのデザイン要素です。 従来のコンピュータ ディスプレイでは非常にうまく機能しますが、モバイル デバイスでは望ましくないエクスペリエンスを生み出すことがよくあります。
幸いなことに、応答性の高いテーブルを作成するための実行可能なソリューションがいくつかあります。 これらのレスポンシブ デザイン プラクティスを使用すると、サイトのユーザー エクスペリエンス (UX) を向上させることができます。 これは、訪問者が使用しているデバイスの種類に関係なく、テーブル内のデータをより簡単に表示およびアクセスできることを意味します。
この記事では、テーブルをレスポンシブにすることの意味を見ていきます。 次に、WordPress でレスポンシブ テーブルを作成する 2 つの方法について説明します。 さっそく飛び込みましょう！
レスポンシブ テーブルとは
通常、テーブルの目的は、意味のある方法で大量のデータを表示することです。 ただし、モバイル デバイスでテーブルを表示しようとすると、うまくいかないことがあります。 これは、表の行が、画面の表示よりも多くの列であることが多いために発生します。
レスポンシブ テーブルを作成するときは、基本的に、元のデータ テーブルの一連のルールを作成することになります。 これらのルールは、表示サイズに基づいてブレークポイントを決定できます。 これは、設定したブレークポイントよりも小さいデバイスでユーザーがテーブルにアクセスした場合、テーブル レイアウトは画面サイズに合わせて再フォーマットすることによって応答することを意味します。
通常、レスポンシブ テーブルは、スクロール バーを追加するか、情報を積み重ねることによって再フォーマットできます。 画面サイズの変更に合わせて、セル内の情報を縮小して詰め込むのは望ましくありません。表が読みにくくなる可能性があるからです。 幸いなことに、レスポンシブ デザインを実現するのはそれほど難しくありません。
レスポンシブ テーブルの作成方法 (プラグインなし)
WordPress でテーブルをレスポンシブにするには、基本的に 2 つのアプローチがあります。 まず、プラグインなしで仕事を成し遂げる方法を見ていきます。
これには、コーディングに関するある程度の知識、特に Cascading Style Sheets (CSS) の理解が必要です。 また、確実に機能するテーブルを設計するまでは、実際の Web サイトではなく、ステージングまたは開発環境で作業することをお勧めします。
ステップ 1: レスポンシブ CSS 用にテーブルをフォーマットする
この例では、サンプル テーブルのデータを特定のブレークポイントで再フォーマットするように指示します。 場合によっては単純にスクロール バーをテーブルに追加することもできますが、実際にはテーブルのデータをグループ化して、水平スクロールが不要な読みやすい形式で表示されるようにします。
水平スクロールは、列のデータをコンテキストから外して表示していることを意味することが多いため、これは優れたアプローチです。
この表をより適切に機能させるには、まず、表が適切にフォーマットされていることを確認する必要があります。 ブロック エディターを使用してテーブルを作成している場合は、通常どおり作成してから <thead> および <tbody> 属性を追加して、CSS が適切に機能することを確認します。
テーブルを追加したら、HTML エディターを使用してその書式を調整できます。 <thead></thead> 属性は、すべての列ヘッダーをラップする必要があります。 同様に、後続のすべてのテーブル データを <tbody></tbody> 属性でラップします。
次のステップで CSS タグを追加すると、スタイル シートは、表の各列のヘッダーとして表示されるものと、本文またはセルの内容を理解できるようになります。
ステップ 2: カスタム タグを CSS に追加する
次に、カスタム CSS コードのスニペットと WordPress Twenty Nineteen テーマを使用します。 このテーマには、ネイティブ コードの一部として非常にレスポンシブなデザインが含まれていますが、CSS の調整により、それがさらに進められます。
テーマはすべて異なるため、レスポンシブ テーブル デザインを適切に実装するには、テーマの構造を完全に理解する必要があります。 一部のテーマでは、追加の JavaScript ライブラリが必要になる場合があります。
この例では、 [外観] > [カスタマイズ] > [追加の CSS]に移動し、次のカスタム CSS コードを追加できます。
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
独自のコードをエディターに貼り付けたら、変更を有効にするために[発行]を選択する必要があります。
ステップ 3: WordPress でテーブルの応答性をテストする
WordPress には便利な組み込みの画面テスト機能があり、3 つの異なる画面サイズでコンテンツをテストできます。 カスタム CSS を追加した画面の下部で、タブレットまたは携帯電話のアイコンをクリックして、テーブルの新しいスタイルをテストできます。
この例では、CSS を操作するために必要なすべての HTML 属性を含む単純なテーブルを既に作成しています。 CSS のブレークポイントは 600px に設定されていますが、ニーズに合わせて変更できます。
スクロールバーを追加したりテーブルのデータを押しつぶしたりする代わりに、追加した CSS がデータをモバイル フレンドリーな形式に再編成します。 これにより、モバイル デバイスのユーザーは縦方向にスクロールし、テーブルのデータを関連する残りのセルと合わせて表示できます。
プラグインでレスポンシブ テーブルを作成する方法
テーマのコードや CSS のカスタマイズに慣れていない場合は、別のオプションがあります。 ウェブサイト用のレスポンシブ テーブル デザインを作成するのに役立つ、利用可能な WordPress プラグインが多数あります。
ステップ 1: プラグインをダウンロードする
開始するには、プラグインを選択する必要があります。 レスポンシブ テーブルの設計にはかなりの数のオプションがあるため、開始するためにいくつかを強調します。
- Ninja Tables :レスポンシブ テーブルを作成するための WordPress のナンバーワン プラグインとしてラベル付けされており、100 を超えるテーブル スタイルから選択できます。
- wpDataTables :これはプレミアム バージョンの無料プラグインですが、ライト バージョンには豊富でインタラクティブなテーブルやグラフを作成するための機能が満載です。
- WP Responsive Table :これはシンプルで無料のプラグインで、小さな画面で水平方向にスクロールするレスポンシブ テーブルを簡単に作成できます。
この例の残りの部分では、Ninja テーブルを使用して、WordPress でレスポンシブ データ テーブルを作成する方法を示します。
ステップ 2: データを入力する
プラグインをインストールして有効にすると、すぐにテーブルの作成に取りかかることができます。 NinjaTables > All Tables > Add Tableに移動できます。
ここでは、新しいテーブルを最初から追加するか、ファイルからテーブルをインポートできます。 [テーブルの追加]オプションを使用して、最初からテーブルを作成します。 次に、テーブルのタイトルと説明を入力する必要があります。
ここにもいくつかのオプションがあります。 たとえば、WooCommerce ショップをセットアップしている場合、その情報を使用して WooCommerce テーブルを作成できます。
情報を追加したら、 [追加]をクリックしてテーブルを作成します。 次に、データの入力を開始する必要があります。 [列の追加]を選択して、テーブルの構造を設定できます。
列を作成するには、いくつかのフィールドに入力する必要があります。 これには、列のヘッダー名とそこに含まれるデータのタイプが含まれます。 レスポンシブ ブレークポイントを設定することもできます。
テーブルがさまざまなデバイスにどのように応答するかを決定する多くのオプションから選択するには、 [すべてのデバイスで常に表示]をクリックしてメニューにアクセスできます。
列を作成したら、 [データの追加]を選択します。NinjaTables は、テーブルに複数のエントリをすばやく追加するための簡単なフォームを提供します。
作成するエントリが複数ある場合は、 [追加を続ける]オプションをオンのままにしておくことができます。 完了したら、ウィンドウを閉じてテーブル編集画面に戻ることができます。
ステップ 3: テーブルをフォーマットする
情報を含むテーブルができたので、NinjaTable の設定とスタイル オプションを調べることができます。 テーブル編集ウィンドウ内から、上部のタブに沿って、また画面の右側にあるより多くの設定にアクセスできます。
表の行の色の交互配置、テキストの中央揃え、データの非表示など、表のスタイルと外観をカスタマイズするための多くのオプションがあります。
ステップ 4: テーブルをテストする
NinjaTable を使用すると、編集中にテーブルの応答性を簡単にテストできます。 [テーブル デザイン]タブには、画面の応答性をテストするための 3 つのオプションがあります。
デスクトップ、タブレット、またはモバイルを選択して、これらの種類のデバイスでテーブルがどのように表示されるかを確認できます。
作成する各テーブルには、ショートコードも付属しています。 さらに、ブロック エディター メニューの [書式設定]セクションにある NinjaTable ブロックを使用して、任意のテーブルを Web サイトのコンテンツに簡単に追加できます。
WP Engine でサイトの応答性を維持できます
適切なリソースにアクセスできれば、堅牢なレスポンシブ デザインを採用した Web サイトを構築することは難しくありません。
ここWP Engineでは、顧客に最高のデジタル体験を提供できるようにしたいと考えています. あなたの次のプロジェクトのために、私たちの多くの WordPress ホスティング プランと開発者向けソリューションをチェックしてください!