WordPress でインライン JavaScript を追加する方法

WordPress のテーマで JavaScript ファイルを読み込むときは

wp_enqueue_script メソッドを使いますよね。

※こちらの説明はこちらでご確認ください。

今回の記事ではファイルじゃなくて インラインで書きたいときはどうすればよいか…のサンプルを書いてみます。

wp_add_inline_script を使う

とりあえずサンプルコード。こちらをテーマの functions.php やそれに準ずるファイルに書き込みます。

function add_enqueue_scripts() {
	// WordPressのバージョン
 	global $wp_version;
 	// JavaScriptファイルを読み込む
    wp_enqueue_script( 'lazyload', get_theme_file_uri( '/js/jquery.lazyload.min.js' ), array( 'jquery' ), $wp_version, true ); 
    // インラインで記述したいJavaScript
	$js_str = "
	jQuery(function($){
	$('img.lazy').lazyload();
	});
	";
	// ハンドル 'lazyload' の 後( 'after'で指定 ) に $js_str で定義したインラインコードを読み込む
    wp_add_inline_script( "lazyload", $js_str, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'add_enqueue_scripts' ); 

このサンプルでは テーマの jsディレクトリに jquery.lazyload.min.js が存在する前提になります。

※ <?php ?> 表記はありませんが、このPHPが動作する場所に書いてください。

説明

コード内のコメントで書いていますが、インラインで記述したいコードを指定したハンドル名で定義された読み込み位置の後( after )に <script>タグで読み込むようになります。

実際の出力コードはこちら

コード出力の様子
<script type='text/javascript' src='http://example.com/wp-content/themes/example_theme/js/jquery.lazyload.min.js?ver=5.7.2' id='lazyload-js'></script>
<script type='text/javascript' id='lazyload-js-after'>
	jQuery(function($){
	$('img.lazy').lazyload();
	});
	
</script>

例えば ハンドル名「lazyload」(出力上は lazyload-js)の前に読み込ませたい場合は

wp_add_inline_script( “lazyload”, $js_str, ‘after’ ) ;

の部分を下記の様に書き換えます。

wp_add_inline_script( “lazyload”, $js_str, ‘before’ ) ; // 実際には ‘before’ でなくても良いです。 ‘after’ではないものを指定されると前に出力されるようです。

実際にやってみたら出来ました。

<script type='text/javascript' id='lazyload-js-before'>
	jQuery(function($){
	$('img.lazy').lazyload();
	});
	
</script>
<script type='text/javascript' src='http://example.com/wp-content/themes/example_theme/js/jquery.lazyload.min.js?ver=5.7.2' id='lazyload-js'></script>

今回のサンプルコードではインラインJavaScriptの前に ‘lazyload’ なるものを作って読み込むようにしていますが、それがなくても構いません。

例えば下記のようにしてみます。

function add_enqueue_scripts() {
    // インラインで記述したいJavaScript
	$js_str = "
	jQuery(function($){
	$('img.lazy').lazyload();
	});
	";
	// ハンドル 'jquery-core' の 後( 'after'で指定 ) に $js_str で定義したインラインコードを読み込む
    wp_add_inline_script( "jquery-core", $js_str, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'add_enqueue_scripts' ); 

そうすると下記のように出力されます。

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' id='jquery-core-js-after'>
	jQuery(function($){
	$('img.lazy').lazyload();
	});
	
</script>

いつもの jquery の後に出力されるようになりました。

これを使えば、任意のプラグインが出力している JavaScript ファイルの後に読み込み…などいろいろ応用出来ると思います。

この記事が気に入ったら
いいね ! しよう

Twitter で