2023.03.10

|

2023.03.13

WordPressプラグインで表を作成する「Table Press」

WordPress(ワードプレス)で表を使って表現したいときに、テーブルを使って作業することが多くありますが、並び替えや行の追加をする際、状況によってはHTML(コード)を触らないとならない場合などがあったりします。

「TablePress」のプラグインを使用すると、簡単に表作成ができ、ブラウザ上で表を閲覧した際にユーザー側でも昇順/降順で並び替えしたりができるようになります。

TablePressをインストール

WordPress管理画面から、プラグインの新規追加で「TablePress」と検索をしてインストール、有効化します。

新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。

最初にアップデートがあった際に通知が来ることを許可するかの確認の画面が出てきますので、任意の方を選んで次へ進みましょう。

プラグインの有効化が完了すると、WordPress(ワードプレス)の管理画面に「TablePress」が新たに追加されますので、まず開いてみましょう。

最初に開くと、先程「許可して続ける」を選択した場合、図のような表示が現れます。閉じてしまっても、対応せずでも使えますが、今回はこの内容を対応していきます。

(原文)
Thanks! You should receive a confirmation email for TablePress to your mailbox at 「WordPress管理者メールアドレス」. Please make sure you click the button in that email to complete the opt-in.
(翻訳)
ありがとう!「WordPress管理者メールアドレス」のメールボックスにTablePress の確認メールが届きます。そのメールに記載されているボタンをクリックして、オプトインを完了してください。

届いたメールを確認すると図のような内容で届きます。

(原文)
Please click the button below to complete the opt-in and confirm that 「WordPress管理メールアドレス」 is the correct email address to receive security & feature updates notifications, educational content, and offers from TablePress.

Confirm your email(←ボタン)

If you didn't opt-in, you can just delete this email. You will not be subscribed unless you click the confirmation button above.

(翻訳)
下のボタンをクリックしてオプトインを完了し、「WordPress管理メールアドレス」が、 TablePressからのセキュリティと機能の更新通知、教育コンテンツ、オファーを受け取る正しいメール アドレスであることを確認してください。

メールを確認する(←ボタン)

オプトインしていない場合は、このメールを削除できます。上の確認ボタンを押さないと登録されません。

という内容ですので、「Confirmします」

完了すると、TablePressの画面が図のように変わります。

(原文)
TablePress opt-in was successfully completed.
(翻訳)
TablePress のオプトインが正常に完了しました。

こちらでOKです。なお、こちらは行わなくても動作には特に影響はないので、割愛しても問題はありません。

 

TablePressを使ってみよう

最初にアップデートがあった際に通知が来ることを許可するかの確認の画面が出てきますので、任意の方を選んで次へ進みましょう。

Table Pressの設定画面に「新規追加」という項目がありますので、こちらを選択してください。

・テーブルの名前
・説明(任意)
・行数
・列数

を指定して、「テーブルを追加」で作成していきましょう。
ここで指定する内容は全て後から修正出来ますので、悩んだら仮の情報を入れて進みましょう。

テーブルが出来上がると図のような画面になります、一番上の青色の部分が項目名になります。

セルをクリックすると内容が入力できます。

このようにデータを入力していきましょう。下部にあるプレビューボタンを押すと、どんな風に見えるかを事前に確認することが出来ます。

出来上がったら保存をします。

テーブル情報の「ショートコード」[table id=〇 /]をコピーし、

掲載したいページや記事に貼り付けをしましょう。

こちらの下に、先程作ったものを入れてみています。


[table id=1 /]


このように無事に入れ込むことが出来ました。

 

さいごに

スプレッドシートやエクセルで作成したファイルをCSVファイルで書き出しし、インポートしたり、逆にエクスポートすることも可能です。

現在では、スプレッドシートをそのままサイト上に埋め込むことも可能ですので、情報更新が多い表はスプレッドシートの埋め込みで対応。

あまり情報が変わらず常設しておきたい表などは、Table Pressでなど使い分けをして使ってみると便利です。