WordPress   ※当サイトのコンテンツには広告が含まれる場合があります。

WordPressでテーブルを作るおすすめプラグイン【TablePress】

2023-08-20 yume-tada

how-to-use-tablepress-plugin

ブログでテーブルを簡単に作成できるWordPressのプラグインないかなあ?

Worried
お悩みさん

フィルタ機能が付いたテーブルが作成できるプラグインが欲しい!

findout
お調べさん
ゆめただのり
ゆめただ

そんなお悩みにお答えします!

TablePress」プラグインを使えば、無料でブログの記事に動的にフィルタ表示できるテーブルを作成できます。

ゆめただも、おすすめ書籍のリストに使っています

↓こんな感じ。

Table_Press_image10

テーブル作成から、フィルタ機能が付いたテーブルまで、カンタンに作成できます。

是非本記事を読んで、「テーブル作成」してみてください

本記事を読んでわかるコト

・TablePressのインストールから設定方法

・TablePressにフィルタ機能を追加する方法

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=1d17434a efd6 4f57 885e 9d4a9a231f04

今回使うプラグイン

プラグイン名:TablePress

WordPressプラグインページ:https://ja.wordpress.org/plugins/tablepress/

作者:Tobias Bäthge

概要:WordPress テーブル プラグインです。

   Web サイト上で美しくインタラクティブなテーブルを簡単に作成および管理できます

Table_Press_image2

ご注意!

最近、ゆめただはTablePressから別のプラグインへ乗り換えました

理由は、「検索・並び替え・レスポンシブ対応の横スクロールができなくなる」コトが多発したためです。

TablePressは無料プラグインの中で非常に使い易いプラグインですが

他のプラグインとのカニバリやjQuery等の設定が難しい場合があり注意が必要です。

乗り換え先のプラグインについては、下の記事で解説しています。

TablePressからの乗り換えプラグイン記事はこちら
Alternative-candidate-of-TablePress-plugin
TablePressで検索・並び替えが消えた時の乗り換えプラグイン

続きを見る

TablePressプラグインの導入方法

インストール

TablePressプラグインをインストールします。

管理画面

【プラグイン】

 管理画面の「プラグイン」ー「新規追加」をクリックします。

AF_lazyLoad_1

キーワードに「TablePress」と入力します。

「TablePress」が検索できます。

Table_Press_image11

「今すぐインストール」をクリックします。

Table_Press_image12

プラグインを有効化

「有効化」をクリックします。

Table_Press_image13

これでインストールは完了です。

具体的な使い方

テーブルにしたい表をEXCELで準備する

事前にテーブルにしたい内容を。EXCELの表などにして保存しておきます。

TablePressが読み込めるファイル形式は、「csv」「.xls」「.xlsx」「html」「json」です。

これらのいずれかでファイルを用意しておきます。

本記事では、EXCELファイル(.xlsx)で説明します。

Spreadsheets

作った表をインポートする

WordPressno管理画面で、「TablePress」を選択します。

Table_Press_image3

管理画面が表示されるので、「インポート」タブをクリックします。

Table_Press_image4

テーブルをインポートする画面が表示されるので、「ファイルを選択」をクリックします。

Table_Press_image5

読み込むEXCELファイルを指定してインポートします。

ファイルフォーマットは、csv .xls .xlsx html jsonが対応。

インポート形式が、「XSLX-Microsoft Excel2007-2019(experimental)」になっていることを確認。

Table_Press_image6

インポートが完了すると、このような画面になります。

ここで直接データを編集することも可能。

Table_Press_image7

テーブル情報を設定する

「テーブルの名前」、「説明」を設定します。

テーブルIDは自動に割り振られます。

ショートコード欄のコードをコピペして記録しておきます。

完成したら「変更を保存」をクリックして保存

Table_Press_image8

CSSで表示を調整

TablePressはCSSで表示を調整するカスタマイズができます。

「オプション」で、カスタムCSSから次のCSSコード記述して「均等表示」「線表示」を調整します。

お好みで追加してください。

CSS追加方法

「プラグインのオプション」タブをクリックし、「カスタムCSS」のところにコードをコピペします。

【CSSコード例】

th,
td {
	white-space: nowrap;
}

.dataTables_filter {
	float: left;
	margin-bottom: 20px;
	margin-right: 35px;
}

.tablepress-scroll-wrapper caption {
	display: none;
}

.post_content table {
	border: solid 1px #ededed;
}

.column-filter-widgets {
	display: flex;
	flex-direction: column;
}

.b-color1 {
	background-color: #ffe6f0;
}

.b-color2 {
	background-color: #eee6ff;
}

.b-color3 {
	background-color: #e6fbff;
}

.b-color4 {
	background-color: #f7f7f7;
}

/* 中央揃え */
.tablepress thead th,
.tablepress td {
	text-align: center;
}

.tablepress tbody td {
	vertical-align: middle;
}

/* 縦線追加 */
.tablepress thead th,
.tablepress tbody td,
.tablepress tbody th {
	border: 1px solid #ccc;
}

/* 先頭行、先頭カラム指定 */
.tablepress thead th {
	background-color: #ffa500;
	color: #403734;
	border: solid 1px #ccc;
	text-align: center;
}

/* .tablepress td.column-1 {
	font-size: 1em;
	padding: 10px;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
	background: #fffff0;
} */
/.tablepress td {
	font-size: .8em;
	text-align: center;
	border: solid 1px #ccc;

記事にショートコードを貼り付け

テーブルデータの準備ができたので、

先ほどコピーしたショートコードを、記事中でテーブルを表示したいところに追記します。

IDは、テーブル情報を作成したときに割り振られていたNo.です。

【ショートコード例】

[[table id=100 /]]
Code-typing

フィルタ検索機能を追加する

ボタンを押すと、指定したキーワードで表がフィルタ表示できるようにカスタマイズする方法です。

お好みで機能を追加してみてください。

イロイロ調べましたが、フィルタ機能について書いてある記事が見つけられず試行錯誤しました。

フィルタボタン拡張機能のダウンロード

ボタンを押すと、そこで指定したキーワードで検索しフィルタ表示できるようにカスタマイズします。

Data Tables Buttun Filteringのリンクから、「DataTables Button Filtering Extension 1.1」をダウンロード。

ダウンロードはこちらから:https://tablepress.org/extensions/datatables-button-filter/

zipファイル(tablepress-datatables-button-filter.zip)がダウンロードできます。

プラグイン機能を追加する

このファイルを指定して、プラグイン追加画面から機能を拡張します。

「プラグイン」ー「新規追加」をクリック

AF_lazyLoad_1

プラグインのアップロード」をクリック

Table_Press_image15

ファイルを選択」をクリック

Table_Press_image16

ダウンロードしたzipファイルを選択して、「開く」をクリック

Table Press image17

ファイルが表示されていることを確認して、「今すぐインストール」をクリック

Table Press image18

インストールが完了したら、「有効化」

「TablePress Extension:DataTables Button Filtering」がプラグイン一覧に追加されます。

Table Press image19

拡張CSSコードを追記する

次のコードを、検索ボタンを表示する位置(テーブルの上)に挿入します。

「検索文字1」「検索文字2」「検索文字3」で表をフィルタして表示できます

検索文字数だけ追加・削除して使ってください。

また、以下のショートコードを検索ボタンが有効になるように指定します。

(IDはテーブルで指定したもの)

<table>
<tr>
<td><button class="table-1-filter" data-filterterm="検索文字1">検索文字1</button></td>
<td><button class="table-1-filter" data-filterterm="検索文字2">検索文字2</button></td>
<td><button class="table-1-filter b-color1" data-filterterm="">全リスト表示</button></td>
</tr>
</table>

[table id=100 datatables_button_filter=true /]

使用上の注意点

注意点

過去に1度、TablePressプラグインが原因で、サイトデザインが崩れることがありました。

このときは、一時的にTablePressの使用を止めた時があります。

現在の最新版では、当サイトの環境では動作しています。

ゆめただのり
ゆめただ

プラグインの追加やコードの追加は、あなたのホームページに悪影響を与える可能性もあります。

あくまでも自己責任でお願いします。

-WordPress