[WordPress]カレンダーウィジェットのHTMLをCSSで調整しやすくするカスタマイズ ~ 日付をspanで囲む

WordPressのカレンダーウィジェットは空欄なら「pad」クラスが付いていたり、曜日はthead、ナビゲーションはtfootと綺麗に分かれているHTML構造になっています。

ただ1点、tbody内でのリンク有無によるtdタグのCSS調整が難しいです。

ので、フィルターフックを使いHTML構造を少し変えることにしました。aタグがない日付(tdタグ)をspanタグで囲むという単純なカスタマイズです。

カレンダーウィジェットのHTML構造をカスタマイズ

以下をfunctions.phpに記述します。

これで日付の数字テキストをspanタグで囲むHTMLになります。

 

おまけ

spanタグありでのカレンダーウィジェット用CSSです。

テーブルなので他に必要なCSSはあると思いますが(borderなど)、これで少しは調整しやすくなるのではないでしょうか。

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/calendar-widget-html-customize/trackback/