【WordPress】複雑な表を簡単に作成できるプラグイン「TablePress」

表を作りたいときは以下のようなHTMLを書きます。

<table>
<tbody>
 
<tr>
<td>1列目　左</td>
<td>1列目　中央</td>
<td>1列目　右</td>
</tr>
 
<tr>
<td>2列目　左</td>
<td>2列目　中央</td>
<td>2列目　右</td>
</tr>
 
</tbody>
</table>

↓

こんな感じで表示される。

簡単な表を作るのであればこれでいい。

でも複雑な表だとちょっと面倒だ。

例えばこういうやつとか…

セルを結合するとかHTMLの記述がややこしくなるから

こういう複雑な表はプラグインを使ったほうがラクです。

ワードプレスには表を作ることができるプラグインがいくつかありますが、

そのなかでも「TablePress」は視覚的に操作できて使いやすいです。

インストール方法と使い方を書いておきます。

TablePressのインストール

１、ワードプレスの管理画面の左サイドメニュー。

プラグイン＞新規作成をクリック。

→→

２、検索窓に「tablepress」と入力。

３、先頭にTablePressが出てきます。

自分のはインストール済みですが、最初は「今すぐインストール」ボタンが出てくるので

クリックしてインストールします。

あとは自動でインストールされます。１分もかかりません。

とりあえずこれでインストールは終了です。

TablePressの使いかた

表の作成

１、WordPressのサイドメニューにTablePressの項目が追加されているので

「新しいテーブルを追加」をクリック。

２、作成するテーブル（表）の名前と行数・列数を入力。

説明のところは必要ならコメントを入れる。省略してもいい。

３、テーブルが作成される。

ショートコードと書いてある部分はプラグインがテーブルを識別するための管理コードです。

左のテーブルIDの数字を変更するとこの番号も変わる。

４、表の中身を入力。編集したい部分をクリックすると書き込める。

行や列を追加するときは下にある「テーブルの操作」から数を入力して追加できる。

削除したい列や行がある場合は、該当部分のチェックボックスにチェックを入れ、

「テーブルの操作」から削除する。

５、必要に応じてオプションを設定。

見出し行とフッターは背景色が変わる。

※見出し行やフッター行をセル結合する場合はチェックを外さないとできないので注意。

６、「DataTablesを使用」のチェックをはずし「変更を保存」をクリック。

チェックをいれたままだと検索窓などが表示され外観が悪くなるのではずす。

以上で表の作成は終了です。

表を投稿に挿入する

１、WordPressの投稿画面に挿入用のボタンが追加されているのでクリック

２、一覧がから使いたいものを選び「ショートコードを挿入」。

３、こんな感じでコードが挿入される。直接入力してもよい。

４、表示を確認したいときは「下書きを保存」してから「プレビュー」で見れます。

左下にある「編集」は管理者だけに表示されます。

基本的な使いかたは以上になります。

長くなりましたので表の細かいカスタマイズ方法などは次回また書きます。

最後まで読んでいただきありがとうございました。