WordPressで表作成！商品紹介・一覧表示が出来るプラグインTablePressの使い方

こんにちは！来客メディアコンサルタントの佐藤旭です。

この記事では、WordPressで簡単に表作成が出来、尚且つソート機能も付いている商品紹介・一覧表示が出来るプラグインTablePressの使い方について解説します。

WordPressで、複数のアイテムを同じページ表示させる際に普通のテーブルだと物足りないことがありませんか？

例えば、並び替え(ソート)が出来たら・・・便利ですよね。

表示だって、ただ上から順番に並んでいるだけでは面白くないですもんね。
今回紹介するプラグインTablePressは、そんな悩みを解決できます。

手軽にスタイリッシュでユーザビリティの高いアイテム一覧ページがあれば、それだけでサイト訪問者は利便性を感じてくれるのではないでしょうか。

工夫次第だとは思うのですが、列は2。増やしても3位かなと。言った所でした。

なので、情報量が多い表だとスマホでは詰まった表示になるのでお勧めしない。
スマホも意識するのなら２～３列でシンプルな活用がお勧め。

と言うのが、実際に使ってみての感想です！

拡張プラグインは一応あります

レスポンシブ対応させる場合は拡張機能が必要で『Responsive Tables』をダウンロードしてインストールする事で出来る。

と言う記事が複数あったので試したのですが、「画像は依然としてレスポンシブ対応しない」…つまりは、画像のサイズに従って表示される為、結局の所は見にくのは改善されません。

参考記事はこちら⇒【WordPressプラグイン】TablePressの表をレスポンシブ対応に！

WordPressプラグイン『TablePress』インストール方法

と言う訳で、WordPressプラグイン『TablePress』のインストール方法です。

【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで【TablePress】と検索すると出てきます。

【TablePress】プラグインが表示されたら、【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。
有効化を忘れずに行って下さいね。

このアイコンが目印です！

利用するための準備はこれで完了です。

TablePressの設定と使い方

と言う訳で早速設定して使えるようにして行きましょう！

インストールが完了したら【ダッシュボード】⇒【TablePress】⇒【新しいテーブルを追加】で新規作成ページを開きましょう。

下図の様な新しいテーブルの作成ページが表示されました。

ここでは、後から分かるようにそのテーブル名と説明文を決めて下さい。
また、行と列の数もここで決めることが出来ます。
因みに、全て後から変更も可能ですのでご安心ください。

【テーブルを追加】をクリックで、再生ページに切り替わります。

下図の様に、項目を埋めてゆきます。
ディフォルト（初期状態）では、1行目は見出しになっています。

文字はそのまま入力、リンクや画像を挿入する場合は、そのままアドレスを直接入力でもできますし、同じサイトないのでデータ上から引っ張ってくる場合は、クリックだけで挿入できる便利なボタンもついています。

【テーブルの操作】をメインで使う事になります。

ワンクリックで簡単に挿入できるぽ単は、青く囲っています。

先にボタンをクリックして、次に、挿入したいセルをクリックすると、どのリンクや画像なのか選択画面が表示されます。

後は、選択して完了です。

行と列の操作も色分けしてみましたので参考にしてみてください。

プレビューで確認を行った後、問題がなければ、保存をして下さい。

記事内に作成したテーブルの挿入する方法

テーブルの挿入は、まず同ページ右上にある【ショートコード】（例：table id= /）をコピーします。

次に、挿入したいページにそのコードをペーストすれば完了します。

まとめ

とても簡単なのに、本格的なテーブルを作ることが出来ます。

また、直接作りこむこと以外に、CSVやHTML、Excel形式のファイルなどを読み込ませることもできます。

Excelの方が慣れているという方は、先にExcelで作成して、それを読み込ませるという使い方も出来ます。
使いやすい方法で作成できるのも嬉しいポイントですよね。

ただし、スマホでの表示があまりよくありません…。
その点だけ注意し、実際にスマホでの表示がどうなるのかを確認しながら設置するのがお勧めです！