WordPressでJavascriptの出力をheadタグ内ではなく、body閉じタグ直前に配置したいことってありますよね。
その場合、footer.phpに直接書いても良いのですが、functions.phpに書いた方がスマートだと思うので、こちらの方法についてコピペで使えるソースコード付きでご紹介します。
body閉じタグ直前にjsが挿入されるようにfunctions.phpに記述
Javascriptのコードはheadタグ内に置く場合とbody閉じタグに置く場合があります。ページの内容によりますが、最初に読み込んでおく必要のあるコードであればheadタグ内に、先にHTML全文読んだ後に読み込ませたいものはbody閉じタグ直前に設置するという使い分けをするのが一般的です。
今回紹介するのは、WordPressの「wp_footer」というアクションフックを活用してbody閉じタグ直前にjsファイルを設置する方法です。コードはこちら。
function my_wp_footer() {
wp_enqueue_script('common_js', get_template_directory_uri() . '/js/common.js');
}
add_action('wp_footer', 'my_wp_footer');
「テーマフォルダ内のjsフォルダに入ってるcommon.jsというファイル」を出力させる例です。ディレクトリ名やファイル名は任意で書き換えてお使いください。
async=”async”を追記する方法
async属性を追記して非同期処理できるようにしたい場合、上記のコードだと挿入する方法が分からず、いろいろと調べた結果下記のコードにたどり着きました。
function my_wp_footer_common_js( $tag, $handle ) {
if ( 'common_js' !== $handle ) { return $tag; }
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'my_wp_footer_common_js', 10, 2 );
これでコードを確認するとasync属性の追記ができているはずです。
「common_js」となってる箇所は、先ほどのコードでcommon_jsと合わせてます。任意で好きなものに書き換えてお使いください。
今回ご紹介した方法は、こちらのサイトを参照しました。
最後に
以前はheadタグ内やfooter.phpに直接書くことも多かったんですが、管理のしやすさからfunctions.phpに書く機会が増えました。
よく使う方法だと思うので、ぜひコピペしてお使いください。