どうも、イソップです。
この前、wp_footerにscriptタグを挿入する方法を紹介しました。
今日は外部スクリプトではなくて、インラインのscriptブロックを挿入する方法を紹介したいと思います。
body閉じタグ直前でscriptタグを挿入する
前回はレンダリングブロックの問題についても説明しました。
特にheadタグで読み込まなければいけない理由がなければ、
body閉じタグの直前で読み込むのが良いんです。
今回も、同じくbodyタグ直前にscriptブロックを出力してみましょう。
よくある例として、Facebookのsdk.jsを読み込みます。
functions.php
<?php
function my_load_facebook_script() {
if ( function_exists( 'wp_add_inline_script' ) ) {
$fb = "
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.7'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/ja_JP/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
";
wp_add_inline_script('widgets_js', $fb, 'after');
}
}
add_action('wp_footer', 'my_load_facebook_script');
注目すべきは、my_load_facebook_script 内で使用している、 wp_add_inline_script という関数です。
この関数はWordPress v4.5から追加されています。
wp_add_inline_script でscriptブロックを出力する
wp_add_inline_script は、scriptブロックを出力します。
<?php wp_add_inline_script( $handle, $data, $position ); ?>
$handle
スクリプトを識別するための名称。初期値はなし。
例えば、jqueryをすでに読み込んでいてその後にタグを出力したい場合、'jquery-core' と指定する。
スクリプトごとの名称は、wp_enqueue_scriptで読み込む際に指定可能。
$data
出力するコード。
$position
出力位置を$handleの前（before）か後（after）で指定できる 。
初期値は、'after'。
実際の出力結果を見てみましょう。
<script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.6.1'></script>
<script type='text/javascript'>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.7'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/ja_JP/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
例では、Twitterのwidget.jsの直ぐ後に出力するようにしました。
いい感じですね。
wp_headも使えるよ
今回はwp_footerに追加する方法を紹介しましたが、add_action('wp_head' , ...); とすればwp_headにも出力することも出来ます。