レスポンシブの表はどのテーマでも付属しているものの､並び替えや絞り込み検索､グラグ表示までカスタマイズできるテーブル（表）はなかなか無いですよね？
上記の機能が入ると表がデータベースとしても活用できるようになるのでとても便利です｡
本記事では無料で拡張性が非常に高いプラグイン｢TablePress（テーブルプレス）｣のカスタマイズ方法を紹介いたします｡
すいみん拡張性は非常に高いのですが､ちょっと難しいので記事を参考にしてみてください！
TablePressのサンプルデータ
TablePressのサンプルデータです｡
| 名前 | 身長（cm） | 読み仮名 | 所属 | 等級 | 誕生日 | 年齢 | 使用術式 | 領域展開 |
|---|---|---|---|---|---|---|---|---|
| 虎杖 悠仁 | 173 | いたどり ゆうじ | 呪術高専 東京校（生徒） | 1級査定保留中 | 3月20日 | 高校1年生 | 逕庭拳(けいていけん)黒閃(こくせん) | 伏魔御廚子(ふくまみづし) |
| 伏黒 恵 | 175 | ふしぐろ めぐみ | 呪術高専 東京校（生徒） | 1級査定保留中 | 12月22日 | 高校1年生 | 十種影法術(とくさのかげほうじゅつ) | 嵌合暗翳庭(かんごうあんえいてい) |
| 釘崎 野薔薇 | 160 | くぎさき のばら | 呪術高専 東京校（生徒） | 1級査定保留中 | 8月7日 | 高校1年生 | 芻霊呪法(すうれいじゅほう) | - |
| 五条 悟 | 190 | ごじょう さとる | 呪術高専 東京校（教師） | 特級呪術師 | 12月7日 | 28歳 | 無下限呪術 | 無量空処(むりょうくうしょ) |
今回､拡張してみたのは以下の機能です｡
- レスポンシブ対応
- 列の固定
- 並び替え
- 検索絞り込み
- ボタンでの絞り込み
- グラフ表示
使い方がわかりやすいようにGIF動画もつけておきます｡
TablePressの表の作成方法
さっそくサンプルデータを再現してみましょう！
プラグインのインストール
まずTablePressで検索してプラグインを入れましょう
あとはTablePressにはTablePress Extensionsという拡張プラグインがありますので､こちらをいくつか入れておきましょう！
まずはレスポンシブ対応にするResponsive Tablesと列を固定するDataTables FixedColumns､ボタン機能をつけるDataTables Buttonsの3つのデータをダウンロードして､ZIPデータをプラグインのアップロードボタンからインストールしましょう｡
テーブルの作成
新規追加からテーブルを作成しましょう｡
ページ送りと情報のチェックをOFFにしましょう｡
作成した表の確認
最後に記事を作成してショートコード[table id=1 /]を入れるを表が表示されるようになります！
デフォルトで項目を押すと昇降順に並び替えができます！
（※画像で見えているバーの作り方は後述します）
基本の使い方は以上です｡
TablePressの表のカスタマイズ方法
このままだと普通のテーブル似すぎないので､カスタマイズしてみましょう！
CSSのカスタマイズ（改行なし･編集ボタンなし･検索を左寄せ）
プラグインオプションから下記のCSSを入れましょう｡見やすくなります！
- nowrapで改行無し
- floatで検索を左寄せ
- displayで編集ボタンの表示を消し
- borderでテーブルの線を追加
拡張機能の追加（レスポンシブ･列固定･絞り込みボタン）
TablePressの拡張機能は基本的にはショートコードにコマンドを追加して機能を反映させます｡
ショートコードを下記に変更しましょう｡[table id=1 responsive="scroll" responsive_breakpoint="all" datatables_fixedcolumns_left_columns = 1 datatables_fixedcolumns_right_columns = 0 datatables_button_filter = true /]
- responsiveでスクロールの指定
- responsive_breakpointでレスポンシブのタイミングの設定
- datatables_fixedcolumns_left_columnsで左側1列の固定
- datatables_button_filter でボタン表示をONに
すいみん細かいオプションを知りたい場合はダウンロードしたページを見ましょう！
あとはボタン用のカスタムHTMLも追加してあげます｡
data-filtertermのところに絞り込み検索したいキーワードを入れましょう！
<button class="table-1-filter b-color1" data-filterterm="特級呪術師">特級呪術師</button>
<button class="table-1-filter b-color2" data-filterterm="呪術高専">呪術高専</button>
<button class="table-1-filter b-color3" data-filterterm="高校1年生">高校1年生</button>
<button class="table-1-filter b-color4" data-filterterm="">クリア</button>スクリーンショット画像も入れておきます｡
以上で更新して記事を表示してみましょう！
さきのサンプルデータが今回の結果になります｡
検索欄のカスタマイズ
検索欄にプレースホルダテキストを入れたい場合は､カスタム コマンドに下記のコマンドを入れてあげましょう｡
"language": $.extend( {}, DataTables_language["ja"], { "searchPlaceholder": "テーブル内検索" } )
さらに検索:の文字が邪魔な場合は下記のChange DataTables stringsのプラグインをインストールします｡
文言の変更
あとは下記の内容を含んだlang-ja.jsonというファイルを作成
最後に/wp-content/plugins/tablepress-change-datatables-stringsのフォルダの中にFTPで格納すればこちらの文字が優先的に反映されます｡文言を変えたい時はこの方法を使いましょう｡
※ちなみにオリジナルは/wp-content/plugins/tablepress/i18n/datatables/lang-ja.jsonの中にあります｡
バーのグラフ表示
実はテーブルの値にはHTMLを挿入することができます｡
今回は身長の項目に下記のdivタグを入れてみました｡
<div id="param">173</div>身長の項目にタグを入れた後は下記のCSSを追加しましょう｡
#param {
background-color: #f4ff99;
font-weight: bold;
margin: 1px 0px;
border: 1px solid #ddd;
text-align: center;
}下記の様にバーが表示されるはずです｡
あとは#Paramに入っている値を取得して､計算した後にCSSのWidth値でバーを可変表示させてみましょう｡
jQuery（JavaScript）で動的にCSSを追加してあげます｡
下記のコードをfunctions.phpに入れましょう｡
※1 #Paramの値と最大値の値を%に変換してCSSのWidth値として入力しています｡
※2 eq()は0から始まる指定したい順番を入れています｡今回は2列目なのでeq(1)としています｡
すいみん単位によって計算式は変えましょう！
こちらは下記のサイトを参考に再現してみました｡
検索範囲の指定
カスタムコマンドに下記のコマンドを追加して、検索範囲外の列を入力することで検索範囲を絞る事ができます。
"columnDefs": [ { "searchable": false, "targets": [ 0, 1, 2, 3, 5 ] } ]
上記の場合は5列目（4）だけが検索範囲になります。
テーブルの最後の行に合計値を計算する
フィルターに合わせて動的に合計値が可変します。
その他の拡張機能
他にも細かいところでカスタマイズできるので､気になる方は下記のTablePress Extensionsのまとめページも参考にしてみてください
すいみん拡張プラグインの豊富ですが､たくさん入れてしまうと競合することもあるので､必要なものだけ厳選して入れましょう！
TablePressの作成方法まとめ
本記事では｢【WordPress】並び替えや絞り込み検索もできる表作成プラグインの紹介［TablePress］について書きました｡
TablePressをカスタマイズするとデータベースとしても有用な表に生まれ変わります｡
すいみん気になる方は是非試してみてください｡
Rinker
すいみんAmazon商品を貼るならこのプラグインが便利です！
