今回はこんな悩みを解決します。
WordPressの親テーマに手は加えず、子テーマ側でJavaScriptファイルを読み込みたい時ってありますよね。
結論、子テーマをインストールして有効化していれば、簡単にJavaScriptファイルを追加して読み込むことが可能です。
本記事を読んでいただければ、子テーマからJavaScriptファイルを読み込み、プログラムを実行することができます。
記事でわかること
- ・子テーマからJavaScriptファイルを読み込む方法
- ・読み込まれているか確認する方法
記事の信頼性
筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。
CONTENTS［ hide ］
WordPressの子テーマからJavaScriptファイルを読み込む方法
まず前提として、子テーマのインストールを完了している必要があります。
これについては下記の記事でご説明していますので、まだ子テーマをインストールされていない方はあわせてご確認ください。
子テーマのインストールが完了したら、早速JavaScriptファイルを追加しましょう。
子テーマフォルダにJavaScriptファイルを作成
まず、お使いのFTPソフト、またはレンタルサーバーの管理画面のファイルマネージャーなどで、子テーマフォルダ（wp-content > themes > 子テーマフォルダ）を開きます。
開いたら子テーマフォルダ内に、新しいテキストドキュメントを作成してください。
作成したテキストドキュメントのファイル名を「script.js」に書き換えてください。
ファイル名を「script.js」に変更すると、アイコンが下の画像のように切り替わるので、これでJavaScriptファイルの準備は完了です！
子テーマのfunctions.phpにJavaScriptファイルを読み込む記述を追加
JavaScriptファイルは作成できましたが、まだこのままではページで読み込まれません。
子テーマの「functions.php」に、JavaScriptファイルを読み込む記述を追加する必要があります。
子テーマを導入する時、下のようなコードで「functions.php」を作成しましたね。
上のコードに、JavaScriptファイルを読み込む記述を追記します。
FTPソフトまたはファイルマネージャー等で「functions.php」をローカル環境にダウンロードして、テキストエディタで下記のコードを画像の赤枠の箇所に追加してください。
wp_enqueue_script( 'child-js',
get_stylesheet_directory_uri() . '/script.js',
array(), '', true
);
コードを追加できたら、FTPソフトまたはファイルマネージャー等で子テーマフォルダ（wp-content > themes > 子テーマフォルダ）に「functions.php」をアップします。
ちなみに、下の画像のようにWordPressの管理画面から「外観」⇒「テーマエディター」で「functions.php」を選び、直接コードを追加してもＯＫです。
JavaScriptファイルをアップロードしてテストしてみる
FTPソフトまたはファイルマネージャー等で、子テーマフォルダ（wp-content > themes > 子テーマフォルダ）に「script.js」をアップしてください。
アップが完了したら、WordPressの管理画面から「外観」⇒「テーマエディター」で「script.js」を編集できるようになりますので、試しにアラートを表示する簡単なコードを入力してみましょう！
(function () {
alert('hello world!');
})();
上記コードを追加できたら保存をして、サイトTOPページを開いてみてください。下の画像のようなアラートが表示されたら「script.js」が読み込まれている証拠なので、ＯＫです！
最後に：WordPressの子テーマからJavaScriptファイルを読み込む方法
最後までお疲れ様でした！
JavaScriptファイルを読み込めるようになると、さらにブログカスタマイズの幅が広がりますね♪
当ブログでは今後もJavaScriptでできるブログデザインの記事をアップしていく予定なので、お楽しみにしていてください！
それでは、今回はこの辺で！
