日記

2018-12-17 WPテーブル【プラグインでヘッダー固定したい】

投稿日:




WPでテーブルタグヘッダー列を固定する方法

Fixed Midashiでプラグインを使わずに固定

VectorからFixed Midashiダウンロード

fixedmidashiのファイルを解凍、開く。

fixedmidashi.jsファイルを探す。

FTPソフト、またはサーバーアップローダーからfixedmidashi.jsをアップロード

WPの場合は

サイトフォルダ→publichtml→wp-content→themes→スクリプトを使いたいテーマフォルダ内にぶっこむ

2018-12-16 19:21 WPテーマ内にfixedmidashi.jsアップ

2018-12-16 20:14

ここまでやったけどできない

https://affilabo.com/wordpress/15762/

WP テーブルタグ ヘッダー行/先頭行 見出し追尾固定jQuery.floatThead

今日は諦めてまたやってみよう

Word Pressのプラグインでヘッダーを固定する

2018-12-17 7:19

今の知識だと時間がかかりすぎるから、WPのプラグインを使うことに。

「tablepress」プラグイン

「tablepress」これだけだとできることは少ない。

有料(寄付制)で専用プラグインをダウンロードすることで「追従ヘッダー」「レスポンシブ」「表検索」「表ソート機能」などが使える。

  • 今回はレスポンシブテーマの「tablepress-responsive-tables」
  • 追従ヘッダーの「tablepress-datatables-fixedheader」
  • 表示トグルの表示名変更の「tablepress-length-change-all 」を取った。

固定ヘッダーにするには「tablepress-datatables-fixedheader」これ。

これをプラグイン公式サイトからダウンロードして、WPのプラグインインストールにぶっこむ。

ショートコードのIDにdatatables_fixedheader = topを足せばOK。

通常は[table id=1 /]

赤字が固有ID。この固有IDのあとにdatatables_fixedheader = topを足して、

[table id=1 datatables_fixedheader = top /]

にする。

これでOK。追加プラグインの「tablepress-datatables-fixedheader」をWPにインストールしてないと出来ないから注意。

フォントがデカイからテーブル文字サイズを変えたい

フォントがでかくて見づらい。変えよう。

テーマのテーブル記述と競合してるのかわからないが、何回やってもレスポンシブflipの文字サイズが変えられない。ヘッダー追従タイプのテーブルには変更が効いた。ちなみに効いたのは

tablepress-1 th,
tablepress-1 td {
font-size: 10px;
}

試したのは

#tablepress-1 th,
#tablepress-1 td {
font-size: 10px;
}

.tablepress-id-1 tbody td {
font-size: 10px;
}

.tablepress-id-1 {
font-size: 10px;
}

.tablepress thead th {
font-size: 10px;
}

.tablepress td {
font-size: 10px;
}

.tablepress {
font-size: 50%;
}

こんな感じ

全部ダメで、一回記事をUPしてソースコードを見る。

そしたらCSS記述で

table th, table th p, .post table tr td p, .post table tr td

を見つける。これをカスタムCSSに貼り付けるとうまくいく。

他のテーブルにもこの記述が使われると嫌なだから余計なものを消す。

けどどれが効いてるのかわからないから、一つずつ試す。

.post table tr td {
font-size: 10px;
}

これが効いてたのでこれだけ残す。+でフォントサイズを追加。

でもこれだと今回のテーブル以外にも効いちゃうよな?

ってことで調べる。

特定のテーブルにだけCSSで文字サイズを変えたい

.postの意味がよくわからんけど、これが重要な気がする。postについて調べたら、どうやらクラスの指定に使う?っぽい気がする。

テーブルタグで一つ上のCSSが効いて、最下層の記述が効かないというのがあったので見ると「詳細度が足りない」みたいだ。

.post .ta1 th, .post .ta1 td {

border: none;

}

これが書いてあった。「.ta1 td」って「.」2つ付けちゃいけないと思ったけど良いんだ。

ってことは詳しく書けばいい→独自のクラスを付ければOK?

クラスを付けたらうまくいく

クラスを付けてやれば良いのか?と思い、

.post .tablepress-id-1 td {

font-size: 10px;

}

に変えたらうまくいった。

テーブルIDを「2」にしたらデフォルトに戻ったから、今回のテーブルにだけ効くように出来たみたいだ。

まだCSS記述はわからないけど、とりあえず読者が読みやすくしたかっただけだから、今回はこれでよしとする。

落ち着いたらまた調べよう。







-日記

Copyright© 副業屋 , 2019 All Rights Reserved.