【WordPress】wp_footerにスクリプトブロックを出力する

スポンサーリンク

どうも、イソップです。

この前、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にも出力することも出来ます。

スポンサーリンク