Jump to the content

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

WordPress

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×