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

  • 更新日:
  • 公開日:

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など)、これで少しは調整しやすくなるのではないでしょうか。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone