絞り込み検索可能なテーブルを簡単作成!WordPressプラグイン「TablePress」

どうも、さくたろうです(@Up_Income)。

今日はWordPressプラグインの紹介です。

記事内に多機能なテーブル(表)を簡単に追加できるプラグイン「TablePress」です。

では、早速。

TablePressとは?

簡単に投稿ページ、固定ページ、ウィジット内にショートコードを用いてテーブルを表示することができるプラグインです。

ただ表示するだけでなく以下の便利な機能が使えます。

  • 絞り込み検索(フィルター)機能
  • ソート機能
  • 分割機能
TablePress
コードを書く必要なしに、美しく機能豊富なテーブルを投稿やページに埋め込めます。

インストール方法

管理画面左側メニューの[プラグイン] → [新規追加]をクリック

161203-0004

プラグイン追加画面で「tablepress」で検索し[今すぐインストール]をクリック

161203-0005

最後に[有効化]をクリックしてインストールは完了です。

テーブル作成・編集

それでは実際にテーブルを作成していきましょう。

テーブル新規作成

TablePress内の[新しいテーブルを追加]をクリック

tablepress_newtable_1

必要な情報を入力し、[テーブルを追加]をクリック

tablepress_newtable_2

行・列の追加と削除

変更したい場所にチェックをいれた状態で、テーブルの操作項目を選択します。

tablepress_edit

行・列の順列変更

行番号、列名部分をドラッグ&ドロップすることで順序を入れ替えることが可能です。

tablepress_change_order

セルの結合

セルを行内で結合する時は結合させたいセルに    #colspan#    と入力。
セルを列内で結合する時も結合させたいセルに    #rowspan#    と入力。

入力後の状態

tablepress_input_example

実際の表示

tablepress_after_joint

記事内でテーブルを表示する方法

テーブルを作成すると各テーブルにidが割り振られ、下記のようなショートコードが生成されます。

[table id=N /]

これを記事内の表示したい場所に貼り付けるだけです。

テーブルデザインのカスタマイズ

デザインはCSSコードを書くことで変更可能です。

TablePressメニューの[プラグインのオプション]をクリック。

tablepress_option

カスタムCSSのスペースにCSSのコードを書いていきます。

tablepress_css_input

デザインのカスタマイズ適応範囲を指定する

CSSの書き方でデザイン変更の適応範囲をコントロールできます。

作成したテーブル全てに適応させる場合

.tablepress

テーブル個別に適応させる場合

.tablepress-id-N

Nのところにデザインを変更したいテーブルのidを入れます。

では、実際のカスタマイズ例をお見せします。

セルの縦枠線を表示する

デフォルトの状態では縦枠線が表示されていません。

表示したい場合は下記のコードを追加します。

コード

.tablepress td,
.tablepress th {
    border: 1px solid #ccc;
}

実際の表示

tablepress_css_border

特定セルの文字配置を中央揃えにする

コード

.tablepress-id-1 .row-1 .column-1 , /*タイプ*/
.tablepress-id-1 .row-1 .column-2   /*基本データ容量*/
{
    text-align:center;     /*横中央揃え*/
    vertical-align:middle;     /*縦中央揃え*/
}

.row-○          :○行目を指定
.column-○    :○列目を指定

○部分の数字を変更することで任意のセルの指定が可能です。

結合したセルの場合は結合範囲の先頭セルの位置を指定します。

実際の表示

tablepress_css_center

特定のセルの背景の色を変更する

コード

.tablepress-id-1 .row-3 .column-4,
.tablepress-id-1 .row-4 .column-4 {
    background-color: #ffeeee;
}

実際の表示

tablepress_css_backgroundcolor

インポート機能を使用したテーブルの作成

csv形式や、xls形式、WEB上からインポートしてテーブルを作成することができます。

大量のデータがある場合は手入力では大変です。インポート機能を使用してサクッと作りましょう。

TablePressメニューの[テーブルをインポート]をクリック。

tablepress_import_table_1

ソースとインポート形式を選択し、[インポート]をクリック。

tablepress_import_table_2

ファイルアップロードの場合は、[ファイルを選択]からインポートしたいファイルを選択します。

また、URLを指定してインポート形式をHTMLにすることでWEBサイト上のテーブルもインポートすることができます。ただし、ページ内の最初のテーブルのみの取得となるようです。

絞り込み検索(フィルター)機能

テーブル作成画面において下記部分にチェックをいれることで、絞り込み検索機能が使えるようになります。

tablepress_filter

こんな感じです。逃げ恥の今月の心のベストテンを並べてみました。^^

検索欄に何か文字を入力してみてください。(百合など)

順位先月の心のベストテン今月の心のベストテン総合得点
1今日はちゃんと先に寝てください

津崎平匡
9999
2君の作る料理が好きだ

津崎平匡
9196
3僕らの罪悪感は僕らで背負う

津崎平匡
8236
4僕らの罪悪感は僕らで背負う

津崎平匡
やってみましょうか、恋人

津崎平匡
7825
5逃げるのは恥だけど役に立つ

津崎平匡
逃げるのは恥だけど役に立つ

津崎平匡
7334
6私はみくりの味方だからね

土屋百合
下は冷えます

津崎平匡
7189
7好きです〜周りの意見はどうでも〜

風見涼太
バニラ

津崎平匡
6538
8家事をお願いして良かった

津崎平匡
上を向いて働こう

津崎平匡
6212
9二人で決めたならいいじゃない

土屋百合
家事をお願いして良かった

津崎平匡
5691
10上を向いて働こう

津崎平匡
ささやかですが

津崎平匡
5432

注意点

AMPで表示する際は絞込み検索機能やテーブルの分割表示機能は使用できません。記事がAMPで表示されないように設定するか、絞込み検索機能などのスクリプトを使用する機能はオフにしましょう。

終わりに

記事の中にテーブルを表示できる便利なプラグインTablePressを紹介してみました。

小規模のテーブルであればTinyMCE Advancedのテーブル挿入で良いと思いますが、

データ数が多くてインポートしたい場合や、絞り込み検索機能並び替えの機能を利用したい時なんかはTablePressを使えば簡単にできるのでオススメです。

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする