この記事の所要時間: 248

WordPressでのテーブル表示は結構面倒なので、『TablePress』などのプラグインを使用している方も多いと思います。
非常に便利なプラグインですが、無料版の場合、レスポンシブ対応していないため、横長のテーブルだとだとスマホで表示した場合にTableがはみ出してみっともない自体に。

そんな『TablePress』のスマホ対応すべくレスポンシブ化の方法探していて見つけたのがWordpressプラグインの『FooTable』です。今回は、導入〜設定方法まで紹介します。

WordPressプラグイン『FooTable』とは

『FooTable』は、元々はJQueryのプラグインで、テーブルをレスポンシブ化ためのスクリプトです。
そのJQuery版をWordpress用にプラグイン化して、さらに『TablePress』と連携できるようにしたものがWordpress用プラグイン『FooTable』となります。

FooTable自体は、もちろん単体でも動作しますが、今回は『TablePress』と組み合わせての利用を前提に紹介します。

導入手順

プラグインのインストール

WordPressの公式ディレクトリに登録されていますので、「FooTable」と検索入力すれば簡単にインストール可能です

プラグインの更新は止まっていますが、現在も不具合なく利用できています。が、利用は自己責任でお願いします。

設定方法

今回は、『TablePress』との併用を前提としていますので、最低限必要な設定部分のみ紹介します。

1.generalタブ(一般設定)
・【Attach to TablePress tables】をチェック ⇢ 『TablePress』で作成したTableがレスポンシブ化!!

  1. Breakpointsタブ(ブレイクポイントの設定)
    ブレイクポイントの設定については、以下の項目をお使いのテーマ等に合わせて設定してください。
    ・【Tablet Breakpoints】 ⇢ タブレット表示に切り替わる画面横幅サイズを入力
    ・【Phone Breakpoints】 ⇢ スマホ表示に切り替わる画面横幅サイズを入力

基本的な使い方

『FooTable』の一般設定で【Attach to TablePress tables】にチェックを入れた場合、あとは『TablePress』オプションの「テーブルの最初の行をテーブル見出しにする」にチェックを入れるだけ。自動でテーブルの最適化をしてくれます。

機能の重複に注意!!

Tableのフィルターや並び替えなど、『TablePress』と『FooTable』どちらも機能として用意してありますが、プラグイン同士の競合で不具合が起きるおそれがあるため、
ソート機能やフィルター機能、ページ分割機能、などはどちらか一方でのみ有効化したほうがいいと思います。

まとめ

従来から『TablePress』を利用しているユーザにとって、いくらレスポンシブ化の必要があったとしてもまた一からTableを制作するのは抵抗あると思います。
追加プラグインのインストールと簡単な設定だけで、レスポンシブ化できる『FooTable』プラグイン、非常におすすめです!!困っている方いたらぜひ!