ワードプレスに備わっているテーブル機能を使って表は作れますが、エクセルのように表の並べ替えをしたいと思うことはありませんか？
今回は、ワードプレスのプラグイン『TablePress』を使って、簡単に表の並べ替えができる方法をご紹介します。
『TablePress』を使うと表を並べ替えることができます
『TablePress』というプラグインを使うと、このような表を簡単に作ることができ、表の内容をソート（並べ替え）することができるようになります。
| 都道府県 | 男女計 | 男 | 女 |
|---|---|---|---|
| 北海道 | 5,250 | 2,472 | 2,778 |
| 青森県 | 1,246 | 585 | 661 |
| 岩手県 | 1,227 | 592 | 635 |
| 宮城県 | 2,306 | 1,127 | 1,179 |
| 秋田県 | 966 | 454 | 512 |
| 山形県 | 1,078 | 520 | 558 |
| 福島県 | 1,846 | 914 | 931 |
| 茨城県 | 2,860 | 1,427 | 1,433 |
| 栃木県 | 1,934 | 964 | 970 |
| 群馬県 | 1,942 | 962 | 981 |
| 埼玉県 | 7,350 | 3,668 | 3,682 |
| 千葉県 | 6,259 | 3,105 | 3,155 |
| 東京都 | 13,921 | 6,846 | 7,075 |
| 神奈川県 | 9,198 | 4,585 | 4,613 |
| 新潟県 | 2,223 | 1,078 | 1,145 |
| 富山県 | 1,044 | 506 | 537 |
| 石川県 | 1,138 | 553 | 585 |
| 福井県 | 768 | 374 | 394 |
| 山梨県 | 811 | 397 | 414 |
| 長野県 | 2,049 | 1,000 | 1,049 |
| 岐阜県 | 1,987 | 964 | 1,022 |
| 静岡県 | 3,644 | 1,797 | 1,847 |
| 愛知県 | 7,552 | 3,780 | 3,773 |
| 三重県 | 1,781 | 870 | 911 |
| 滋賀県 | 1,414 | 699 | 715 |
| 京都府 | 2,583 | 1,234 | 1,349 |
| 大阪府 | 8,809 | 4,227 | 4,582 |
| 兵庫県 | 5,466 | 2,605 | 2,861 |
| 奈良県 | 1,330 | 626 | 704 |
| 和歌山県 | 925 | 435 | 490 |
| 鳥取県 | 556 | 266 | 290 |
| 島根県 | 674 | 326 | 349 |
| 岡山県 | 1,890 | 909 | 980 |
| 広島県 | 2,804 | 1,362 | 1,442 |
| 山口県 | 1,358 | 645 | 713 |
| 徳島県 | 728 | 347 | 381 |
| 香川県 | 956 | 464 | 492 |
| 愛媛県 | 1,339 | 634 | 705 |
| 高知県 | 698 | 329 | 369 |
| 福岡県 | 5,104 | 2,416 | 2,688 |
| 佐賀県 | 815 | 386 | 429 |
| 長崎県 | 1,327 | 624 | 702 |
| 熊本県 | 1,748 | 825 | 922 |
| 大分県 | 1,135 | 539 | 597 |
| 宮崎県 | 1,073 | 505 | 568 |
| 鹿児島県 | 1,602 | 753 | 849 |
| 沖縄県 | 1,453 | 715 | 738 |
『TablePress』のインストールと設定画面
今回インストールするプラグインはこちら。『TablePress』です。
インストール手順
はじめにワードプレスのダッシュボードを開きます。
- 『ダッシュボード』を押す
- 『プラグイン』を押す
- 『新規追加』を押す
- 『TablePress』を検索
- 検索結果を確認し
- 『有効化』を押す
設定画面
インストールが終わると、ダッシュボード画面左手に『TablePress』のメニューが追加されますので押してください。
- 新規追加：表を作るときはこのタブから
- インポート：エクセル等で作った表を利用する場合はこのタブから
- エクスポート：TablePressで作った表をエクセル等で加工する場合はこのタブから
表の作り方
新規で表を作る場合は、『新規追加』タブを押します。
- 『新規追加』タブを押す
- 『テーブルの名前』を入力・・・わかりやすい文字を入力
- 『行』と『列』を入力・・・後から追加や削除が可能
- 『テーブルを追加』を押す
画面が切り替わりましたら表を作成していきます。
- 『テーブルの内容』に文字を入力し表を作成していく
- 見出しにするをチェック
- 『このテーブルで~』ここにチェック
- 『変更を保存』を押す
上記③にある『Data Tables』のチェックを入れることで、ソート（並べ替え）ができるようになります。
忘れずにチェックを入れてください。
表をインポートする方法
エクセル等で作成した表を『TablePress』にインポートする手順です。
この方法はとても便利なのでぜひ使い方に慣れておくことをおすすめします。
ポイント
- データはCSV形式で取り込みます
- エクセルファイルをCSV変換すると文字化けすることが多いので、Googleスプレッドシートの利用をおすすめします。
- 例１）エクセルで作成したデータをスプレッドシートにコピーしCSV変換
- 例２）はじめからスプレッドシートでデータを作成しCSV変換
ここでは、エクセルで作成したデータをGoogleスプレッドシートを経由して『TablePress』へインポートする手順をご紹介します。
もちろん、エクセルからCSV出力して直接インポートしてもかまいません。文字化けしないようにだけご注意ください。
インポートしたいエクセルの表を選択しコピー（Ctrl＋C）
Googleスプレッドシートを起動。
Google Chromeブラウザを利用している場合は、画面右上のアイコンから呼び出すことができます。
- 画面右上のアイコンを押す
- スプレッドシートを選択
- 新しいシートを作成
開いたGoogleスプレッドシートの左上（A1）を選択し、エクセルデータを貼り付け（Ctrl＋V）します。
次にCSV形式で任意の場所に保存します。
保存場所はデスクトップやダウンロードフォルダ等のわかりやすい場所をおすすめします。
- 『ファイル』を押す
- 『ダウンロード』を押す
- 『カンマ区切り~』を押す
『TablePress』からCSVファイルをインポートします。
- 『ダッシュボード』を開く
- 『TablePress』を押す
- 『インポート』を押す
- 『ファイルを選択』で保存したCSVを指定する
- 『インポート形式』はCSV-文字区切り値を選択
- 『新しいテーブルとして追加』を選択
- 『インポート』を押す
こちらの画面に切り替わります。
- 『テーブルID』・・・重複しなければ任意で変更は可能
- 『ショートコード』・・・このコードをこの後貼り付けます
- 『テーブルの名前』・・・わかりやすい名前を付けます
下記はClassicEditorを例にしていますが、グーデンベルグでも基本操作は同じです。
図のようなアイコンが追加されていますので押してください。
先ほど作成したショートコードを選択し、挿入ボタンを押します。
ショートコードが張り付きました。
プレビューで見てみると、このように表があらわれました。
ソート（並べ替え）ボタンもちゃんと付いています。
まとめ
ワードプレスで表の並べ替えをする時に便利な『TablePress』というプラグインをご紹介しました。
『TablePress』でゼロから表を作ることもできますが、並べ替えをするような表は内容も多いため、エクセルで作成したものをインポートする方法をおすすめしました。
インポートする際には、ＣＳＶ形式のファイルで保存したものを『TablePress』に取り込むことになりますが、エクセルからＣＳＶ形式への変換する際に文字化けの恐れが多々あります。
そのため、Googleスプレッドシートという、Google版のエクセルソフトを通して変換することをおすすめしました。