今年も安定のシングルXmasだからワードプレスに雪を降らす

santaGoogleで「一回転」や「斜め」と検索すると、画面が回転したりするイースターエッグ。楽しいですよね。今なら「xmas」とか「santa」でも控えめなイースターエッグが見れます。去年は「let it snow」で画面に雪が振ったんですが、もう見えないようで残念。

ならば自力でという訳で、ワードプレスに雪を降らしてみたいと思います。さらに雪を降らせるプラグイン「Snowfall」のパラメーターをGUIで変更できるコントロールパネルも作ってみました。

スポンサーリンク

 

jQueryプラグインをワードプレスに導入

雪を降らせるには「Snowfall」というjQueryプラグインを使います。実はワードプレスにjQueryプラグインを導入しても、そのままでは動かないというパターンが結構あるのですが、このプラグインは大丈夫でした。公式ページからダウンロードします。現在のバージョンは1.6です。

Snowfall 1.6 | Somethinghitme

ダウンロードしたSnowfallの中には4つのjsファイルが入っています。

snowfall.js通常版
snowfall.min.js通常版の圧縮版
snowfall.jquery.jsjQueryプラグイン
snowfall.min.jquery.jsjQueryプラグインの圧縮版

今回、それぞれのバージョンを試してみたんですが、通常版はFirefoxで雪の丸みがつかない&圧縮版は画像を指定しても認識されない等の理由で、消去法的にjQueryプラグインを利用する必要がありました。

解凍したフォルダには他にも沢山のファイルが入っていますが、基本的に snowfall.jquery.js だけで動作します。雪を画像にしたい場合は画像も必要です。

 

プラグインを読み込む場所

本記事の場合、雪を降らせるのはこの記事だけなので、記事内に直接JavaScriptを記述しました。記述するJavaScriptは下の5行です。snowfall.jquery.jsをアップした場所を読み込み、snowfallを初期化します。

ポイントはjQueryの頭の「$」の代わりに「jQuery」と記述します。これがワードプレスでjQueryプラグインを利用する時のポイントです。

<script src='http://www.example.com/wp-content/uploads/2012/12/snow/snowfall.jquery.js'></script>
<script type='text/javascript'>
jQuery(window).load(function(){
    jQuery(document).snowfall();
});
</script>

しかし記事内にJavaScriptを記述すると、編集モードをビジュアルにした瞬間にコードが破壊されるので、基本的にあまりオススメできません。

この問題は、JavaScript専用の記述エリアを設けることで解決できます。

詳しくはNxWorldさんの記事にあります。

WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorld

また、全ページに共通して雪を降らせたい場合は、テーマ編集でfooter.phpなどに記述します。

 

Snowfallのカスタマイズ

snowfallは初期化時に様々な設定ができます。ざっくり説明すると、

image画像
flakeCount雪の数
flakeColor
minSize最小サイズ
maxSize最大サイズ
minSpeed最小スピード
maxSpeed最大スピード
round丸める場合は true
shadow影をつける場合は true

などが変更できます。このページの雪をコントロールできるGUIを作ったので触ってみてください。尚、画像を選んでいる時は色や丸みは反映されません。

実際に設定するには下のように指定します。

jQuery(document).snowfall({flakeCount : 100, maxSpeed : 10});

画像はsnowfallに付属のものでもよいのですが、当プログのように背景が真っ白だと見えなかったので、薄い影をつけたバージョンを作成しました。あと、桜を90%透過した画像も作ったので公開しておきます。良かったら使って下さい。

flake.png

sakura.png

最後に、このエフェクトは度が過ぎると目障りなので、さり気なく使うのが良いと思います。

 

追記 バージョン1.6でFirefoxだと画像が表示されない

公式ページに解法がありました。snowfall.jquery.jsの112行目付近のimage→imgに変更します。
snowfall.jquery.js
flakeMarkup = $(document.createElement("image"));
↓
flakeMarkup = $(document.createElement("img"));

 

 

スポンサーリンク