WordPress4.5から使える wp_add_inline_script を使って「SnowStorm.js」を「桜」に変えて降らせてみる

sakura wp_add_inline_script
WordPress4.5から「wp_add_inline_script」が使えるようになりました。
「wp_add_inline_script」は ヘッダー部分等に JavaScriptをインラインで埋め込めるようにするものです。
今までは、「add_action( ‘wp_head’~」を使うか header.php等に直接書き込んだりしていましたが、これによりスクリプトの出力位置も簡単に指定できるようになります。

wp_add_inline_script

wp_add_inline_script( $handle, $data, $position );

$handle 関連するJavaScript(ファイル)のハンドル名を指定します。
$data JavaScriptのコード
$position 指定したハンドル名のJavaScript(ファイル)読込の前に出力する(‘before’)か、後ろに出力する(‘after’)か を指定します。(デフォルトは’after’)

※公式な情報ではありません。

これで、$dataに入れたコードが<script type=’text/javascript’>~</script>間に入れて出力されます。

という事はjQueryのライブラリとか使う時、ページの条件等でパラメータ変化させて設置する場合とかは とてもやりやすくなります。

では、この「wp_add_inline_script」を使って「JetPackの冬季だけ雪を降らせる「SnowStorm」を桜に変えて「SakuraFubuki」にする」というのをやってみましょう。

 

サンプル「SnowStorm」を桜に変えて「SakuraFubuki」にする」

今はもうありませんが 以前、JetPackプラグインは毎年、12月より1月4日まで「雪 ~snow~」を降らす機能がついていました。
この機能(script)を利用して「雪」を「桜」に変えて「SakuraFubuki」にする例を紹介します。

①こちらのサイトから「snowstorm.js」をダウンロードして my-plugin フォルダへ置いてください。
http://www.schillmania.com/projects/snowstorm/
②こちらから「sa2.png」をダウンロードして my-plugin フォルダへ置いてください。(サンプル画像)
https://nendeb.com/img/sa2.png
②以下のコードを my-plugin.php に張り付けてください。

/**
 * SakuraFubuki Enqueue scripts.
 *
 * WordPress4.5
 * License: GPLv2 or later
 */
function nendebcom_sakurafubuki_scripts() {

	wp_enqueue_script( 'snowstorm', plugins_url( '/snowstorm.js', __FILE__ ), array(), '1.44.20131208', true );
	$snowstorm_img = plugins_url( '/sa2.png', __FILE__ );

	if ( function_exists( 'wp_add_inline_script' ) ) {
		$data = "
			snowStorm.flakeWidth  = 32;	//画像幅
			snowStorm.flakeHeight = 32;	//画像高さ
			snowStorm.flakesMax   = 15;	//降らせる画像数
			snowStorm.snowCharacter = '<img src=$snowstorm_img>';	//画像タグ
		";
		wp_add_inline_script( "snowstorm", $data, 'after' ) ;
	}
}
add_action( 'wp_enqueue_scripts', 'nendebcom_sakurafubuki_scripts' );

wp_add_inline_script
※$positionに ‘after’ を入れる事(デフォルト)で snowstorm.js 読み込んだ直後にJavaScriptコードを出力します。
※’before’ にすると snowstorm.js を読み込む前に出力されます。(この違いは大きいですょ)
※画像を変えていろいろ試してみてください。

 
 

Version 4.5 « WordPress Codex
http://codex.wordpress.org/Version_4.5

#14853 (wp_add_inline_script()) WordPress Trac
https://core.trac.wordpress.org/ticket/14853

Snowstorm: A JavaScript Snow Effect for HTML
http://www.schillmania.com/projects/snowstorm/