https://blog-bootcamp.jp/start/wordpress-tablepresscss/
アドオンを絡めればレスポンシブ可能
カテゴリー: Table press
TablePress ページ分割やソートができない
突然、金沢unionラジオアーカイブスやイッザットハウスのラジオアーカイブスのテーブルページの分割やソート機能が効かなくなり全て一ページ表示になってしまった。
wordpressのバージョンアップ？やプラグイン同士のバッティングが問題？
イッザットハウスはlighitbox2とTablePressがバッティングしてたので、建築ギャラリーのみlightbox2を使い、ラジオアーカイブスがあるinformationではlightbox2のプラグインを外した。
ユニオンはプラグインのバッティングもないし、TablePressの再インストールもしたが改善されなかったので、これまではkanazawa-union内で表示させていたが、kanazawa-staff内で使用表示したら大丈夫なようだ。
TablePressをレスポンシブにする拡張機能 Responsive Tables
レスポンシブ対応 tablepressの拡張
http://kwski.net/wordpress/1094/
「TablePress Responsive Tables」をダウンロード・解凍し、pluginsディレクトリにコピーして有効化して下さい。あとはさきほどのShortcode:(ショートコード)に以下のようにresponsive=”xxx”を付与して投稿に貼り付けるだけです。それぞれのブレークポイントでテーブルを横並びにしてくれます。
ダウンロード先： http://tablepress.org/extensions/responsive-tables/
// 768px以下になるとテーブルを横向きにする場合[table id=1 responsive="phone"/]// 980px以下になるとテーブルを横向きにする場合[table id=1 responsive="tablet"/]// 1200px以下になるとテーブルを横向きにする場合[table id=1 responsive="desktop"/]
Responsive Tablesについて
Wp Table Reloadedから Table pressへ変更
Table pressはwp table reloadedのデーターを引継ぎが出来る。 dampファイルはWP-Table Reloadedがインストールされている状態でTablePlessをインストールすると引き続くことが出来るのでそこ注意
まさはしＦＰのテストでも使用ＯＫ cssは引き継がないので（スタイルシートファイルがそもそも別だし）、メニューのtable press内のプラグインオプションのカスタムＣＳＳに記述する。ＣＳＳファイルに記述してもかわらないのでプラグインオプションの中で設定する。ＩＤなどはfirebugで調べて。
http://netbiz-life.com/archives/3378
ＩＤ クラスは適宜に変更
/*まさはしＦＰ ラジオアーカイブス用*/
#tablepress-4_wrapper { font-size: 12px; }
.tablepress-id-4 .column-1 { width: 120px; }
.tablepress-id-4 .column-2 { width: 558px; }
.tablepress-id-4 .column-3 { width: 92px; }
/*まさはしＦＰ 一般セミナー用*/
#tablepress-1_wrapper { font-size: 12px; }
.tablepress-id-1 .column-1 { width: 100px; }
.tablepress-id-1 .column-2 { width: 480px; }
.tablepress-id-1 .column-3 { width: 190px; }
/*まさはしＦＰ ＫＮＢ一ちゃんマネー用*/
#tablepress-3_wrapper { font-size: 12px; }
.tablepress-id-3 .column-1 { width: 100px; }
.tablepress-id-3 .column-2 { width: 670px; }
/*まさはしＦＰ 定期セミナー用*/
#tablepress-2_wrapper { font-size: 12px; }
.tablepress-id-2 .column-1 { width: 160px; }
.tablepress-id-2 .column-2 { width: 610px; }
/*テーブルのボーダーとカラー*/
.tablepress .row-hover tr:hover td { background-color: #e6eeee; } .tablepress tbody td { vertical-align: middle; font-size: 12px; border-width: 1px; border-color: #cccccc; border-style: solid; padding: 3px; margin: 0; } .tablepress thead th { background-color: #e6eeee; text-align: center; border-width: 1px; border-color: #cccccc; border-style: solid; padding: 3px; margin: 0; }
テーブルの装飾
http://www.yume-map.net/?p=4124
※独立ページでページを造った場合は、<head>内に必ず、 <?php wp_head();?> <body>を閉じる前に<?php wp_footer();?>を記述する。そうしないとDataPress Javascriptライブラリーが効かず、テーブルの上にページ番号や検索フィルターが表示されなくなるので注意。
上記の記述がないとオプション内のCSS記述も効かないので、効かない時は記述すること
こういう事→ http://p-bn.com/making-a-website/plugins_no_more_move.html
レスポンシブ対応 tablepressの拡張
http://kwski.net/wordpress/1094/
「TablePress Responsive Tables」をダウンロード・解凍し、pluginsディレクトリにコピーして有効化して下さい。あとはさきほどのShortcode:(ショートコード)に以下のようにresponsive=”xxx”を付与して投稿に貼り付けるだけです。それぞれのブレークポイントでテーブルを横並びにしてくれます。
ダウンロード先： http://tablepress.org/extensions/responsive-tables/
// 768px以下になるとテーブルを横向きにする場合[table id=1 responsive="phone"/]// 980px以下になるとテーブルを横向きにする場合[table id=1 responsive="tablet"/]// 1200px以下になるとテーブルを横向きにする場合[table id=1 responsive="desktop"/]
Responsive Tablesについて