WordPressサイトに雪を降らせるプラグイン「snowy」を作りました

前回のエントリー「WordBench東京で触発されて独自プラグインを作ってみることにしました。」では、どうしてプラグインを作ろうと思い立ったのか、という経緯について書きました。

さていよいよ、実際にプラグイン化してみます。

まずはローカル上でHTMLにJavascriptを書いて動かしてみる

まずは、ローカル上でシンプルなHTMLにJSを書いてみて、ちゃんと予想どおりに動くかどうか、確認をします。

使ったのはこれ。

Snow Falling Effect with JQuery

jQueryで雪を降らせるスクリプトです。

(1) Head内にコレを書く。

	<script src="js/jquery1-7-1.js"></script>
	<script src="js/jquery.snow.js"></script>

(2) bodyのどこでも好きなところへコレ。

<script>
$(document).ready( function(){
        $.fn.snow();
});
</script>

よし動いた！

WordPressのheader.phpに直接書いてみる

ローカルのHTMLで動くことが確認できたので、すぐにでもプラグイン化したい！
でもちょっと待ってください。まずは直にheader.phpに書いて、WordPressに組み込んでみます。
いきなりプラグインを作りはじめて動かなかったら、それが自分の書いたphpコードがまずいのか、それともWordPress特有の要因なのか判断できなくなります。めんどくさいんですが、ちょっとずつステップアップする方式でやってみます。

ワードプレスにはあらかじめjQueryが入っていますから

<script src="js/jquery.snow.js"></script>

だけで大丈夫でした。

$はコンフリクトを防ぐため、jQueryと書き直す必要があります。

<script>
jQuery(document).ready( function(){
        jQuery.fn.snow();
});
</script>

こういう風に。

動きました！

それじゃーいよいよプラグイン化します！！！

ファイル構成はこんな感じにします。

snowy.phpに、javascriptを呼び出して実行するコードを記述します。

wp_enqueue_scriptというのを初めて知りました。enqueueはエンキューと読むらしい。

このサイトの説明を読んで参考にしました。
↓　↓　↓

待ち行列（queue）とは

待ち行列（キュー）も，逐次入出力が繰り返されるデータを一時的に貯えておくためのデータ構造である。なお，英語でキュー(queue)とは，レジなどで順番を待つ人の列も意味する。

待ち行列にデータを追加することを enqueue と言い，待ち行列からデータを取り出すことを dequeue と言う。待ち行列へのデータの追加取り出しは次のように行われる。

enqueue：
追加されたデータは順次，待ち行列の末尾に付け加わる。行列の長さは１だけ増える。
dequeue：
データを取り出すときには，待ち行列の先頭から取り出す。行列の長さは１だけ減る。

ふーむ。なんとなくわかったような・・・わからないような・・・

すでに公式プラグインになっているもののソースを見てみると、

javascriptを呼び出してWordPressプラグインで使えるようにするためには、
wp_register_scriptで登録して、wp_enqueue_scriptで呼び出すように使えばいい

みたいです。たぶん。

[参考]

wp_register_scriptとwp_register_styleの使い方

wp_register_script($handle, $src, $deps, $ver, $in_footer);

＜引数について＞

$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前にすることができます
$srcはJavascriptのパスを書きます。この２つはwp_register_script()において必ず書かないといけない必須項目です
$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_register_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます
$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
$in_footerは登録する場所をwp_head()内かwp_footer()内で決めることができます。何も書かないとwp_head()内に登録されtrueとするとwp_footer()内に登録されます

sonwy.phpに、こういう風に書きました。

function snowy_enqueue_scripts() {
	wp_register_script( 'jquerysnow', plugins_url( 'js/jquery.snow.min.js', __FILE__ ), array(), '1.0', true );
	wp_enqueue_script( 'snowy', plugins_url( 'js/snowy.js', __FILE__ ), array('jquerysnow'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'snowy_enqueue_scripts' );

js/snowy.jsには、下記のように書きました。

<script>
jQuery(document).ready( function(){
        jQuery.fn.snow();
});
</script>

jquery.snow.jsは変更せず、そのまま使います。Ivan Lazarevicさん、ありがとう。使わせていただきます。

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($){
	
	$.fn.snow = function(options){
	
			var $flake 			= $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
				documentHeight 	= $(document).height(),
				documentWidth	= $(document).width(),
				defaults		= {
									minSize		: 10,
									maxSize		: 20,
									newOn		: 500,
									flakeColor	: "#FFFFFF"
								},
				options			= $.extend({}, defaults, options);
				
			
			var interval		= setInterval( function(){
				var startPositionLeft 	= Math.random() * documentWidth - 100,
				 	startOpacity		= 0.5 + Math.random(),
					sizeFlake			= options.minSize + Math.random() * options.maxSize,
					endPositionTop		= documentHeight - 40,
					endPositionLeft		= startPositionLeft - 100 + Math.random() * 200,
					durationFall		= documentHeight * 10 + Math.random() * 5000;
				$flake
					.clone()
					.appendTo('body')
					.css(
						{
							left: startPositionLeft,
							opacity: startOpacity,
							'font-size': sizeFlake,
							color: options.flakeColor
						}
					)
					.animate(
						{
							top: endPositionTop,
							left: endPositionLeft,
							opacity: 0.2
						},
						durationFall,
						'linear',
						function() {
							$(this).remove()
						}
					);
			}, options.newOn);
	
	};
	
})(jQuery);

一応$は、jQueryに書き換えてみた。

そしたら、動いたけど・・・
何故！！
降って来た雪が・・・・黒い！！！！

なぜーなぜーーーーー・・・・

落ち着いてソースを見直してみると、
query.snow.min.jsではsnowflakesの色指定が白になっていなかったからでした。(- -);

こんなに短いコードだし、あえてminにしなくてもいいだろうってことでquery.snow.jsの方を生かすことにして解決。

できた・・・・とりあえず、できた。

たった５行しかコード書いてないけど。

人の書いたjQueryとjavascript呼び出しているだけだけど。

これでも立派なプラグインだ。（たぶん）

さあ、次は公式プラグインとしてwordpress.org/plugins/に公開することを目指します。

きのう申請出してみたけど、「レビュー待ちのプラグインがたくさんあるから辛抱強くまっててねー」っていうメッセージが出てた。さっきチェックしてみたら、昨日59個だったレビュー待ちプラグインが今日は85個に増えていたので、当分返事は返ってこないかと・・・。

~~申請が通るのを待っていてクリスマスが過ぎちゃったら残念なので、ダウンロードリンクを貼っておきます。~~

追記：このブログを公開した２時間後にwordpress.orgからメッセージが届いて申請が通りました(^^);;
下記リンクは、公式プラグインのリンクです。

↓　↓　↓

WordPressサイトに雪を降らせるプラグイン「snowy」はこちら

自分のワードプレスサイトをお持ちの方は、これを使って雪を降らせてみてくださいまし！！

———————————
2/8追記
———————————
１月のWordBench東京で日下部さん・本間さん・森山さんと４人でそれぞれ自分の作ったブラグインについて発表しました。その時の記事はこちら
↓　↓　↓　↓　↓
インタビュー「プラグインを作るのって意外と簡単かも!?」