WordPressでテーブルのレスポンシブ化を「Basic Table」jQueryプラグインを用いて実装する方法

PR WordPressカスタマイズ 1

レスポンシブデザインのサイトで、表（Table）の扱いは頭を悩ませるところです。

今回は、そういったテーブルをjQueryプラグイン「Basic Table」を用いて比較的手軽にレスポンシブ化する方法の紹介です。

この記事では、以下のような通常のテーブルを

通常のテーブル表示

以下のような表示にするWordpressのカスタマイズ方法を紹介します。

テーブルのレスポンシブ表示

スポンサーリンク
レクタングル（大）広告

Basic Tableとは

Basic Table (jQuery Responsive Tables)

Basic Tableは、見出しセルを複製しデータ並び替えることで、狭い画面でも見やすくテーブルを表示してくれる、jQueryプラグインです。

デモページの表で説明すると、以下のようなテーブルを

通常のベーシックテーブル

以下のように表示させることができます。

レスポンシブ表示のベーシックテーブル

jQueryでオプションを指定することで、レスポンシブ表示するブレークポイントを指定したり、テーブルが長くなりすぎることを防ぐため、レスポンシブ後のテーブルの高さなどを制限したりすることができます。

Basic Tableの使い方

Basic TableをWordpressで利用するには、主に以下の手順が必要です。

  1. Basic Tableのダウンロード＆設置
  2. CSSファイルの呼び出し
  3. スクリプトの呼び出し
  4. レスポンシブテーブルのスタイルを設定

複雑な、jQueryコードなどは書く必要がないので、自前でコードを書くよりは簡単に設置できるかと思います。

Basic Tableのダウンロード＆設置

まずは、jerrylow/basictableから、zipファイルをダウンロードします。

jerrylow-basictable · GitHub

ダウンロードが完了したら、zipファイルを解凍し、中にある以下のファイルを使用します。

  1. basictable.css
  2. jquery.basictable.min.js

今回の例では、これらのファイルを以下のように設置しました。

  1. 子テーマフォルダ/css/basictable.css
  2. 子テーマフォルダ/js/jquery.basictable.min.js

CSSファイルの呼び出し

次に、<head></head>内でCSSファイルを呼び出します。

呼び出すコードは、以下のようになります。

<!-- 子テーマで呼び出すとき -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/basictable.css" />
<!-- 親テーマで呼び出すとき -->
<!-- <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/basictable.css" /> -->

コメントアウトしてあるところは、親テーマで利用する場合のコードです。環境に合わせて利用し、不要なら削除してください。

スクリプトの呼び出し

次に、フッターの</body>手前に、以下のように書き込みます。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.basictable.min.js"></script>
<!-- 親テーマで呼び出すとき -->
<!-- <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.basictable.min.js"></script> -->

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#table').basictable();
});
</script>

こちらでは、Basic Tableのスクリプトファイルを呼び出し、テーブルをレスポンシブ化する実行コードを書きます。コメントアウトしてある部分は、環境に合わせて利用もしくは削除してください。

簡単に説明しておくと、以下の部分でJavaScriptファイルを読み込んでいます。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.basictable.min.js"></script>

で、以下の部分が実行コードです。今回の例では、IDが"table"のテーブルをレスポンシブ化するように設定しています。

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#table').basictable();
});
</script>

ページが読み込まれた時点で、テーブルのレスポンシブ化を実行します。

レスポンシブテーブルのスタイルを設定

最後に、レスポンシブ化されたテーブル用のスタイルをstyle.cssあたりに以下のように設定します。

/*レスポンシブテーブルの行*/
table.bt tbody tr{
  border: 1px solid #ccc;
}
/*レスポンシブテーブルの見出しとなるヘッダーセルとなる部分*/
table.bt tbody td::before{
  background-color: #eee;
  margin-right: 10px;
  padding: 2px 10px;
}
/*レスポンシブテーブルの行となる部分*/
table.bt tbody td{
  padding: 0;
}
/*レスポンシブテーブルのデータセルとなる部分*/
table.bt tbody td .bt-content{
  padding-right: 10px;
}

Basic Tableでは、複製されたヘッダーセルには、通常の<th>のスタイルなどは適用されないので、自前で設定する必要があります。

上記は、当サイトのテーブルスタイルに合わせた表示にしてあります。これらのスタイルは、それぞれのサイトのテーブルスタイルに合わせる必要があります。

動作確認

Basic Tableを利用するには、IDが"table"のテーブルを以下のように書く必要があります。

<table id="table">
<thead>
     <tr>
          <th>姓名</th>
          <th>統率</th>
          <th>武勇</th>
          <th>知略</th>
          <th>政治</th>
          <th>総合</th>
     </tr>
</thead>
<tbody>
     <tr>
          <td>武田信玄</td>
          <td>110</td>
          <td>82</td>
          <td>96</td>
          <td>94</td>
          <td>382</td>
     </tr>
     <tr>
          <td>織田信長</td>
          <td>100</td>
          <td>89</td>
          <td>94</td>
          <td>97</td>
          <td>380</td>
     </tr>
     <!-- 省略 -->
</tbody>
</table>

ここで注意しなくてはいけないのは、先頭行のみにヘッダーセル（th）を使い、その見出しとなる行を<thead></thead>で囲みます。

<thead>で、先頭の見出し行を囲まないとレスポンシブ表示させたときに、消えるべき通常テーブルの見出しが表示されたままになってしまいます。

あと、見出し行以外に<th>を利用すると、表示が崩れてしまうので注意が必要です。

実際のレスポンシブテーブル

で、実際のテーブルが以下です。

姓名 統率 武勇 知略 政治 総合
武田信玄 110 82 96 94 382
織田信長 100 89 94 97 380
徳川家康 96 87 94 100 377
太田道灌 99 88 99 90 376
北条氏康 96 79 94 107 376
北条早雲 97 69 98 105 369
伊達政宗 96 86 92 93 367
毛利元就 93 69 105 98 365
真田昌幸 97 76 98 91 362
明智光秀 88 85 92 96 361
今川氏親 89 79 95 97 360
斎藤道三 85 79 100 95 359
佐竹義重 94 86 88 89 357
羽柴秀吉 87 73 93 104 357
長宗我部元親 93 86 93 84 356
上杉謙信 120 105 66 62 353

データ：信長の野望 天道 武将データ

モバイル端末（568ピクセル以下）などで表示させると、レスポンシブ表示されると思います。

オプションなど

Basic Tableのオプションとして、以下のようにブレークポイントを設定したりできます。（デフォルトは568px）

jQuery('#table-breakpoint').basictable({
    breakpoint: 768,
});

以下のように書くことで、長くなりがちなレスポンシブテーブルの高さを制限するなんて使い方もできます。

jQuery('#table-max-height').basictable({
    tableWrapper: true
});

オプションについて詳しくは以下を参照してください。

Basic Table (jQuery or Vanilla JS Responsive Tables)
www.jerrylow.com

まとめ

Basic Tableを使うと、見出しセルを複製するタイプのレスポンシブテーブルを比較的手軽に作ることができます。

また、オプションを指定することで、レスポンシブ化すると長くなりがちなテーブル表示の高さも制限することができ、表示も多少カスタマイズすることができます。

モバイルユーザーが多いサイトで、画面幅も狭い端末でも、テーブルを綺麗に表示させたい場合には、なかなか良さそうです。

『WordPressでテーブルのレスポンシブ化を「Basic Table」jQueryプラグインを用いて実装する方法』へのコメント

  1. アバター画像 名前:わいひら 投稿日：2016/06/24(金) 05:46:04 ID：742957fc9

    関連トピック。
    「Basic Table」の設定方法がわからない。