WordPress – レスポンシブサイトでテーブルを実装するなら「FooTable」がいいね!


レスポンシブサイトでテーブルを実装するならjQuery「FooTable」がいいね!

 

WordPress-プラグイン「FooTable」とは

「PCサイトでテーブル作ったけど、スマホで見たときはみ出すからCSSで調整しないと!」

「いっそのことPC用とスマホ用二つ作ろう!」

なんてことはよくあるとかないとか。

jQuery「FooTable」なら簡単設定でPC用スマホ用と表示を切り替えてくれるし「ソート」「フィルタ」「ページネーション」も必要に応じて使えるのですごく便利!

PC表示時はスタイル通りの横長テーブルを表示。

スマホ表示時は見せたい見出しを表示して残りは折りたたまれる状態で表示してくれます。

ちなみに「FooTable」は、通常のHTMLサイトでも使えるし、Bootstrapを使用したサイトでも使える css/js もダウンロード出来る。
詳しくは:FooTable – jQuery Plugin for Resposive Tables or github/FooTable

 

今回は、WordPress-プラグインとして使う「FooTable」の紹介です。
どんなものかまずは見て触って確かめてみましょう!

 

WordPress-プラグイン「FooTable」の機能。

WordPress-プラグイン「FooTable」には「ソート」「フィルタリング」「ページネーション」の機能がそれぞれコード一行で表示・非表示と切り替える事が出来るようになっている。

デザインスタイルは 「Default」「MetroOriginal」「 Original FooTable Theme」「None (use custom CSS)」の4種から選択可能。

タブレット、スマホのブレイクポイントも任意で設定できる。

まずはどんなものか見て触って確かめてみましょう!

 

Footableの追加機能無しのデモ。

PC表示時はthに指定した5つの見出しが表示され、タブレット表示時は「施設名」「住所」「TEL」を表示、スマホ表示時は「施設名」「TEL」を表示するように設定。
画面を縮めて確かめてください。

施設名 住所 TEL FAX メール
北海道の園 北海道札幌市 001-111-1111 001-111-1112 hokkaidou@home.com
青森の園 青森県青森市 002-111-1111 002-111-1112 aomori@home.com
岩手の園 岩手県岩手市 003-111-1111 003-111-1112 iwate@home.com
宮城の園 宮城県宮城市 004-111-1111 004-111-1112 miyagi@home.com
秋田の園 秋田県秋田市 005-111-1111 005-111-1112 akita@home.com
山形の園 山形県山形市 006-111-1111 006-111-1112 yamagata@home.com
福島の園 福島県福島市 007-111-1111 007-111-1112 fukusima@home.com
茨城の園 茨城県茨木市 008-111-1111 008-111-1112 ibaraki@home.com
栃木の園 栃木県栃木市 009-111-1111 009-111-1112 totigi@home.com
群馬の園 群馬県群馬市 010-111-1111 010-111-1112 gunma@home.com
埼玉の園 埼玉県埼玉市 011-111-1111 011-111-1112 saitama@home.com
千葉の園 千葉県千葉市 012-111-1111 012-111-1112 tiba@home.com
東京の園 東京県東京市 013-111-1111 013-111-1112 tokyo@home.com

 

Footableの追加機能有りのデモ。

フィルタリング機能・ソート機能・ページネーション機能も簡単!

施設名 住所 TEL FAX メール
北海道の園 北海道札幌市 001-111-1111 001-111-1112 hokkaidou@home.com
青森の園 青森県青森市 002-111-1111 002-111-1112 aomori@home.com
岩手の園 岩手県岩手市 003-111-1111 003-111-1112 iwate@home.com
宮城の園 宮城県宮城市 004-111-1111 004-111-1112 miyagi@home.com
秋田の園 秋田県秋田市 005-111-1111 005-111-1112 akita@home.com
山形の園 山形県山形市 006-111-1111 006-111-1112 yamagata@home.com
福島の園 福島県福島市 007-111-1111 007-111-1112 fukusima@home.com
茨城の園 茨城県茨木市 008-111-1111 008-111-1112 ibaraki@home.com
栃木の園 栃木県栃木市 009-111-1111 009-111-1112 totigi@home.com
群馬の園 群馬県群馬市 010-111-1111 010-111-1112 gunma@home.com
埼玉の園 埼玉県埼玉市 011-111-1111 011-111-1112 saitama@home.com
千葉の園 千葉県千葉市 012-111-1111 012-111-1112 tiba@home.com
東京の園 東京県東京市 013-111-1111 013-111-1112 tokyo@home.com

 

スマホアクセス用イメージ画像

PC表示

FooTable

タブレット表示

FooTable

 

WordPress-プラグイン「FooTable」の使い方。

 

WordPress-プラグイン「FooTable」のインストールと有効化。

管理画面左メニュー「プラグイン」→「新規追加」をクリックしてプライグインを追加のページを表示。

プラグインの検索ボックスへ「FooTableを入力して検索

FooTable(作者:Brad Vincent)が表示されたら「今すぐインストール」をクリック。

FooTableの使い方

次の画面でプラグインの有効化をクリックして有効にしておきます。

インストールと有効化は完了。

 

WordPress-プラグイン「FooTable」の設定。

管理画面左メニュー「設定」→「FooTable」をクリックしてプライグインの設定画面を表示。

設定ページでは5つのタブメニュー「General」「Breakpoints」「Look & Feel」「Advanced」「Demo」がある。

 

簡単に説明すると

「General」テーブルの付けるクラス名(初期値:.footable)を任意で設定する項目や追加機能(ソート・フィルタリング・ページネーション)のオンオフが出来る。

「Breakpoints」タブレット・スマホのブレイクポイント数値変更設定、スマホ・タブレット表示時の列の最大数の設定。

「Look & Feel」デザインの選択と、オリジナル CSS の記述が出来る。

「Advanced」カスタムjsの追加やデバッグ機能のオンオフの設定。

「Demo」現在のテーマの確認や画面サイズ変更時の表示のされ方がわかる。

 

WordPress-プラグイン「FooTable」の記述。

コード記述のポイント

 

<table>タグにクラス .footable 必須。

<table>タグに以下の記述で機能無効化。

data-sort=”false” ソート機能の無効化。

data-filter=”false” フィルタリング機能の無効化。

data-page=”false” ページネーション機能の無効化。

 

<thead></thead> 内に th の見出し。

th に付けるコードとして

data-hide=”tablet” でタブレットサイズ表示時はその項目非表示。

data-hide=”phone” でスマホサイズ表示時はその項目非表示。

date-hide=”phone,tablet”  纏めて記述も可。

<tbody></tbody> 内に表記入。

 

デフォルトテンプレ

 

以上です。

 


この投稿へのコメント

  1. マルス said on 2016年12月18日 at 9:57 PM

    これが最近の悩みだったんです。お陰様で解決できました!
    WP初心者にも分かりやすい解説ありがとうございました。

    • MizuKazu said on 2016年12月18日 at 10:26 PM

      マルスさん
      コメントありがとうございます!
      お役に立ててこちらも嬉しいです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL