WordPressのカレンダーウィジェットは空欄なら「pad」クラスが付いていたり、曜日はthead
、ナビゲーションはtfoot
と綺麗に分かれているHTML構造になっています。
ただ1点、tbody
内でのリンク有無によるtdタグのCSS調整が難しいです。
ので、フィルターフックを使いHTML構造を少し変えることにしました。aタグがない日付(tdタグ)をspanタグで囲むという単純なカスタマイズです。
カレンダーウィジェットのHTML構造をカスタマイズ
以下をfunctions.phpに記述します。
<?php
// カレンダーウィジェットの日付を<span>タグで囲む(aタグは含まない)
function theme_get_calendar( $calendar_output ) {
$replaced_text = preg_replace( '/<td>([0-9]*)<\/td>/', '<td><span></span></td>', $calendar_output );
if( $replaced_text != NULL ) {
return $replaced_text;
} else {
return $calendar_output;
}
}
add_filter( 'get_calendar', 'theme_get_calendar' );
これで日付の数字テキストをspanタグで囲むHTMLになります。
おまけ
spanタグありでのカレンダーウィジェット用CSSです。
.widget_calendar span,
.widget_calendar a {
display: block;
padding-top: 12px;
padding-bottom: 12px;
}
.widget_calendar a:hover {
background-color: rgba(219, 219, 219, 0.5);
}
.widget_calendar td,
.widget_calendar th {
text-align: center;
}
.widget_calendar tbody {
text-align: center;
}
.widget_calendar tbody td {
padding: 0;
}
.widget_calendar tfoot #prev {
text-align: left;
}
.widget_calendar tfoot #next {
text-align: right;
}
テーブルなので他に必要なCSSはあると思いますが(borderなど)、これで少しは調整しやすくなるのではないでしょうか。