気づきそうで気づかない！　wp_enqueue_scriptの第三引数が生む落とし穴！

みなさんこんにちは、とてもおひさしぶりです。

千葉県船橋市でホームページ制作を行っている、株式会社ノベルティのエンジニア、橋本です！

ホームページ制作の現場で、Wordpressの組み込みjQueryを切っていて、プラグインがうまく動かないよと悩んでいるあなた！！

もしかしたらそれは、wp_enqueue_scriptの第三引数が悪さをしているかもしれませんよ…今回は先日出会った不具合実例をもとに、同じように悩んでいらっしゃる方の助けになれればと、コラムを書かせていただきました。

今回の議題「フロントエンドでプラグイン動かない問題の解決」

本事例は数多ある存在ですので、もう少しお悩みをピンポイントにフォーカスしてみましょう。

こんな状態になっている方は、もしかしたらこのコラムで解決できるかもしれません…

• WordPress組み込みのjQueryを無効化している
• コンソールで一切エラーが起きていないのに、フロントエンドに変化が起きない

このような状態を引き起こしている原因が、wp_enqueue_script()であるかもしれません。

「私は違うかな」と思った方もいらっしゃるかもしれませんが、今回ご紹介させていただく関数wp_enqueue_script()は、Wordpressでjavascriptを読み込ませるために使用する比較的メジャーな関数です。

wp_enqueue_script()についての知識もつきますので、ぜひ見ていただければと思います！

wp_enqueue_script()の解説

まずwp_enqueue_script()についてこの関数の目的は、jsファイルを重複させず、指定した順番で、依存関係を明示しながら読み込むためのものです。

具体的な使い方は下記のとおりです。

function novelty_scripts() {
  	wp_enqueue_script( "novelty", "jsのパス", array());
}
add_action( 'wp_enqueue_scripts', 'novelty_scripts' );

まず、第一引数はスクリプトのハンドルとして使われる名称です。ハンドルだと少しわかりづらいので、IDのようなものだとお考え下さい。

次に第二引数はjsのパスです。格納している場所を指定します。

続いて問題の第三引数が依存関係を示します。このjsより前に読み込まれる必要があるjsを明示します。例えば上記例のようなnoveltyという名前のハンドルで登録したjsの処理を別のjsで使いたい場合、下記のように記述します。

function novelty_second_scripts() {
  	wp_enqueue_script( "novelty_second", "jsのパス", array("novelty"));
}
add_action( 'wp_enqueue_scripts', 'novelty_second_scripts' );

これでこのjsはnoveltyのハンドルで登録したjsと関連があり、必ずあとに読み込まれることが約束されます。

そして、noveltyというハンドル名のjsが読み込まれていない状態では、novelty_secondは読み込まれません。

ここが本記事最大のポイントになります。

※最後のadd_action( ‘wp_enqueue_scripts’, ‘関数名’ );は、wordpress上で本関数を起動させるためのルールです。適切な場所で発火してくるので、興味のある方はadd_actionで調べてみましょう！

wp_enqueue_script()が不具合を起こす原因

不具合…とは少し異なりますが、wordpress標準のjQueryもwp_enqueue_script()で登録されています。ここに今回の問題の原因が隠れています。

WordPressはjQueryを標準的にサポートしており、ハンドル名はjqueryとして登録されてります。この”jquery”は管理画面内やさまざまなプラグインで使用されています。

しかしながら昨今のウェブ業界の流れを見ると、jQueryを利用しなくなっている制作も多くなっていると思います。

その場合、jQueryを空で読み込むのもリソース的に無駄なので、削除する選択を取る場合もあると思います。その場合、下記のように登録されているjsをハンドル名から削除する関数を使うケースもあるのではないでしょうか。

wp_deregister_script('jquery');

これでWordPress標準のjQueryは削除されましたが、このロジックが落とし穴を発生させてしまいます。

詳しくは次の項で解説します。

プラグインが動かない問題と解決法

その落とし穴がプラグイン動かない、ということです。

これまでのお話を整理すると、下記のような流れは割と高確率で発生すると思います。

①WordPressはjQueryを”jquery”というハンドル名で標準搭載している

②プラグインでもそのjQueryを利用しているものがある

③プラグインで利用するjsの登録時、wp_enqueue_scriptsを用いる

上記ケースの中でさらに、プラグイン側でwp_enqueue_scriptsの第三引数に”jquery”を指定しているケースがあります。

するともしテーマの制作中にwp_deregister_script(‘jquery’);を実行すると、どうでしょう。jqueryというハンドルが消えることになります。

jqueryという名前のハンドルが消滅すればプラグイン側で指定したjsも読み込まれなくなります。

ここでポイントなのが読み込まれない、ということです。

第三引数にjqueryを指定していない場合は、jQueryを利用するプラグイン側のjsは読み込まれるため、フロントエンドで必ずエラーが起こります。割と指定していないプラグインは多い印象ですが、WordpressのjQueryを前提利用しているプラグインでは書いているかもしれません。

もしエラーが起こればjQueryが足りないことに気づくため、該当箇所でwp_deregister_script(‘jquery’);を解除すると思います。

ただ、読み込まれない以上はエラーも起こらないため、ただただプラグインが動いていないように感じます。

こうなると落とし穴で、デバッグ難易度が格段に上がります。

私が実際にこの事例に遭遇した際には、圧縮されているプラグイン側のjsを部分的に読みました。jQueryが使われているのにエラーが起こっていないことに疑問を感じ、wp_enqueue_scripts()を調査したことで第三引数に出会った経緯があります。

結構プラグインのソースを読みに行くのは時間がかかるため、できれば避けたいですよね。

まとめ

今回はかなり特殊ではありますが、プラグインが動かなくなってしまった時の解決法、その一例をご紹介させていただきました！

ホームページ制作の現場では、デバッグ困難な問題って結構悩まれるんじゃないかなという印象です。

今回はそんな経験談をもとに書かせていただきました！

何かホームページ制作のお役に立てば何よりです。ではまた！