2026年5月20日
2026年5月20日
TablePressの使い方|表の作成・埋め込み・並べ替えと検索・CSVインポート・CSS
TablePress は、WordPress の管理画面で表を作り、投稿や固定ページに埋め込めるプラグインです。表のデータは投稿とは別に保存されるので、同じ表を複数のページに出したり、表だけを更新したりできます。サイトの訪問者が表を並べ替えたり、検索したりできる機能(DataTables という JavaScript ライブラリを使用)も付いています。
この記事の手順と画面名は、2026年11月時点の TablePress 3.4.1・WordPress 7.1 で確認しました。日本語の管理画面でも、表の編集画面の一部の項目(Table Options の各項目など)は日本語訳が無く、英語のまま表示されます。この記事では画面の表記をそのまま書いています。
インストールする
「プラグイン」→「新規プラグインを追加」で「TablePress」を検索してインストールし、有効化します。WP-CLI なら次のとおりです。
wp plugin install tablepress --activate
有効化すると、管理メニューに「TablePress」が追加されます。サブメニューは「すべてのテーブル」「新しいテーブルを追加」「テーブルをインポート」「テーブルをエクスポート」「プラグインのオプション」などです。
表を作る
- 「TablePress」→「新しいテーブルを追加」を開きます。
- 「テーブルの名前」(例: 料金表)を入れ、「行数」と「列数」を指定して「テーブルを追加」を押します。説明は任意です。行と列は、あとから編集画面で増減できます。
- 編集画面の「テーブルの内容」で、表計算ソフトのようにセルへ入力します。
- 画面上部の「変更を保存」を押します。「プレビュー」で、サイト上での見え方を確認できます。
3行3列の料金表なら、たとえば次のように入れます(A〜C は列の名前で、1行目がヘッダーになります)。
| A | B | C |
|---|---|---|
| プラン | 月額 | 内容 |
| スタンダード | 980円 | 基本機能 |
| プロ | 1,980円 | 全機能 |
セルには HTML も書けます。編集画面のツールバーから、リンクや画像の挿入、セルの結合もできます。ただし、本文の行(ヘッダー以外)で結合したセルがある表では、次に説明する並べ替え・検索などの機能を使えません。
表のオプション(Table Options)
編集画面の「テーブルのオプション」にある主な項目です。
| 項目 | 内容 | 新規作成時 |
|---|---|---|
| Table Header | 先頭の何行をヘッダー(th)にするか | 1行 |
| Table Footer | 末尾の何行をフッターにするか | 0行 |
| Alternating Row Colors | 1行おきに背景色を変える | オン |
| Row Hover Highlighting | マウスを乗せた行の背景色を変える | オン |
| Print Table Name / Description | 表の名前や説明を表の上下に表示する | オフ |
| Extra CSS Classes | 表に CSS クラスを追加する | 空 |
投稿や固定ページに表を埋め込む
ブロックエディターの場合
- 投稿の編集画面で、ブロックの追加から「TablePress table」ブロックを選びます。
- 右側の設定サイドバーで、表示したい表を選びます。
ショートコードの場合
編集画面の「Table Information」欄に、その表のショートコードが表示されています(コピー用のボタンもあります)。ID が 1 の表なら次の形です。ブロックエディターではショートコードブロックに貼り、クラシックエディターでは本文に貼ります。
[table id=1 /]
ショートコードでは、表ごとの設定をその場所だけ変えるパラメーターも使えます。
[table id=1 use_datatables=false /]
[table id=1 print_name=true /]
[table id=1 hide_columns=3 /]
1行目は並べ替え・検索などの機能を切った表示、2行目は表の名前を見出しとして表示、3行目は3列目を隠した表示です。
なお、表の ID(ショートコードの id)は、WordPress の投稿 ID とは別の番号です。
並べ替え・検索・ページ送りを設定する
編集画面の「Table Features for Site Visitors」で、訪問者向けの機能を選びます。新しく作った表では、どれも最初からオンになっています。
| 項目 | 内容 |
|---|---|
| Enable Visitor Features | このセクションの機能全体のオン・オフ |
| Sorting | 見出しのクリックで並べ替え |
| Search/Filtering | 検索欄。入力した語を含む行だけを表示 |
| Pagination | ページ送り。「Show 10 rows per page.」の数字で1ページの行数を指定 |
| Pagination Length Change | 1ページの行数を訪問者が変えられるようにする |
| Info | 「全何件中何件目」の表示 |
| Horizontal Scrolling | 列が多い表を横スクロールにする |
これらの機能は、「テーブルのオプション」で Table Header を1行以上にしている場合だけ使えます。検索欄やページ送りの文言は、サイトの言語が日本語なら日本語で表示されます。
数行しかない料金表のような表では、検索欄とページ送りはかえって邪魔になります。「Enable Visitor Features」をオフにするか、必要な機能だけを残してください。
Custom Commands で細かく指定する
同じセクションの「Custom Commands」には、DataTables の初期化オプションを書けます。TablePress がこの内容を { と } で囲んで DataTables に渡すので、外側の波かっこは書きません。
たとえば、最初に表示するときに2列目の昇順で並べるには次のように書きます(列は0から数えます)。
"order": [[1, "asc"]]
複数のオプションはカンマで区切ります。
"order": [[1, "asc"]], "pageLength": 25
ここに書いた項目は、上の表の設定より優先されます。書き方を間違えると表の機能が動かなくなるので、保存後に「プレビュー」で確認してください。
CSV や Excel から取り込む
- 「TablePress」→「テーブルをインポート」を開きます。
- 「インポートのソース」で、ファイルアップロード・URL・手動入力(貼り付け)などから選び、ファイルを指定します。
- 「新しいテーブルとして追加」「既存のテーブルを置き換え」「既存のテーブルに行を追加」から取り込み方を選び、取り込みます。
readme によれば、取り込みと書き出しは Excel・CSV・HTML・JSON に対応しています。複数の表を ZIP ファイルにまとめて取り込むこともできます。
CSV の文字コードに注意
Excel で日本語を含む表を「CSV」形式で保存すると、文字コードが Shift_JIS になることがあります。TablePress は取り込み時に文字コードを UTF-8・ISO-8859-1・ASCII の中から判定して変換するため、Shift_JIS の CSV は文字化けします。次のどちらかで取り込んでください。
- Excel で「CSV UTF-8(コンマ区切り)」を選んで保存する
- CSV にせず、.xlsx ファイルのまま取り込む
表のデータの保存場所
TablePress の表は、投稿タイプ tablepress_table の投稿として保存されます。表の中身は本文(post_content)に JSON 形式で、表のオプションは投稿メタ _tablepress_table_options に入ります。表の ID と投稿 ID の対応は、オプション tablepress_tables にあります。
# 表の一覧(ID は投稿 ID)
wp post list --post_type=tablepress_table --fields=ID,post_title
# 表の ID と投稿 ID の対応("table_post":{"1":5} なら表1は投稿5)
wp option get tablepress_tables
バックアップや別サイトへの移行には、「テーブルをエクスポート」で JSON 形式に書き出す方法が使えます。
CSS で見た目を変える
CSS は「TablePress」→「プラグインのオプション」の「カスタム CSS」に書き、「この “カスタム CSS” コードを読み込んで、テーブルのスタイルを変更します」にチェックを入れて保存します。テーマの「追加 CSS」に書いても効きます。
TablePress 3 の標準 CSS は、色や余白を CSS 変数で決めています。変数を上書きすると、少ない記述で色を変えられます。
/* すべての表 */
.tablepress {
--head-bg-color: #1d2327;
--head-text-color: #fff;
--even-bg-color: #f6f7f7;
--hover-bg-color: #e8f0fe;
--border-color: #c3c4c7;
}
/* ID が 1 の表だけ、1列目を太字にする */
.tablepress-id-1 tbody .column-1 {
font-weight: bold;
}
使える変数には、--text-color、--head-bg-color、--head-text-color、--odd-bg-color、--even-bg-color、--hover-bg-color、--border-color、--padding などがあります。各表には tablepress-id-<表のID> というクラスが付き、セルには column-1、行には row-1 のようなクラスが付くので、特定の表・列・行だけを指定できます。
使うときの注意
- 並べ替えや検索などの機能を使う表がページにあると、DataTables の JavaScript が読み込まれます。TablePress 3.4 では jQuery にも依存しています。機能を使わない表では「Enable Visitor Features」をオフにすると、読み込まれません。
- ページ送りを使っても、表のすべての行が HTML に出力されたうえで、ブラウザー側で表示を切り替えます。行数の多い表ではページが重くなるので、表を分けることも考えてください。
- 列の多い表は、スマートフォンでは横にはみ出します。「Horizontal Scrolling」をオンにするか、列を減らします。