WordPressに表を追加するプラグイン！ TablePress

こんにちは、てっちーです。WordPressのページに表を追加するプラグインを紹介します。表を追加するプラグインはいくつもありますが、おすすめはTablePressです。使い方は簡単でいろいろな機能があり、日本語表記で設定もしやすく、CSSも使え、見た目もカッコいいです。

インストール方法と使い方について説明していきたいと思います。

TablePress のインストール

普通にプラグイン⇒新規追加より、「TablePress」をキーワードサーチしてください。下記の様にTablePressが検索出来たら、インストールして、有効化してください。こちらがプラグインの公式ページです。

TablePressの使い方

TablePressは表を作成し、それに対応するショートコードをページに埋め込む形式で使います。まずは表の作成から始めます。

表の作成

管理画面よりTablePressをクリックしてください。TablePressの設定画面が表示されるので新規追加のタブを選択してください。すると下記の様な画面が表示されるので、名前とテーブルの行数と列数を入れてテーブル追加を押してください。行数、列数は後でも変更できるので大体でかまいません。

表の編集

次に表の編集画面が表示されます。この画面はTablePressの設定画面からも来ることができます。ショートコードが右にあるので張り付けたいページにコピーして使ってください。また変更した後、「変更を保存」を押すと変更が反映されます。なお、変更を保存の隣にプレビューがあるのでできた表の確認もできます。

テーブルの内容

ここではテーブルの内容を編集できます。必要な内容を記入してください。

いろいろな操作とオプション

さらに下では、いろいろな操作ができます。行と列の追加と削除、リンクの挿入などができます。オプション等で見出しの設定等もできます。日本語なので見ながら少しいじればイメージがわくと思います。ここで追加のCSSの項目に”TblPrsFont“と赤枠で囲まれている箇所があります。これは、次に説明するカスタムCSSに記載したCSSを指定しています。必要な場合は設定してください。

カスタムCSS

管理画面⇒TablePressで表示されるページで、プラグインのオプションのタブを選択すると下記の画面なります。ここでカスタムCSSを設定するとフォント設定などのCSSを使うことができます。下記のように”TblPrsFont“のCSSを書いておくと、上記の赤枠の追加のCSSクラスとして使用できるようになります。任意のCSSを記述してみてください。今回の例では、80%の文字になり少し小さくなります。

表の例

表を追加するページにショートコードを記載すれば、表を表示できます。今回はプラグインの表を作成してみました。この表のようにリンクも入れることができます。

まとめ

無事、表の作成ができましたでしょうか。表を追加するだけなら簡単だと思います。細かい設定は少し手間がかかるかもしれませんが、その分、思い通りの表ができると思います。CSSも使える様になるといろいろ便利なので、少しづつ勉強していこうと思います。