![](https://cxg-design.jp/wp-content/uploads/2024/04/64b39defa23ec91ef235ba176c5914eb-1.png)
Table Pressで、ソートできるテーブルをCSVデータから作成
WordPressには、さまざまなテーブル作成プラグインがあります。今回はTablePressで、アルファベットや数字でソートできるテーブルをCSVデータから作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/11/567d5c6003f196b2ffe29b3d547bab82.png)
出典 : TablePress
今回のDEMOは、売上表を作成しました。エクセルで作成した、CSVデータを読み込み作成しました。販売額、売上個数、売上金額がヘッダーの矢印で、並び替えできます。
CSV読み込み
まず、CSVデータを読み込みます。エクセルで表を作成し、「CSV UTF-8(コンマ区切り)」のCSVデータで保存します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/c8a5a27f8b8e4825156d4c97062aa53c.png)
エクセルで表を作成
![](https://cxg-design.jp/wp-content/uploads/2024/04/4334fc711079637ab88ec54b1d14b5a5.png)
「CSV UTF-8(コンマ区切り)」で保存
WordPressダッシュボード左サイドバーのTablePress>テーブルをインポートをクリックします。ファイルをインポート>ファイルアップロード>Click to select files,or drug them hereをクリックし、作成したCSVファイルを選択します。「インポート」ボタンをクリックするとファイルが読み込まれます。
![](https://cxg-design.jp/wp-content/uploads/2024/04/9da23e61f9aedcb3216428268208fe1f.png)
TablePress>テーブルをインポートをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/580679bcaa811584f312609e20a0ba3a.png)
「Click to select files,or drug them here」をクリックし、CSVファイルを選択
![](https://cxg-design.jp/wp-content/uploads/2024/04/5859691159ae11579c48030ae866e38e.png)
「インポート」ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/d9e52478257871022f65d115c776abb1.png)
ファイルが読み込まれます。
設定
デフォルトの設定から、変更していきます。まず、フッターを有効にするため、「テーブルのフッター行」にチェックを入れます。また、デフォルトでは、アイテム数の表示や、ページャーが設定されていますが、小さいテーブルでは必要ないので、チェックを外していきます。設定後は、「設定を保存」ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/04/68044c465168634bac6cd0401a5ff1d3.png)
「テーブルのフッター行」にチェックを入れ、必要ない機能はチェックを外す。設定後は、「設定を保存」ボタンをクリック。
項目 | 設定値 |
---|---|
テーブルの見出し行 | チェック有 |
テーブルのフッター行 | チェック有 |
行の色を交互にする | チェック有 |
カーソルのある行をハイライト表示 | チェック有 |
テーブル名を表示 | チェック無 |
テーブルの説明の表示 | チェック無 |
追加のCSSスタイル | 空欄 |
Enable Visitor Features | チェック有 |
並べ替え | チェック有 |
検索/フィルター | チェック無 |
ページ送り | チェック無 |
情報 | チェック無 |
水平スクロール | チェック無 |
設置
ショートコードをコピーして、設置したい場所に、ショートコードブロックを設置し、ペーストします。
![](https://cxg-design.jp/wp-content/uploads/2024/04/4dcc075bfc0cd85283638845076e7c64.png)
ショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2024/04/b05bc5d24a0763d813fb73add6a7d87e.png)
ショートコードブロックを設置し、ペースト。
スタイル変更
TablePressでは、テーブルの色などを変更する場合、CSSスタイルを使用します。CSSの知識が必要になるのですが、Webサイト制作時あらかじめ設定しておけば、管理者は、「追加のCSSスタイル」に指定のクラス名を入力するだけで変更できます。
以上で今回の説明は終了です。数字でソートをかける機能がデフォルトでついてくるので、金額の入ったテーブルを作成する時に便利ですね。また、ソート機能を取ることもできるので、CSVデータからシンプルなテーブルを作りたい時にも使えるプラグインです。
Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。