6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

【WordPress】並び替えや絞り込み検索もできる表作成プラグインの紹介[TablePress]

wordpress-tablepress

レスポンシブの表はどのテーマでも付属しているものの、並び替え絞り込み検索グラグ表示までカスタマイズできるテーブル(表)はなかなか無いですよね?

上記の機能が入ると表がデータベースとしても活用できるようになるのでとても便利です。

本記事では無料で拡張性が非常に高いプラグイン「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の表の作成方法

さっそくサンプルデータを再現してみましょう!

STEP

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

まずTablePressで検索してプラグインを入れましょう

あとはTablePressにはTablePress Extensionsという拡張プラグインがありますので、こちらをいくつか入れておきましょう!

まずはレスポンシブ対応にするResponsive Tablesと列を固定するDataTables FixedColumns、ボタン機能をつけるDataTables Buttons3つのデータをダウンロードして、ZIPデータをプラグインのアップロードボタンからインストールしましょう。

STEP

テーブルの作成

新規追加からテーブルを作成しましょう。

ページ送りと情報のチェックをOFFにしましょう。

STEP

作成した表の確認

最後に記事を作成してショートコード[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>

スクリーンショット画像も入れておきます。

以上で更新して記事を表示してみましょう!

さきのサンプルデータが今回の結果になります。

変更した時はShift+F5でスーパーリロードしないと変更が反映されない場合があるので注意してください。

検索欄のカスタマイズ

検索欄にプレースホルダテキストを入れたい場合は、カスタム コマンドに下記のコマンドを入れてあげましょう。

"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商品を貼るならこのプラグインが便利です!

【Rinker】商品ごとのクリック数の計測方法

目次
閉じる