【WordPress】初心者でも簡単!テーブルプラグイン『TablePress』

top

TablePressの特徴

『TablePress』はWordPressの機能よりもキレイなテーブルを作ることができ、使いやすい優秀なプラグインです。

制作したテーブルはTablePress内に保存されるため複数の記事で使う事ができます
TablePress内のテーブルを編集すれば貼り付けた記事すべてのテーブルが変更されるため作業効率も良くなります。
さらにExcelから表をインポートすることもできます。

比較

【WordPressのテーブル】

名前てすとてーぶる
wordpressてすとてーぶる
tablepressてすとてーぶる

【TablePressのテーブル】

名前てすとてーぶる
WordPressてすとてーぶる
TablePressてすとてーぶる

中央揃えと枠線表示の設定しかしていませんが、TablePressではこのようにキレイなテーブルを作ることができます。カーソルを合わせた時、色が変化するのも特徴です。もちろん設定で変更できます。

簡単な使い方

「TablePress」をインストールするとダッシュボードのコメントの下に表示されます。

1.『TablePress』⇨『新規作成』

where

tablepress1

2.内容を入力

table

①何のテーブルか分かるように名前を付けます。
②行数(縦)、列数(横)を決めます。
③上記の項目が良ければ『テーブルを追加』をクリックします。
※どの内容もあとから変更可能です。
※説明の欄は空白でも大丈夫です。

すると以下のような図が表示されます。

sample

次は記事内にテーブルを挿入しましょう。

3.テーブルの挿入のやり方

実際にどのように表示するか見てみましょう。

エディター画面で
TablePressからテーブルを挿入」⇨「ショートコードを挿入
※図はクラシックエディタですが、ブロックエディタでも右上に表示されます。

insert

list

すると以下のように表示されます。

code

あれ?表示されない?

と思うでしょう。
エディター上ではこれで大丈夫です。では確認してみましょう。

4.プレビューで確認

記事のプレビューで確認するとコードがテーブルになって表示されます。
※初期状態は空欄です。わかりやすいように入力しています。

sample

テーマによりますが通常ではこのような殺風景なテーブルが表示されます。
また赤枠のようなJava機能もあり見づらいと思います。

次はテーブルを見やすくするための簡単なカスタムを解説します。

テーブルのカスタム

中央揃え・枠線表示

そのままでは見づらいので「中央揃え」「枠線の表示」をします。

①『ダッシュボード』⇨『TablePress』⇨『プラグインのオプション

ボックスにチェックを入れ、カスタムCSSを有効化

customcss

③以下のCSSをコピペします。

.tablepress thead th,
.tablepress td { text-align: center; /*テキストの中央揃え(左右)*/ }
.tablepress tbody td { vertical-align: middle; /*テキストの中央揃え(縦)*/ }

.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid black !important; /*枠線の表示*/
}

save

完了したら「変更を保存」します。

これで中央揃えと枠線表示はOKです。

Javaの無効化

テーブルのJava機能を一括でなくしたい場合

DataTablesを使用』のチェックを外します
※ソート(並べ替え)機能、検索/フィルター、ページ送りなどの機能が必要な場合は個別でチェックを外してください。

java

ではテーブルがどうなったか見てみましょう。

てすとてすとてすとてすとてすと
てすとてすとてすとてすとてすと
てすとてすとてすとてすとてすと
てすとてすとてすとてすとてすと
てすとてすとてすとてすとてすと

このように格段に見やすくなります。

初期設定は以上です。

まとめ

テーブルは商品の比較や特徴を見やすくするために大切なものです。
ただ文字を並べられると、どこを読めば良いのかわかりづらく、離脱率も高くなってしまうため積極的に使っていきましょう。

 

TablePress
・Excelから表をインポートできる
・CSSのコピペで様々なカスタムができる
・WordPressのテーブルよりも使いやすくオシャレ
・「ショートコードの挿入」で簡単にテーブルの挿入、使い回しができる

コメント

タイトルとURLをコピーしました