functions.phpを使ってbody最下部にJavaScriptコードを入れる方法
せっかく WordPress を使っているので、ギミック的な JavaScript コードの紹介をするときは WordPress ですぐに使える形がしたいなと思い body の最下部、つまり、
・・・
<script>
//ここに挿入
</script>
</body>
</html>
と functions.php から インラインの JavaScript コードを挿入できる方法を考えました。直接メインのテーマを編集することなく、functions.php の編集だけで入れられる事で利便性が増すのではないかと思います。
なぜ head ではなく body 最下部なのか
head ではなく body の最下部に JavaScript コードを挿入することの利点は、Web ページの描画を高速化することです。昔は head 要素に script タグを使って書いてあげることが主流でしたが、最近の流行りはbody の下の方に書くことです。例えば jQuery でよく使われるコードで
$(document).ready(function() {
//実行コード
});
や
$(function(){
//実行コード
});
というものがあり、jQuery の技術書には絶対使いなさいと呪文のごとく書いてありました。これは何のためのコードかというと jQuery のコードを head に書くが故に必要なコードで、簡単に言うと「HTML がすべて読み込み終わったらこの中のコードを実行してね」という命令です。
head で読み込まれた jQuery コードは、そのコードが読み込まれた時点ではその下にある body、その中身の要素はまだ読み込めていません。読み込んだ瞬間にコードを実行しようと思っても何の DOM も取得できません。ですので、上のコードで囲むことで HTML 全体が読み込み終わるまで実施せずに待機させておきます。
ただ、これだとせっかく head で読み込んでも待機しているのでは無駄な読み込みです。jQuery コードを読み込んだ瞬間にそのまま実行してしまった方が効率が良いので、HTML をすでに全部読み込み終わっている body 最下部で読んだ方がいいという事になり、最近は body 最下部に書くことが多いです。
jQuery コードを使いたいときは body 最下部でコードを読み込むのであれば上の $(document).ready や $(function(){}) で囲む必要はないという事になります。たまに最下部で読み込んでいるコードにもかかわらず、これで囲ってるのを見たりします。無駄なので止めましょう。head で読み込むべきコードも当然あるのですが、ほとんどのコードは最下部で読み込んでも問題なく動作します。
body の一番下に JavaScript コードを挿入する
wp_footer のアクションフックを使います。functions.php に以下のコードを追加。
functions.php
<?php
function my_js_function() {
echo <<< EOM
<script>
//script コード
</script>
EOM;
}
add_action( 'wp_footer', 'my_js_function' );
?>
フッターにある wp_footer のアクションフックで呼び出しているだけなのですが、echo を使うため複数行対応がそのままだと少し面倒くさいです。ですのでヒアドキュメント構文というものを使います。
詳しくは下記の参考記事を調べてほしいのですが、<<< EOM から EOM; までを一気に echo する、という命令です。複数行の改行やコーテーションのエスケープも必要なく、そのまま出力してくれます。EOM という文字列は自由に変更可能だそうです。
echo に限らず変数などにも入れられるようですが、今回は echo したいだけなのでそのまま echo します。これで任意の JavaScrip コードを body 下に挿入することが出来ました。
追記
wp_print_footer_scripts というフックがあり、これを使った方が直感的にインライン JavaScript を挿入できるかもしれません。興味のある方は自分で調べてみてください。
まとめ
ヒアドキュメントを使う事で改行していても echo 出来るのがいいですね。これで出来ないと JavaScript コードの改行を除去するか、一行ごとに echo するしかないので大変です。
これで WordPress でコピペで使える JavaScript コードが書けそうなので書いていけたらいいなと思っています。