WordPressでbody閉じタグの直前に出力する内容をfunctions.phpに記述する方法

WordPressでbody閉じタグの直前に出力する内容をfunctions.phpに記述する方法
関連キーワード
WordPress

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に書く機会が増えました。

よく使う方法だと思うので、ぜひコピペしてお使いください。