WordPress ちょっとしたスクリプトを記述する簡単な方法

WordPress で、ちょっとした jQuery に依存するスクリプトを記述するとき、どのようにしていますか?

wp_head フックや wp_footer フックでスクリプトを直接出力したり、js ファイルを作成して組み込む等の方法がありますが、WordPress 4.5 から追加された wp_add_inline_script 関数を使えば依存するスクリプトや出力位置も簡単に指定できるようになります。

WordPress 4.4 以前の場合

function my_enqueue_scripts() {
	if ( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_head() {
?>
<script>
jQuery(function($) {
  $("span").append("Hello world!");
});
</script>
<?php
}
add_action( 'wp_head', 'my_head', 10000 );

wp_add_inline_script 関数を使用した場合

function my_enqueue_scripts() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}
	$script = '
jQuery(function($) {
  $("span").append("Hello world!");
});';
	wp_add_inline_script( 'jquery-migrate', $script, 'after' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

こんなに便利な関数なのにあまり使われていない(?)ようなので紹介してみました。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。