サイトのトップページに、季節に合わせて桜・クローバー・紅葉・雪が舞うWordPressプラグインを作りました。
日付を見て自動で切り替わるので、入れたら1年中ほったらかしでOK。春は蕾から開花、秋は緑から真っ赤へと、本物の季節のように少しずつ移ろいます。
まずはクリックで試してみてください
リンクを押すと、当ブログのトップページがその日の季節で表示されます。
この ?koro-date=日付 は、プラグインを入れたあとご自分のサイトでも使えます。季節を待たずに見た目を確認できます。
1年の移り変わり
| 期間 | 舞うもの |
|---|---|
| 12/24〜2/19 | ❄️ 雪の結晶 |
| 2/20〜3/26 | 雪に桜の蕾がまじり、やがて蕾だけに（開花前なので花は出ません） |
| 3/27〜4/14 | 🌸 開花 → 満開 → 花吹雪 |
| 4/15〜4/20 | 🌸 花びらだけ |
| 4/21〜10/14 | 🍀 クローバー |
| 10/15〜12/23 | 🍁 紅葉（緑 → 黄 → オレンジ → 真っ赤 → 枯れ葉色） |
葉っぱや花の1枚ずつに「せっかちな子」「のんびりな子」の個性があるので、切り替わりの時期は自然に混ざり合います。クリスマスイブからは雪になります。
使い方：有効化するだけ
- 下のボタンから、zipファイルをダウンロード（解凍しないでそのまま使います）
- 管理画面の「プラグイン → 新規プラグインを追加 → プラグインのアップロード」でzipを選ぶ
- 「有効化」を押す
設定画面はありません。有効化すると、サイトのトップページ（https://あなたのサイト/）に表示されます。ホームページの表示が「最新の投稿」でも「固定ページ」でも動きます。止めたいときは「無効化」するだけです。
仕様
| 表示する場所 | サイトのトップページだけ（他のページではファイルも読み込みません） |
| 季節の判定 | 見ている人のパソコンやスマホの日付で、自動で切り替え |
| 季節の基準 | 大阪の平地（桜の開花は3/27、紅葉の見頃は11月末で設定） |
| 重さ | 約20KB。外部のライブラリやサイトは読み込みません |
| 保存するデータ | なし（データベース・Cookieは使いません） |
| 省エネ | 1画面分スクロールすると止まり、上に戻るとまた舞い始めます |
| クリックの邪魔 | しません（リンクやボタンはそのまま押せます） |
| やさしさへの配慮 | 端末の「視差効果を減らす（動きを減らす）」設定がオンの人には表示しません |
| 形のデータ | 6種類（雪の結晶・蕾・桜の花・花びら・クローバー・紅葉）すべてオリジナル |
| 動作条件 | WordPress 5.2以上。テーマが wp_body_open に対応していること（最近のテーマはほぼ対応） |
| ライセンス | GPL v2 以降（自由に使って、改造してOK） |
ちょっとだけカスタマイズ
設定画面はありませんが、season-fall.js の数字を変えると調整できます。ファイルの中の ① 〜 ⑥ の見出しが目印です。
| 変えたいこと | 場所 | 例 |
|---|---|---|
| 桜の開花日 | ③ の KAIKA | { m: 3, d: 27 } → 3月27日 |
| 季節の期間 | ⑤ の SEASONS | from: [10, 15], to: [12, 23] → 10/15〜12/23 |
| 大きさ | ④ の scale | [0.35, 0.5] → 2つの数字を近づけると大きさがそろう |
北海道や沖縄など、大阪と季節がずれる地域の方は、③ と ⑤ の日付を合わせてみてください。
ご注意
- 個人が趣味で作ったプラグインです。ご利用は自己責任でお願いします
- 個別のサポートや、テーマごとの動作確認はできません
- 表示されないときは、キャッシュ系プラグインのキャッシュを消すか、ブラウザで強制再読み込みをしてみてください
このプラグインができるまで
始まりは「紅葉っていつ色づくんだっけ？」という、AIとの雑談でした。コードが書けない年金生活のおばちゃんでも、基本の基本さえわかっていれば、AIと相談しながらここまで作れます。
もとになったのは、HTMLブロック1つで季節のエフェクトを付ける、こちらの記事です。1つの季節だけで十分な方や、プラグインを増やしたくない方は、こちらもどうぞ。
【WordPress】HTMLブロック1つで、LINE風の背景エフェクトを実装（季節の演出）プラグインは不要。WordPressの『カスタムHTMLブロック』1つで完結。LINEのトーク画面の背景エフェクトのような、桜や紅葉が舞う演出を自分のブログで再…
WordPressはやっぱり楽しい
- 季節の切り替えは、日付と設定表で自動化できる
- 紅葉は色のカレンダーと1枚ずつの個性で、本物らしく色づく
- 試作はp5.jsで、完成形はCanvas2Dで、約1MB → 約17KBに
- 「テストで動いた」を過信しない。1.6pxで結果が変わることもある
「紅葉っていつ色づくんだっけ？」という雑談から始まって、気づけばプラグインが1つできていました。
この記事に書いた工夫のほとんどは、AIが教えてくれたものです。私に必要だったのは、基本の基本の知識と、「こうしたい」という思いつきだけでした。
コードが書けない素人のおばちゃんでも、プロ仕様のものに手が届く。
WordPressとAIの組み合わせは、やっぱり楽しいです。
そして、自分のサイトに季節が巡るのは、思った以上にうれしいものです🍁