テーブルのヘッダーセルをスクロール固定できる「jQuery.floatThead」 WordPressでの使い方

通常のテーブル（表）はスクロールするとセル見出しが見えなくなります。

これだと、長いデータを見る上で少し不便です。というのも、スクロールしているうちに何のデータかわからなくなってしまうからです。

そこで今回は、そういった難点を解消できるjQuery.floatTheadというjQueryプラグインの紹介です。

以下のようなテーブルが手軽に作成できます。（スクロールしてみてください）

データ 三国志武将データ一覧

このプラグインを使うことによって、長い表でも見やすくできるかと思います。

jQuery.floatTheadとは

jQuery.floatTheadは、テーブル（表）のヘッダーセル（セル見出し）を固定表示してくれるjQueryプラグインです。

例えば普通にテーブルをスクロールすると、ヘッダーセルが以下のように隠れてしまいます。

これだと途中で、どの数値がどんなデータだったか忘れてしまった場合は、スクロールバックして戻る必要があります。

これだと、ちょっと不便です。

ただ、今回のjQueryプラグインを使えば、スクロールをしても常に画面上部にヘッダーセルを固定表示できます。

もちろん、テーブルの表示が終了すれば固定は解除されます。

以下では、そのWordpressでの使い方を紹介します。

jQuery.floatThead使用の主な手順

jQuery.floatTheadの設置はとても簡単で、以下の手順で行えます。

1. jQuery.floatTheadのダウンロード＆設置
2. テーブル（表）を作成する
3. フッターでjsファイルを読み込んで実行コードを書く

以下では、「セル見出しを固定する方法」について詳しい手順について説明します。

jQuery.floatTheadのダウンロード＆設置

まずは、jQuery.floatTheadからファイルをダウンロードして解凍します。

ダウンロードした、「mkoryak-floatThead-x.x.x-x-xxxxxxxx.zip」ファイルを解凍して中にある以下のファイルを

• dist/jquery.floatThead.min.js

WordPressテーマ（子テーマ）内に以下のように設置します。

• テーマフォルダ/js/jquery.floatThead.min.js

テーブル（表）を作成する

コンテンツとなるテーブルは、以下のように作成します。

<table class="sangokushi">
<thead>
<tr>
<th>名</th>
<th>字</th>
<th>ヨミ</th>
<th>統 率</th>
<th>武 力</th>
<th>知 力</th>
<th>政 治</th>
<th>誕 生</th>
</tr>
</thead>
<tbody>
<tr>
<td>呂布</td>
<td>奉先</td>
<td>ﾘｮﾌ</td>
<td>94</td>
<td>100</td>
<td>25</td>
<td>16</td>
<td>156</td>
</tr>
<!-- 省略 -->
</tbody>
</table>

ここで、注意しなければいけないのは「ヘッダーセル（th）」となる行（tr）を<thead></thead>で囲むことです。

「データセル（td）」となる行（tr）も、<tbody></tbody>で囲みます。

フッターでjsファイルを読み込んで実行コードを書く

最後に、フッターの、</body>タグ手前あたりに以下のように記入します。

<!-- jQueryが読み込まれないテーマの場合コメントを解除 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.floatThead.min.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('table.sangokushi').floatThead();
});

//こっちの書き方でもOK
//(function($) {
//  $('table.sangokushi').floatThead();
//})(jQuery);
</script>

親テーマをカスタマイズして利用するにはget_stylesheet_directory_uri()の代わりにget_template_directory_uri()を使用してください。

WordPressで、JavaScriptを呼び出すには、wp_enqueue_script()を使うべきかもしれませんが、説明がややこしくなるのでタグで直接呼び出す方法を書いています。

WordPressのメインカラムで表示されるテーブルすべてに適用させる場合は、以下のように書くと#main配下のテーブルすべてに適用されます。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.floatThead.min.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#main table').floatThead();
});
</script>

※上記は、メインカラムに#mainを利用している場合の例です。

動作確認

で、実際の動作が以下のようになります。

今回は、サンプルとして最も簡単な実装方法を紹介しました。

配布元には、様々なオプションを利用して、いろいろな表示制御方法も掲載されています。詳しくは以下のページを参照してください。

参考 jQuery.floatThead

まとめ

というわけで、jQuery.floatTheadの使い方の紹介でした。

長いテーブルを記事などに掲載する際は、読み手に少し優しい表示になるかと思います。

ただ、利用するには、thead、tbodyタグをしっかりとマークアップする必要があるので、そこらへんは少し面倒なところかもしれません。

サイト jQuery.floatThead