WordPressの表に並び替えや絞り込み検索を追加する方法と、値に応じた棒グラフ表示のカスタマイズを紹介します。テーマ標準の表で使える機能は、テーマによって異なります。
並び替えや検索を使うと、行数の多い表から必要な情報を探しやすくなります。
TablePressは無料版で表の作成・並び替え・検索ができるプラグインです。列固定などは公式のPremium機能と利用プランを確認してください。この記事の後半は旧拡張を使ったカスタマイズの記録で、現行版への導入手順とは異なります。
2026年10月12日の旧監査記録：確認範囲と未確認の点：2026年10月12日に公式の終了案内と掲載9コード枠を読み取りました。WAZAにはTablePressと旧拡張が導入されておらず、公開ページの表見本は展開されていません。現行の設定画面を撮影できないため、画像は旧構成の記録として保持しています。並び替え・検索・固定列・グラフ・合計表示の現在の動作は未確認です。
本文内とコード枠のショートコードは、入力例を示すための文字表示です。本ページではTablePressによる動作見本を実行していません。実際の表表示・並び替え・検索・グラフ・合計を試す場合は、検証用サイトで対象表を作成し、現行版が対応する属性と必要な拡張を確認してください。以下の旧拡張用属性が現在の無料版ですべて使えるとは限りません。
改修前のコードに関する監査記録：旧コードのボタンはフォーム内で送信ボタンになり得ます。グラフ例には全表を対象にする処理と同じIDを繰り返す指定があり、ヘッダーで実行すると表の描画前に終わる可能性があります。合計例の空データでの計算と変数・列指定も確認が必要です。旧コードを現行版で検証済みとは扱わず、導入前に対象の表へ範囲を限定して確認してください。
画像追加前の改修記録：2026年10月13日の改修例は、ボタンを type="button" にし、表ID1のボタン操作と棒表示に範囲を限定しています。棒は重複IDを使わずクラスで指定し、フッターからDOMの準備後に処理します。表ID2の合計は0始まりの列番号1を読み、列番号2のフッターへ表示します。空データは0、金額の形式が不正な場合は確認メッセージを表示し、小数は100倍した整数で計算します。検索・ページ送りを考慮した合計、限定したDOM、ボタン操作を代替APIで検証しました。実際のTablePress・DataTables・旧拡張との動作は未確認で、本サイトにコードを導入していません。旧ボタン用スクリプトと改修例を重ねず、対象表ID・列番号・フッター行を検証用サイトで確認してください。
motoki拡張性は非常に高いのですが､ちょっと難しいので記事を参考にしてみてください！
TablePressのサンプルデータ
TablePressのサンプルデータです｡
2026年10月13日、WordPress 7.1.3・TablePress 3.4.1無料版・Twenty Twenty-Five 1.5のLocal検証サイトで、この記事の改修例を架空データに適用しました。PC幅1280px・スマホ幅375pxで、昇順／降順の並び替え、文字検索、分類ボタン各5件、クリアで15件に戻ること、ページ送り、基準200cmに対する棒の割合を確認しました。スマホでは表を横スクロールして確認します。金額表は全件1,017.3円、1ページ目1,020.1円、2ページ目−2.8円、小数検索20.3円、負数検索−3円、検索0件は0円でした。対象外の通常表に変化はありません。以下はその実表示を撮影した画像です。
今回確認したのは無料版と掲載の改修例によるLocal動作です。旧拡張、Premiumの固定列機能、WAZA本番への導入、codocの購入者向け表示は未確認です。上の未確認注記は画像追加前の記録として残しています。この記事の表見本は画像で掲載し、本文のショートコードは入力例のままにしています。
<div class="waza-table-controls" data-table-id="tablepress-1">
<button type="button" class="waza-table-button b-color1" data-filterterm="特級呪術師">特級呪術師</button>
<button type="button" class="waza-table-button b-color2" data-filterterm="呪術高専">呪術高専</button>
<button type="button" class="waza-table-button b-color3" data-filterterm="高校1年生">高校1年生</button>
<button type="button" class="waza-table-button b-color4" data-filterterm="">クリア</button>
</div>
[[table id=1 responsive="scroll" responsive_breakpoint="all" datatables_fixedcolumns_left_columns = 1 datatables_fixedcolumns_right_columns = 0 datatables_button_filter = true /]]今回､拡張してみたのは以下の機能です｡
- レスポンシブ対応
- 列の固定
- 並び替え
- 検索絞り込み
- ボタンでの絞り込み
- グラフ表示
使い方がわかりやすいように動画もつけておきます｡
TablePressの表の作成方法
さっそくサンプルデータを再現してみましょう！
まずTablePressで検索してプラグインを入れましょう
旧Responsive Tables、DataTables FixedColumns、DataTables Buttonsは配布を終了しています。現在は目的に応じてPremiumのResponsive Tables、Fixed Rows and Columns、User Action Buttonsを確認します。無料版で横スクロールにする場合は、表の編集画面の「Table Features for Site Visitors」にある「Horizontal Scrolling」を使います。
以下の画像・拡張属性・CSSは旧構成の記録です。旧拡張を探して一括インストールせず、使用中のTablePressの版と機能を確認してください。Button Filteringは個別の公式案内に従い、他の終了済み拡張とは分けて扱います。旧コードは現行版へそのまま貼り付けないでください。
新規追加からテーブルを作成しましょう｡
当時の画像ではページ送りと情報表示をOFFにしていますが、必須の設定ではありません。行数が多い表や、後述のページ別合計を使う例ではページ送りを有効にして確認してください。
最後に記事を作成してショートコード[[table id=1 /]]を入れるを表が表示されるようになります！
デフォルトで項目を押すと昇降順に並び替えができます！
（※画像で見えているバーの作り方は後述します）
基本の使い方は以上です｡
TablePressの表のカスタマイズ方法
ここからは、対象の表だけに見た目や操作を追加する方法を紹介します。
CSSのカスタマイズ（改行なし・枠線・ボタンの背景色）
以前のCSSには、他の表にも及ぶth,td指定と、表の説明を隠すcaption指定がありました。下のコードは、これらを見直した改修例です。旧画像内のCSSではなく、対象の表IDに合わせた掲載コードを使ってください。
以下の改修例では、表ID1と2だけへCSSを適用し、表の説明であるcaptionを隠す指定を外しています。検索欄の配置など、現行のTablePress・DataTablesのDOMに依存する調整は含めていません。
- nowrapで改行無し
- ボタンのクラスごとに背景色を指定
- captionと編集ボタンは非表示にしない
- borderでテーブルの線を追加
.tablepress-id-1 th, .tablepress-id-1 td,
.tablepress-id-2 th, .tablepress-id-2 td { white-space: nowrap; }
.tablepress-id-1, .tablepress-id-2 { border: solid 1px #ededed; }
.waza-table-controls .b-color1 { background-color: #ffe6f0; }
.waza-table-controls .b-color2 { background-color: #eee6ff; }
.waza-table-controls .b-color3 { background-color: #e6fbff; }
.waza-table-controls .b-color4 { background-color: #f7f7f7; }
/* Captions remain visible. No global th/td or all-article-table selectors. */
拡張機能の追加（レスポンシブ･列固定･絞り込みボタン）
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に
motoki現行の設定名・ショートコード属性は公式ドキュメントで確認してください。旧属性を使った以下の見本は、同じ拡張が動作する既存環境の保守資料です。
下記は改修例のボタンHTMLです。HTMLだけでは検索できず、後半の有料部分に掲載したjQuery処理と組み合わせます。旧Button Filtering拡張の公式例とはクラス名が異なるため、旧拡張用のボタンHTMLと混在させないでください。
data-filtertermのところに絞り込み検索したいキーワードを入れましょう！
<div class="waza-table-controls" data-table-id="tablepress-1">
<button type="button" class="waza-table-button b-color1" data-filterterm="特級呪術師">特級呪術師</button>
<button type="button" class="waza-table-button b-color2" data-filterterm="呪術高専">呪術高専</button>
<button type="button" class="waza-table-button b-color3" data-filterterm="高校1年生">高校1年生</button>
<button type="button" class="waza-table-button b-color4" data-filterterm="">クリア</button>
</div>
スクリーンショット画像も入れておきます｡
以上で更新して記事を表示してみましょう！
さきのサンプルデータが今回の結果になります｡
検索欄のカスタマイズ
検索欄にプレースホルダテキストを入れたい場合は､カスタム コマンドに下記のコマンドを入れてあげましょう｡
"language": $.extend( {}, DataTables_language["ja"], { "searchPlaceholder": "テーブル内検索" } )
さらに検索:の文字が邪魔な場合は下記のChange DataTables stringsのプラグインをインストールします｡
文言の変更
あとは下記の内容を含んだlang-ja.jsonというファイルを作成
{
"info": "_TOTAL_ 件中 _START_ から _END_ まで表示",
"infoEmpty": "0 件中 0 から 0 まで表示",
"infoFiltered": "全 _MAX_ 件より抽出）",
"infoPostFix": "",
"lengthMenu": "_MENU_ 件表示",
"processing": "処理中...",
"search": "",
"zeroRecords": "データはありません。",
"paginate": {
"first": "先頭",
"previous": "前",
"next": "次",
"last": "最終"
},
"decimal": "",
"thousands": ","
}最後に/wp-content/plugins/tablepress-change-datatables-stringsのフォルダの中にFTPで格納すればこちらの文字が優先的に反映されます｡文言を変えたい時はこの方法を使いましょう｡
※ちなみにオリジナルは/wp-content/plugins/tablepress/i18n/datatables/lang-ja.jsonの中にあります｡
検索範囲の指定
カスタムコマンドに下記のコマンドを追加して、検索範囲外の列を入力することで検索範囲を絞る事ができます。
"columnDefs": [ { "searchable": false, "targets": [ 0, 1, 2, 3, 5 ] } ]
表が6列の場合、上記は5列目（0始まりの列番号4）だけを検索対象にします。7列目以降がある表では、その列も検索対象に残るため、対象外にする列番号を追加してください。
ここからは有料コンテンツになります。
- バーのグラフ表示
- テーブルの最後の行に合計値を計算する
TablePress無料版3.4.1の管理画面例
2026年10月13日に、新規Local環境（WordPress 7.1.3、PHP 8.1.23、Twenty Twenty-Five 1.5、TablePress無料版3.4.1）へ用意した架空表で、管理画面の設定項目を撮影しました。WAZAの本番表データや顧客情報を複製したものではありません。前の表の動作確認とは別に、ここでは項目名と配置を確認しています。
Table Optionsには見出し行、フッター行、行の色などがあります。Table Features for Site VisitorsにはSorting・Search/Filtering・Horizontal Scrollingなどが並びます。この見本では並び替えと検索はチェック済み、横スクロールは未チェックの状態です。写真は機能の場所を示すもので、読者の表に推奨する一律の設定ではありません。
プラグインオプションではCustom Styling区分にCustom CSS欄があります。表のExtra CSS Classes欄と、CSSコードを書く欄は区別してください。今回はCSS入力・設定変更・Save Changes・プレビュー生成を行っていません。旧拡張やPremiumの機能、購入者向けの有料公開表示、本番サイトでの動作は引き続き未確認です。旧画像・コード・以前の未検証注記は残しています。
公開ページのコード表示を確認した範囲
2026年10月13日、現在のログイン済みChromeで公開ページを開き、無料6枠・有料3枠の全9コード枠が保存原稿と一致することを確認しました。PC幅1280px・スマホ幅375pxでコード枠の書式・横スクロールと、画像34枚の読み込みを確認しています。これはこのログイン状態での公開表示確認で、購入者の別アカウントや新規購入・購入復元の試験ではありません。
掲載の改修例の動作は、前述のLocal環境のTablePress 3.4.1無料版と架空データで確認した範囲です。旧拡張・Premium・本番へのコード導入は検証していません。以前の未確認注記は、それぞれの確認時点の記録として残しています。
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
