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

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

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

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

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

ヨミ統率武力▼知力政治誕生
呂布奉先リョフ941002516156
張飛翼徳チョウヒ83983522167
関羽雲長カンウ93977764162
馬超孟起バチョウ91974644176
許褚仲康キョチョ66963923170
趙雲子龍チョウウン88967872168
顔良 ガンリョウ83954533160
文醜 ブンシュウ82952524161
甘寧興覇カンネイ87947813163
龐徳令明ホウトク75947248171
華雄 カユウ78935440155
黄忠漢升コウチュウ84936155148
周泰幼平シュウタイ81934833170
典韋 テンイ68933129160
夏侯淵妙才カコウエン91925164163
夏侯惇元譲カコウトン90926476157
魏延文長ギエン83926635175
孫策伯符ソンサク95927572175
太史慈子義タイシジ79926256166

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

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

スポンサーリンク
レクタングル(大)広告

jQuery.floatTheadとは

jQuery.floatThead

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

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

セルの中身が何のデータかわからない

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

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

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

スクロールしてもセル見出しが表示される

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

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

jQuery.floatThead使用の主な手順

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

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

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

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

まずは、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を利用している場合の例です。

    動作確認

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

    ヨミ統率武力知力▼政治誕生
    諸葛亮孔明ショカツリョウ923310098181
    左慈 サジ0010050157
    龐統士元ホウトウ80159884179
    郭嘉奉孝カクカ58109881170
    周瑜公瑾シュウユ98719791175
    司馬懿仲達シバイ97629794179
    賈詡文和カク81349784147
    陸遜伯言リクソン98669690183
    徐庶元直ジョショ88659680180
    荀彧文若ジュンイク51119699163
    法正孝直ホウセイ81489575176
    田豊元皓デンポウ58399590162
    李儒 リジュ61299470150
    荀攸公達ジュンユウ70219489157
    黄月英 コウゲツエイ60219488186
    魯粛子敬ロシュク90579393172
    沮授 ソジュ79319392156
    姜維伯約キョウイ85899266206
    鄧艾士載トウガイ91889276197

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

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

    参考 jQuery.floatThead

    まとめ

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

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

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

    サイト jQuery.floatThead

    『テーブルのヘッダーセルをスクロール固定できる「jQuery.floatThead」 WordPressでの使い方』へのコメント

    1. 名前:名無し 投稿日:2019/01/21(月) 16:11:04 ID:eeb48e4ca

      safariはサポートしてないと書いてましたが、動作しますか?

    2. アバター画像 名前:わいひら 投稿日:2019/01/23(水) 21:55:07 ID:a20fa8ab8

      申し訳ないですが、僕はSafariを持っていないので動作確認してないです。