子テーマを作ってみて気づいたWordPressのJavaScriptの依存関係

めずらしくWordPressの子テーマを作ってる。子テーマはまずCSSのカスタマイズから始まる。さらにカスタム投稿タイプやショートコードなど使いたい場合は、functions.phpを用意する。そして今回、子テーマでJavaScriptを追加しようとしてひっかかったことがある。

子テーマのJavaScript

子テーマのCSSやテンプレートは自動的に優先される。ではJavaScriptはどうか？
子テーマ(bird-child)に js/script.js を追加したい場合、

wp_enqueue_script( 'bird-child', get_stylesheet_directory_uri() .'/js/script.js', array( 'jquery' ), '1.00');

いつもの記述では思うように動かなかった。出力されたHTMLを確認すると親テーマのJavaScriptに依存しているのに、子テーマのJavaScriptが先に読み込まれてしまっているようだ。JavaScriptの順番を変更することなどできるのだっけ？と考えた。

JavaScriptの依存関係

JavaScriptを読み込むには、アクションフックwp_enqueue_scriptsのタイミングで wp_enqueue_script()を行う。このとき第3パラメータの配列に依存スクリプトを指定する。jqueryに依存している場合は前記のコードとなる。
今回は親テーマ(birdfield)のJavaScriptにも依存しているので、

wp_enqueue_script( 'birdfield-child', get_stylesheet_directory_uri() .'/js/script.js', array( 'jquery' , 'birdfield' ), '1.00');

jqueryに連ねて親テーマのJavaScriptの識別子(birdfield)を指定する必要がある。この識別子は親テーマの wp_enqueue_script()に書いてあるのを探すのだ。

こうすることで、

1. jQuery
2. 親テーマのJavaScript
3. 子テーマのJavaScript

の順番にJavaScriptが読み込まれるようになった。

親テーマを選ぶ

親テーマには、私が公式ディレクトリに公開しているBirdFIELDを選んだ。WordPressに必須＆推奨の機能がほぼ満たされているので、基本的な処理を親テーマに任せておけばよい。とはいえ自分で作ったテーマを親に選んでみると、cssのダメさとテンプレートの弱点がよく見えてくる。その部分は親テーマをアップデートしたり、バグFixしながら強化していけばよいので、一石二鳥と考えよう。