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 ファイルの後に読み込み…などいろいろ応用出来ると思います。