こんにちは、エーアイティ研究所です!
今回の記事では、WordPressの表作成プラグイン、TablePress(テーブルプレス)について紹介します。
主にインストールから、実際に表を作るところまでを解説します。

弊社で制作しているサイトも、運用する方が自分で編集しやすいよう、このプラグインを使用することが多いです。
編集の仕方を確認したい方は、こちらの記事を参考にしていただければと思います!

では、TablePressについて詳しく説明します。

TablePressとは?

TablePressとは、WordPress上で表などを作るときに、簡単に表を作ることができるプラグインです。
TablePressで作った表を、好きな箇所に埋め込むことができます。

このような、よくある会社概要などを作成することができます。
ということで、インストール方法や詳しい使い方などを解説していきます!

TablePressのインストール

①まず、管理画面のプラグイン→新規追加を押します
②キーワードにTablePressと入力し、ピンクで囲ったTablePressプラグインをインストールします。
③インストールしたら、「有効化」してください

すると、管理画面にTablePressの項目が追加されました。

これで準備完了です。

TablePressで表を作ってみる

TablePressから、「新しいテーブルを追加」を選択します。

するとこの画面が出てくるので、テーブル名や説明・作りたい表の行数と列数も入れます。

これらの設定は後ほど変更できるので、正確でなくても大丈夫です。

入力したら、テーブルを追加ボタンを押します。

すると、こんな画面が出てきます。
もうだいぶ表が形になっていますね!

あとは、この表に内容を入力していくだけで、表が出来上がるのですが、初期設定は表の1行目が青くなっています。
それは、テーブルのオプションという箇所の一番上の項目「テーブルの最初の行をテーブル見出しにする」にチェックが入っているからです。これは表の種類にもよるので、お好みで設定を変更してください。

表に、このように入力してみました

このページの一番上、もしくは一番下に行くと、

「プレビュー」と「変更」を保存と出てくるので、一度確認してみたいときは、プレビューで確認し、実際にサイトに埋め込んで確認したい場合は、保存して、一番上に戻りましょう。「テーブル情報」という項目にショートコードがあります。これをコピペしましょう。

TablePressで作った表をサイトで表示させる

ショートコードは、前述のテーブルの編集画面にありますが、「すべてのテーブル」から、作った表にカーソルを当てると、「ショートコードを表示」と出るので、そこからでもショートコードを、確認できます。

ショートコードをコピペしたら、表示したいページのブロックエディタ、もしくはElementorの場合はその画面を開きましょう。(今回はElementorProを使用しています。ブロックエディタも同様の方法でやってみてください!)

ウィジェットの検索窓に「ショートコード」と入力します。すると、ショートコードウィジェットが出てくるので、これをドラック&ドロップします。

ここに、先ほどのショートコードを入れると、表が反映されます。ちょっと納得いかないと思っても、編集自体はテーブルプレスからできるので「適用」しましょう。

全部左寄りなので、左のタイトルの部分を中央寄せにして、罫線もつけたい!と考えたとします。
その場合、TablePressに戻り、「プラグインのオプション」という項目から、CSSを書いていきます。
(CSSってなに??という方は、このコードを貼り付けてみてください。)

td.column-1 {
	text-align: center;
}

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

これで保存してみましょう!

このように、線と、左側の中央寄せが出来ました!
CSSを使用すると、デザインの自由度が上がるので、できる方はぜひ試してみてください。

まとめ

今回は、TablePressについて解説しました。
初心者でも使いやすく、編集などもしやすいのが嬉しいですよね。
しかし、CSSを追加し、デザイン的な部分を変更するのは、初めは少し難しいかもしれません。

自分がどのような表を作りたいのかを具体的にし、実装していきましょう。

エーアイティ研究所は、集客に強いサイト制作と、自社でサイトの保守・運用ができるよう、伴走サポートしてまいります。