人気のテーブル作成プラグインです。
詳しくは、下を参考にどうぞ。
WP naviさんの「TablePress」の使い方
使い方
サンプルはmixhostさんのを流用しています。
下は修正前の表の画像です。縦線が欲しいですよね。
下は修正した実際の表です。
縦にも枠線が入りました。
機能 | スタンダード | プレミアム | ビジネス | ビジネスプラス |
ディスク容量 | SSD 150GB | SSD 250GB | SSD 300GB | SSD 400GB |
CPU | 3vCPUs | 5vCPUs | 8vCPUs | 10vCPUs |
メモリ | 4GB | 8GB | 12GB | 16GB |
転送量目安 | 2TB/月 | 4TB/月 | 6TB/月 | 7TB/月 |
TablePressをインストールしたらダッシュボードに項目が出来ますので縦線を入れる場合は、プラグインのオプション をクリックします。
プラグインのオプション をクリックして✓「カスタムCSS」したら、水色マーカーのように カスタムCSS を入力します。
最後に変更を保存です。
カスタムCSS:
/* 全体 */
.entry-content td,
.entry-content th {
border: 1px solid #ccc;
}
このカスタムCSSは全体定義なので全てのテーブルに適用されます。
表を作成
新しいテーブルを追加
新しいテーブルを追加 または 新規追加 をクリックします。
テーブルの名前 を入力して、行数(縦の項目数) と 列数(横の項目数) を決めます。
行・列どちらも後から増減できます。
テーブルを追加
テーブル作成画面
分割表示するよりザックリ紹介する方がわかりやすいと思います。
テーブル情報
ショートコード は後で紹介します。
テーブルの内容
ここが実際のテーブルのパーツ等の内容を入力する場所です。
テーブルの操作
テーブルの内容と連動させて色々な操作ができます。
テーブルのオプション
DataTables JavaScriptライブラリの機能
オフでいいと思います。
<使用例>
テーブルの内容の1行目 は、テーブルの操作の同じ行内(colspan) で連結しています。
やり方は、1-Aに文字列を入れて、1-Bを選択して同じ行内(colspan) をクリックします。または、1-B〜1-Eに直接『#colspan#』と入力でもOKです。
テキストを中央寄せにするのは <center>文字列</center> です。
テーブルのオプションのテーブルの見出し行 :✓します。
表が完成したら上下どちらかの変更を保存です。
最初に出て来た ショートコード をコピーしておきます。
表を挿入したい投稿・固定ページを編集で開いて、本文にペーストします。
年表のように日付と内容だけでいい場合は、
元のコードが[table id=1 /]だとすると
[table id=1 column_widths="30%|70%" /]
※わざと全角の[と]を使用しています。実際には半角 [ ] です。
こんな感じで上手く行きました。
行の色を交互にしない
最新のCocoonデフォルトではテーブルの1行置きに行の色が付く設定になっています。
「テーブルのオプション>行の色を交互にする:連続する行の背景色を別々の色にする」のチェックを外していても1行置きに行の色が付きます。
全部の行を透過させるためには子テーマの『style.css』に以下のCSSを追加します。
/*===============================
TablePress
=================================*/
table.tablepress tr {
background-color: transparent;
}
表示例:
機能 | スタンダード | プレミアム | ビジネス | ビジネスプラス |
ディスク容量 | SSD 150GB | SSD 250GB | SSD 300GB | SSD 400GB |
CPU | 3vCPUs | 5vCPUs | 8vCPUs | 10vCPUs |
メモリ | 4GB | 8GB | 12GB | 16GB |
転送量目安 | 2TB/月 | 4TB/月 | 6TB/月 | 7TB/月 |
他のWordPressからテーブルをコピぺ
サイト移転の際などに元サイトのテーブルをエクスポート(書き出し)して、新サイトのテーブルにインポート(書き込み)出来ます。
手順 1
元サイト側[TablePress>テーブルをエクスポート]
手順 2
[✓]すべて選択
[エクスポート ファイルをダウンロード]
今回は移転作業なので、すべて選択していますが個別にエクスポートも出来ます。
手順 3
〈1〉ダウンロードされたフォルダをデスクトップに移動
〈2〉フォルダを展開した表示イメージです。
〈3〉、 〈1〉を再度ZIPに圧縮
手順 4
新サイト側[TablePress>テーブルをインポート]
手順 5
〈1〉[ファイルを選択]クリック。
黄色枠のようにダイアログ小窓が開きます。
〈2〉デスクトップに出しておいた[tablepress-export-●●●-csv.zip]を選択。
〈3〉[選択]をクリック。
〈4〉[インポート]をクリック。
手順 6
すべてのテーブルを選択すると下図のように表示されます。
赤枠のようにテーブルをクリック。
手順 7
水色枠のテーブルの名前や説明を入力し直します。
ピンク枠のテーブルIDは、新サイトのテーブルとダブらない限り同じIDに変更する方が便利です。
おまけ
スポーツジム等の出席カレンダーあります。
よかったらどうぞ。
