WordPressでTablePressを使う

プラグインの「TablePress」を使う理由

実装例

上記の表は実際に当サイトで使っている表で、パスの一例として複数ページに表示させています。

この表は単発でも使えますし、複数のページで使いまわすこともでできます
表示したい場所に対応する表のショートコードを記述するだけなので、色々な場所で使えます

TablePressをインストール

WordPressの管理画面から「プラグイン」 → 「新規プラグインの追加」 をクリック
右上にある「プラグインの検索」 部分に「tablepress」を入力。暫くして検索結果が表示されます

表示された上記のプラグインをインストールし有効化

表を作成する

WordPressの管理画面のメニューにある「TablePress」をクリック
左のメニュー欄にある「新しいテーブルを追加」をクリック

「テーブルを追加」をクリック

初期段階で2か所の説明がでます

テーブル情報

テーブルID　　　：　このテーブルのID ショートコードにも使われます
Shortcpde 　　 ：　このショートコードを使って表示させたい場所に記述します
テーブルの名前　：　表を作成せいた時に入力した名前。ここでも変更可

テーブルの内容

必要なセルに文字や数字をいれてください

　日本語で入力しようとすると１文字目に頭文字の小文字が最初に出ます
　クリックしてセルにカーソルを合わせる必要があります。若しくは最初に出た頭文字を消す

テーブルの操作

基準となるセルを選択した状態でボタンをクリックして、追加、削除、移動などができます
セル単体ではなくその対象の「一行」「一列」になります

右上の「Combine/Merge」はセルの結合に使います
後ほど説明します

テーブルのオプション

基本はこのままで大丈夫ですが、テーブルの名前や説明に関するオプションなどはここでできます

Table Features for Site Visitors

Enable Visitor Features　：　デフォルトではチェックが入っていますが、セルの結合を使う場合はチェックを外す
水平スクロール　　　　　 ：　「Enable Visitor Features」のチェックを外すと無効になります
　※テンプレートに「Cocoon」を使っている場合はそちらで有効化できます

作ったテーブルをページに表示させる

表示させたい場所に上記の　Shortcode の部分を記述　角括弧も含む

複数場所や、複数個所に使いまわしもできます

セルを結合する

セルの結合を有効化する

セルの結合を有効化したいテーブルを開く

表示されたページの下部にある「Table Features for site Visitors」まで移動
「Enable Visitor Features」のチェックを外す
するとその下にある項目がグレーアウトされます

※水平スクロールも使えなくなるので、テーマ「Cocoon」を使っている場合はそちらで有効化する

セルの結合方法

結合したいセルをマウスの左クリックを押したまま結合したい範囲まで移動させます

横向き「colspan」

縦向き「rowspan」

結合したいセルを選択した後、「テーブルの操作」にある「Combine/Merge」をクリックする

選択したセルに「#colspan#」「#rowspan#」の文字が入ります

この時点では結合の状態が分かりにくいので、実際に表示させて確認してください

縦線を入れて見やすくする

デフォルトでは縦線は表示されません（海外仕様）

style.cssに以下を記述

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

テーブル例

実際に表示される（縦線なし）

実際に表示される（縦線あり）

TablePressの装飾について

今回は「TablePress」の基本的な使い方について紹介しました

次回記事では、もう少し踏み込んで装飾などについて紹介したいと思います