メニュー

WordPressで使いやすい表を挿入するならTablePressプラグインを使おう

WordPress に挿入した表がシンプル過ぎて物足りないという方がいるでしょう。

セル1セル2セル3
セル4セル5セル6

こういう表ですね。

使っているテーマによってはもっとシンプルな表になってしまうでしょう。

表を見やすくしてなおかつソート機能をもたせようと思うとCSS・JavaScript両方のスキルが必要です。両方のスキルを持っている人はほとんどいないでしょう。

かといって専門業者に依頼するにも費用問題がでてくきます。

そこで役立つのか WordPress お得意のプラグイン「TablePress

目次から探す

TablePressのインストール

WordPress 管理画面からインストール・有効化してしまいましょう。

有効化したら即使えるようになります。初期設定は必要ありません

TablePressをインストール・有効化して管理画面左メニューにTablePressが追加されたら有効化に成功しています。

TablePressの使い方

それでは早速TablePressの使い方を解説していきます。

表の作成

TablePressは投稿編集画面ではなく、TablePress専用の編集画面で表を作成します。

TablePress専用の管理ページで作成した表を、記事にショートコードで挿入するという形になります。

ショートコードで挿入する形式であるため、同じ表を複数記事に挿入していても元の表を修正したら全記事まとめて編集内容が反映されるメリットがあります。

そんなTablePressの表の作成ですが、管理画面左メニューに追加されたTablePressから行います。

TablePress管理画面を開いたら新規追加をクリックしましょう。

テーブルの名前と行列の数を入力します。行列数についてはいつでも変更可能です

設定したらテーブルを追加で次に進みます。

テーブルの内容と書かれている箇所に表のテキストを一つずつ埋めていきます。

リンクの挿入や画像の挿入など高度な編集をしたい場合はテーブルの内容の下にあるテーブルの操作から行いましょう。

TablePressは1行目・最終行をそれぞれヘッダー行・フッター行にすることが可能です。

1行目を表の項目名にしている場合はテーブルの最初の行をテーブル見出しにするにチェックを入れておきましょう。

表の設定が完了したら変更を保存をクリックして表を保存します。

これでTablePressで表を作成できました。ここで解説した項目以外を触っていないのであれば、表のソート機能も使えるようになっています。

表の挿入

表を作成したら、次は記事にTablePressの表を挿入していきます。

まずは何でもいいので投稿編集画面を開いておいてください。

投稿編集画面を開くと見慣れないアイコンが追加されていると思いますが、これがTablePressのアイコンです。

クリックすると挿入したい表を選ぶ画面が表示されます。挿入する表の[ショートコードを挿入]をクリックしましょう

このようにショートコースが挿入されたはずです。

このまま記事をプレビュー表示してみましょう。するとTablePressで作成した表が表示されたはずです(表のデザインは使用しているテーマによって若干異なります)。

この表の下に表示されている[編集]は、管理者のみに表示されるリンクで、クリックすると直接TablePress編集画面を開けます。

管理者ではない一般の読者には表示されません。

ソート機能が有効化されているので、ヘッダー行の列をクリックすると降順・昇順の並び替えも可能です。

無料のプラグイン一つで、こんなにも使い勝手が良い表を簡単に挿入できてしまいます。

表をショートコートで挿入するという流れについては慣れが必要ですが、表の編集・管理がしやすく、同じ表を使い回しやすいので、表をたくさん使うサイトではかなり役立つでしょう。

TablePress小ワザ

実はTablePressにはExcel などで作成したCSVファイルをインポートする機能が用意されています。

インポートしたCSVに合わせて自動でTablePress用の表に変換してくれるため入力の手間が省け、時間を節約できます。

やり方は簡単でTablePressのインポートタブでCSVファイルをアップロードするだけ。CSV ファイルが壊れていなければこれだけで表を作成できます。

またCSVファイルだけでなく、XLSX形式にも対応しているので、エクセルで結合したセルがある表の挿入も簡単です。

とても便利ですので、エクセルやスプレッドシートで表を作成している方は一度CSV形式やxlsx形式で書き出し、TablePressにインポートして使ってみてください。

目次から探す
閉じる