テーブル実装プラグイン「TablePress」
簡単にtableを作成でき、しかもレスポンシブ化のプラグインもリリースされています。
プラグインページ: TablePress
「TablePress」の実装方法
1. 管理画面のTablePressのページから「Add New」でテーブルを作成し、以下を設定します。
| 項目 | 設定内容 |
|---|---|
| Table Name | テーブルのタイトル |
| Description (optional) | テーブルの説明 |
| Number of Rows | テーブルの行数 |
| Number of Columns | テーブルのカラム数 |
テーブルのヘッダーを使用する場合は、必要な行数+1して下さい。
2. テーブルの値を入力します。
オプション
ここでいろいろなオプションを設定することが出来ます。
| 項目 | 設定内容 |
|---|---|
| Insert Link | リンクの挿入 |
| Insert Image | 画像の挿入 |
| Advanced Editer | エディターが使えます |
「The first row of the table is the table header.」にチェックを入れると最初の行はテーブルのヘッダーとして使用されます。
プレビューボタンを押すと仕上がりを見ることが出来ます。
プレビュー画面
3. 「Save Changes」して、Shortcode:をコピーして、表示したい投稿に貼り付ければ完成です。
完成図
Features of DataTable JavaScript libraryでいろいろな設定をすることが出来ます。
| 項目 | 設定内容 |
|---|---|
| Sorting: | ソート機能 |
| Search/Filtering: | 検索機能 |
| Pagination: | ページ送り機能 |
| Horizontal Scrolling: | 横スクロール機能 |
レスポンシブ対応化
プラグインページ: TablePress Responsive Tables
使い方
「TablePress Responsive Tables」をダウンロード・解凍し、pluginsディレクトリにコピーして有効化して下さい。
あとはさきほどのShortcode:(ショートコード)に以下のようにresponsive="xxx"を付与して投稿に貼り付けるだけです。
768ピクセルよりも小さい画面幅に対応させる
|
1 |
[table id=1 responsive="phone" /] |
980ピクセルよりも小さい画面幅に対応させる
|
1 |
[table id=1 responsive="tablet" /] |
1200ピクセルよりも小さい画面幅に対応させる
|
1 |
[table id=1 responsive="desktop" /] |
すべて画面幅に対応させる
|
1 |
[table id=1 responsive="all" /] |
以上で、「TablePress」 + レスポンシブ対応が完了です。
