【WP】jQueyが読み込まない原因は「wp_enqueue_script」の依存関係にあった!？

【WP】jQueyが読み込まない原因は「wp_enqueue_script」の依存関係にあった!？

ワードプレス wp-note 2021.06.09

自作したワードプレスのテーマをカスタムしていたらjQueryが読み込まれない事態に陥ったのでそのお話です。

jQueyが読み込まない

当サイト(ワードプレス)ではコード表記に「prism.js」というJavaSriptライブラリ？を使用していてfunctions.phpに以下のように記載して読み込んでいました。

※ライブラリ名の「prism.js」がプログラム本体のprism.jsと紛らわしいので以後「Prism」と記載

function prism_setting() {
    wp_enqueue_style( 'prism', get_stylesheet_directory_uri() . '/prism/prism.css',array() ,'' ,'all');
	wp_enqueue_script( 'prism', get_stylesheet_directory_uri() . '/prism/prism.js',array('jquery') ,'' ,true);
}
add_action( 'wp_enqueue_scripts', 'prism_setting' );

「array()」はjQueryの依存関係を示すものでjQueryがないと動作しないプログラムを使用する時に「array(‘jquery’)」と記載してjQueryを先に読み込みさせて利用するものです。

余談ですが「array(‘jQuery’)」のQの字を大文字でとかと書くとエラーになります。

～ prism/prism.js',array() ,'' ,true);

「Prism」自体はjQueryに依存しないので無駄な記載だと思って「jqurey」の文字を削除したらprism.jsを読み込まれなくなりました。

また、footer.phpに記載していた下記のようなjQueryを利用したブクログラムも動作しなくなりました。

<script>
jQuery(function() {
    var topBtn = jQuery('.page-top,.page-down,.home_buttom');    
    topBtn.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 0) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});
</script>

症状的にどうもjQueryが読み込まれていないようなのでディベロッパーツールのコンソールで調べてみたらUncaught ReferenceError: jQuery is not difined at …とエラーを吐いてました。因みにjQueryの利用方法が複数ありますがワードプレスに入っているものしか使っていません。

<?php wp_head(); ?>や<?php wp_footer(); ?>も設置していますし、ワードプレス専用jQueryを利用する際には他のスクリプトと衝突しないように「＄」の代わりに「jQuery」に書き換えています。

ワードプレスでは自動的にjQueryを読み込んでいると理解していたんですが、テーマでjQueryに依存していなければ自動的に読み込まれないということなんでしょうか。

その辺のことを調べていたら以下の記事(※「キューになくても依存関係で出力される」)が参考になりました。

prism.jsが読み込まれないのも依存関係でいうと親になるjQueryが読み込まれないのでそれ自体も読み込まれなくなるという理解でいいでしょうねぇ。

フッターで読み込んでいたスクリプトの処理

フッターで読み込んでいたスクリプトは外部ファイル化(xxx.js)してwp_enqueue_scriptで読み込み、jQueryに依存するように記載したら自動的にjQueryがheaderで読み込まれるようになりました。

function js_register_script() {
	wp_register_script('smoothly-scrolls', get_template_directory_uri() . '/js/smoothly-scrolls.js', array('jquery'), '', true);
	wp_register_script('updown-arrow', get_template_directory_uri() . '/js/updown-arrow.js', array('jquery'), '', true);
	wp_register_script('infomation-fix', get_template_directory_uri() . '/js/infomation-fix.js', array('jquery'), '', true);
	}
}