functions.phpでjsが読み込まれないの解決方法。wp_footerちゃんと書いてる？？

wordpressで使うfunctions.php

そこに記述したjsがなぜか読み込まれなくて詰まったので原因をまとめます。

原因は「<?php wp_footer(); ?>の記述漏れ」でした。

<?php wp_footer(); ?>の記述漏れ

wordpressでオリジナルテーマを作成するときには、<?php wp_footer(); ?>という記述をfooterタグの直後に記述します。

今回はこれの記述漏れが原因でjsの読み込みがされませんでした。

<?php wp_footer(); ?>は、jsなどのscriptを実行するフックの役割もあります。

え、でもそんな支持してないけどな…と思ってたのですが、ちゃんと指示してました。

下記は自分のfunctions.phpです。

<?php 
function custom_enqueue_styles_scripts() {
    // テーマのメインスタイルシート
    wp_enqueue_style('theme-style', get_theme_file_uri('/assets/css/style.css'), array(), filemtime(get_theme_file_path('/assets/css/style.css')));

    // 独自のスクリプト
    wp_enqueue_script( 'theme-scripts', get_theme_file_uri('assets/js/script.js'), array('jquery'), '1.0.0', true );
}

add_action('wp_enqueue_scripts', 'custom_enqueue_styles_scripts');

ポイントは、 wp_enqueue_scriptの第五引数に「true」を指定していること。

これがtrueの時、wp_footerでスクリプトを実行するという指示になります。（反対に「false」だと最初に実行される）

やっぱり記述内容はちゃんと理解してないと、思わぬところで沼りますね…

jsを最後に読み込むメリット

ではなぜjsをwp_footerをフックにして、最後に読み込むのでしょうか。

大きな理由の一つに「サイト速度の向上」があります。

jsを最初に読み込むと、読み込みが完了してからHTMLを読み込み、画面表示の遅延につながります。

なのでjsは最後に読み込むことを推薦されているということです。

まとめ

ということでfunctions.phpでjsが読み込まれない原因は、<?php wp_footer(); ?>の記述漏れでした。

それ以前に一番の問題はphpの関数や、functions.phpのオプションの意味を理解せず記述していたことです。

理解が曖昧なまま記述すると思わぬバグに遭遇するので、今後の戒めとします。