WordPressで季節ごとに表示を変える方法

WordPressでは、季節ごとにサイトの見た目やコンテンツを切り替えることで、訪問者に新鮮さや親近感を与えることができます。この記事では、PHPやCSS、JavaScriptを活用して、春夏秋冬に応じた表示切り替えを行う方法と、その応用テクニックを紹介します。

季節を判定する方法

まず、PHPで現在の月を取得し、それに基づいて季節を判定します。

<?phpfunction 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'; }}
PHP

季節ごとにCSSを切り替える

以下のように、bodyタグに季節のクラスを追加します。

<body class="<?php echo get_season(); ?>">
HTML

そしてCSSで見た目を調整：

body.spring { background-color: #e3f9e5;}body.summer { background-color: #fff6cc;}body.autumn { background-color: #ffe5b4;}body.winter { background-color: #e0f7fa;}
CSS

季節ごとの画像・バナーを出し分け

トップページに季節ごとの画像を表示：

<img src="<?php echo get_template_directory_uri(); ?>/images/banner_<?php echo get_season(); ?>.jpg" alt="季節バナー">
PHP

ファイル名例：

  • banner_spring.jpg
  • banner_summer.jpg
  • banner_autumn.jpg
  • banner_winter.jpg

季節限定の投稿・お知らせ表示

<?php if (get_season() === 'winter'): ?> <div class="season-info"> <p>冬のセール開催中！最大50%OFF</p> </div><?php endif; ?>
PHP

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);});
JavaScript

プラグインで簡単に実装したい方（代替案）

「Content Views」や「Conditional Blocks」などの条件表示系プラグインを使えば、PHPを使わずに日時や条件に応じたブロック表示も可能です。

まとめ

季節に応じた表現は、サイトに「動き」や「気配り」を感じさせる強力なツールです。ちょっとした装飾からコンテンツ切り替えまで、工夫次第で多彩な演出が可能です。

ユーザーの滞在時間アップやコンバージョン率向上にも効果的なので、ぜひあなたのWordPressサイトでも取り入れてみてください！

read next