Wordpressで子テーマに独自のJavaScriptを追加して読み込みたい場合。
親テーマのJavaScriptを継承してカスタムしたい場合に使える技をご紹介！
親テーマをカスタムしたい場合は子テーマを編集するのが基本。
スタイル(style.css)やfunctions.phpは始めから子テーマの中にあり、これを編集するだけで親テーマを上書きできるけど…JSって無いの？テーマのJSファイルを子テーマでカスタムしたい！
そんな方に親テーマのJSファイルを子テーマで上書き読み込みする方法です。
子テーマ内のJSファイルをfunctions.phpで読み込んで実装します。
この記事の目次
子テーマにJSを追加して読み込む方法
子テーマ（-child）はテーマの編集用に使用するのが一般的
Wordpressでテーマをカスタマイズしたい場合、親テーマのファイルを子テーマ内の同じ場所に同じ名前で置くだけで子テーマによって上書き（継承）され、子テーマで編集したものがテーマに反映されるようになっています。
親テーマのアップデートで編集内容が上書きされ消えてしまうのを防ぐために子テーマを使用するのですが、通常スクリプト(JavaScript)は継承されません。
親テーマのスクリプトをカスタムしたいのですが、親テーマ内のファイルを編集していてもアップデートで消えてしまうので、子テーマに親テーマのJavaScriptを継承して編集しました！
追加・編集したいJSを子テーマに置く
style.cssやfunctions.phpは子テーマに置くだけで読み込まれますが、JSファイルは子テーマにフォルダを作って設置しただけでは読み込まれません。
子テーマのfunctions.phpで子テーマ内のJSファイルを読み込む必要があります。
子テーマ内のJSをfunctions.phpから読み込む
作業するフォルダは子テーマのみです。
子テーマjs/test.js
まずは子テーマ内のjsフォルダ（ない場合は作成）に追加したいJSスクリプトファイルを保存します。
親テーマのJavaScriptを子テーマでカスタムしたい方は、親テーマから編集したいJSファイルをコピーし、子テーマ内のjsフォルダに設置して下さい。
functions.phpで子テーマのJSを読込む
子テーマ内のfunctions.php
子テーマ内のjsフォルダにスクリプトファイルを保存したら、早速子テーマ内にあるfunctions.phpにてこのスクリプトの読み込みを記述します。
子テーマのfunctions.phpを開き以下のコードを追加する。
//子テーマ内のJS読み込み
function link_scripts() {
wp_enqueue_script( 'test', get_stylesheet_directory_uri() . '/js/test.js', '', '', true );
}
add_action('wp_enqueue_scripts', 'link_scripts' );※コード内の「test」の箇所はハンドル名とファイル名ですので変更して下さい。
長くなるので詳しい説明は割愛します。ポイントは以下。
- wp_enqueue_style()：CSSファイルを読み込む。
- wp_enqueue_script()：スクリプトファイルを読み込む。
- get_template_directory_uri()：親テーマのディレクトリURLを取得する。
- get_stylesheet_directory_uri()：子テーマのディレクトリURLを取得する。
スクリプトファイルを読み込む関数を使って、子テーマ内のJSフォルダまでのURLを指定し読み込んでいます。
子テーマ内のfunctions.phpにコードを追記
こんな感じに子テーマのfunctions.phpに記述して保存したら、うまく読み込まれているか確認してください。
ハンドル名が良く分からない！という方はファイル名と同じでも多分動くはず…
まとめ
独自のスクリプトを子テーマで読み込んだり、親テーマのスクリプトを子テーマでカスタムしたい時に使えそうな方法でした。
テーマにjQueryやJavaScriptを使って機能を追加したい時にも子テーマを利用した方が良いと思います。
特に自動アップデートされると実装していた機能が一時的に使えなくなってしまうので、スクリプトをカスタムする時も子テーマを使うようにしましょう。
