レスポンシブの表はどのテーマでも付属しているものの、並び替えや絞り込み検索、グラグ表示までカスタマイズできるテーブル(表)はなかなか無いですよね?
上記の機能が入ると表がデータベースとしても活用できるようになるのでとても便利です。
本記事では無料で拡張性が非常に高いプラグイン「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、DataTables Button Filteringの4つのデータをダウンロードして、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商品を貼るならこのプラグインが便利です!
