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

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」にする」というのをやってみましょう。

 

サンプル「JetPackの冬季だけ雪を降らせる「SnowStorm」を桜に変えて「SakuraFubuki」にする」

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

以下のコードを my-plugin.php に張り付けてください。
※Jetpackプラグインはインストールしておいてください。

/**
 * Jetpack SnowStorm -> SakuraFubuki Enqueue scripts.
 *
 * WordPress4.5
 * @since Jetpack Plugin 3.9.4 
 * License: GPLv2 or later
 */
function nendebcom_sakurafubuki_scripts() {

	$snowstorm_url = plugins_url( '/jetpack/modules/holiday-snow/snowstorm.js' ) ;
	wp_enqueue_script( 'snowstorm', $snowstorm_url, array(), '1.43.20111201' );

	if ( function_exists( 'wp_add_inline_script' ) ) {
		$data = "
			snowStorm.flakeWidth  = 32;	//画像幅
			snowStorm.flakeHeight = 32;	//画像高さ
			snowStorm.flakesMax   = 15;	//降らせる画像数
			snowStorm.snowCharacter = '<img src=http://nendeb.com/img/sa2.png>';	//画像タグ
		";
		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 を読み込む前に出力されます。(この違いは大きいですょ)
 

WordPress4.5未満でも「桜」を試したい場合、上記のコードだけでは JavaScript のコードが出力されません。このままでは「雪」がふってしまいますので以下のコードを追加してください。

function nendebcom_sakurafubuki_scripts_wp_head() {
	if ( !function_exists( 'wp_add_inline_script' ) ) {
	?>
	<script type='text/javascript'>
		snowStorm.flakeWidth  = 32;
		snowStorm.flakeHeight = 32;
		snowStorm.flakesMax   = 15;
		snowStorm.snowCharacter = '<img src="http://nendeb.com/img/sa2.png">'
	</script>
	<?php
	}
}
add_action( 'wp_head', 'nendebcom_sakurafubuki_scripts_wp_head' );

※画像を変えていろいろ試してみてください。

 



 

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/

Jetpack の最重要機能紹介 UNPCO
http://unpco.com/archives/1759