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