WordPressでは、季節ごとにサイトの見た目やコンテンツを切り替えることで、訪問者に新鮮さや親近感を与えることができます。この記事では、PHPやCSS、JavaScriptを活用して、春夏秋冬に応じた表示切り替えを行う方法と、その応用テクニックを紹介します。
季節を判定する方法
まず、PHPで現在の月を取得し、それに基づいて季節を判定します。
<?php
function get_season() {
$month = date('n'); // 現在の月（1〜12）
if ($month >= 3 && $month <= 5) {
return 'spring';
} elseif ($month >= 6 && $month <= 8) {
return 'summer';
} elseif ($month >= 9 && $month <= 11) {
return 'autumn';
} else {
return 'winter';
}
}季節ごとにCSSを切り替える
以下のように、bodyタグに季節のクラスを追加します。
<body class="<?php echo get_season(); ?>">そしてCSSで見た目を調整：
body.spring {
background-color: #e3f9e5;
}
body.summer {
background-color: #fff6cc;
}
body.autumn {
background-color: #ffe5b4;
}
body.winter {
background-color: #e0f7fa;
}季節ごとの画像・バナーを出し分け
トップページに季節ごとの画像を表示：
<img src="<?php echo get_template_directory_uri(); ?>/images/banner_<?php echo get_season(); ?>.jpg" alt="季節バナー">ファイル名例：
banner_spring.jpgbanner_summer.jpgbanner_autumn.jpgbanner_winter.jpg
季節限定の投稿・お知らせ表示
<?php if (get_season() === 'winter'): ?>
<div class="season-info">
<p>冬のセール開催中！最大50%OFF</p>
</div>
<?php endif; ?>JavaScriptを使ってフロント側で出し分ける（キャッシュ対策にも）
PHPに頼らず、JSで月を取得し出し分ける例：
document.addEventListener("DOMContentLoaded", function () {
const month = new Date().getMonth() + 1;
let season = 'winter';
if (month >= 3 && month <= 5) {
season = 'spring';
} else if (month >= 6 && month <= 8) {
season = 'summer';
} else if (month >= 9 && month <= 11) {
season = 'autumn';
}
document.body.classList.add(season);
});プラグインで簡単に実装したい方（代替案）
「Content Views」や「Conditional Blocks」などの条件表示系プラグインを使えば、PHPを使わずに日時や条件に応じたブロック表示も可能です。
まとめ
季節に応じた表現は、サイトに「動き」や「気配り」を感じさせる強力なツールです。ちょっとした装飾からコンテンツ切り替えまで、工夫次第で多彩な演出が可能です。
ユーザーの滞在時間アップやコンバージョン率向上にも効果的なので、ぜひあなたのWordPressサイトでも取り入れてみてください！
