投稿者: admin

WordPressのデフォルトカレンダーで土日を非表示にしたいという場合に、CSSだけで非表示にするコード

table#wp-calendar tr:first-child td:nth-last-child(1) {
  display:none;
}
table#wp-calendar tr:first-child td:nth-last-child(2) {
  display:none;
}
#wp-calendar td.pad {
  line-height:0;
}
table#wp-calendar tr th:nth-child(6) {
  display:none;
}
table#wp-calendar tr td:nth-child(6) {
  display:none;
}
table#wp-calendar tr th:nth-child(7) {
  display:none;
}
table#wp-calendar tr td:nth-child(7) {
  display:none;
}

まず、第一週ははじまる曜日によってtdの数が異なる。例えば金曜日がその月の1日の場合、月曜日から木曜日は　td.pad　となりひとつの td　としてコードが吐き出される。

それで、nth-last-childをつかって、後ろから1番目と2番目、を指定して非表示にする。

ただし、土曜日がその月の1日の場合、一行何も表示しないまま、td.pad　が高さを維持してしまうため、　#wp-calendar td.pad のline-height:0; を指定。

第二週目以降はnth-childで6番目と7番目を指定して非表示にする。

最終週は終わる曜日によってtdの数が異なるが、この場合はcssが効かなくても問題ない。

以下まとめて書くと次のようになる。

WordPress　カレンダーで土日を非表示にするコード

table#wp-calendar tr:first-child td:nth-last-child(1),
table#wp-calendar tr:first-child td:nth-last-child(2),
table#wp-calendar tr th:nth-child(6),
table#wp-calendar tr td:nth-child(6),
table#wp-calendar tr th:nth-child(7),
table#wp-calendar tr td:nth-child(7) {
  display:none;
}
#wp-calendar td.pad {
  line-height:0;
}