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」が追加されます。サブメニューは「すべてのテーブル」「新しいテーブルを追加」「テーブルをインポート」「テーブルをエクスポート」「プラグインのオプション」などです。

表を作る

  1. 「TablePress」→「新しいテーブルを追加」を開きます。
  2. 「テーブルの名前」(例: 料金表)を入れ、「行数」と「列数」を指定して「テーブルを追加」を押します。説明は任意です。行と列は、あとから編集画面で増減できます。
  3. 編集画面の「テーブルの内容」で、表計算ソフトのようにセルへ入力します。
  4. 画面上部の「変更を保存」を押します。「プレビュー」で、サイト上での見え方を確認できます。

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 クラスを追加する 空

投稿や固定ページに表を埋め込む

ブロックエディターの場合

  1. 投稿の編集画面で、ブロックの追加から「TablePress table」ブロックを選びます。
  2. 右側の設定サイドバーで、表示したい表を選びます。

ショートコードの場合

編集画面の「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 から取り込む

  1. 「TablePress」→「テーブルをインポート」を開きます。
  2. 「インポートのソース」で、ファイルアップロード・URL・手動入力(貼り付け)などから選び、ファイルを指定します。
  3. 「新しいテーブルとして追加」「既存のテーブルを置き換え」「既存のテーブルに行を追加」から取り込み方を選び、取り込みます。

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」をオンにするか、列を減らします。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲