WordPressの子テーマからJavaScriptファイルを読み込む方法

WordPress
ウサギさん
WordPressの子テーマから、JavaScriptファイルを読み込む方法が知りたいの。

今回はこんな悩みを解決します。

WordPressの親テーマに手は加えず、子テーマ側でJavaScriptファイルを読み込みたい時ってありますよね。

結論、子テーマをインストールして有効化していれば、簡単にJavaScriptファイルを追加して読み込むことが可能です。

本記事を読んでいただければ、子テーマからJavaScriptファイルを読み込み、プログラムを実行することができます。

 記事でわかること

  • ・子テーマからJavaScriptファイルを読み込む方法
  • ・読み込まれているか確認する方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

WordPressの子テーマからJavaScriptファイルを読み込む方法

まず前提として、子テーマのインストールを完了している必要があります。
これについては下記の記事でご説明していますので、まだ子テーマをインストールされていない方はあわせてご確認ください。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

子テーマのインストールが完了したら、早速JavaScriptファイルを追加しましょう。

子テーマフォルダにJavaScriptファイルを作成

まず、お使いのFTPソフト、またはレンタルサーバーの管理画面のファイルマネージャーなどで、子テーマフォルダ(wp-content > themes > 子テーマフォルダ)を開きます。

開いたら子テーマフォルダ内に、新しいテキストドキュメントを作成してください。

新しいテキストドキュメントを作成

作成したテキストドキュメントのファイル名を「script.js」に書き換えてください。

※拡張子を非表示にしていると、拡張子(.js)に書き換えることができないので、表示する設定にしてください。例えばWindows10環境であれば、フォルダの[表示]タブ⇒[ファイル名拡張子]にチェックを入れれば拡張子が表示されます。

ファイル名をscript.jsに書き換える

ファイル名を「script.js」に変更すると、アイコンが下の画像のように切り替わるので、これでJavaScriptファイルの準備は完了です!

script.jsファイルの準備完了

子テーマのfunctions.phpにJavaScriptファイルを読み込む記述を追加

JavaScriptファイルは作成できましたが、まだこのままではページで読み込まれません。
子テーマの「functions.php」に、JavaScriptファイルを読み込む記述を追加する必要があります。

子テーマを導入する時、下のようなコードで「functions.php」を作成しましたね。

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」を選び、直接コードを追加してもOKです。

WordPressの管理画面からコード追記

JavaScriptファイルをアップロードしてテストしてみる

FTPソフトまたはファイルマネージャー等で、子テーマフォルダ(wp-content > themes > 子テーマフォルダ)に「script.js」をアップしてください。

アップが完了したら、WordPressの管理画面から「外観」⇒「テーマエディター」で「script.js」を編集できるようになりますので、試しにアラートを表示する簡単なコードを入力してみましょう!

(function () { alert('hello world!'); })();

script.jsにコードを追加

上記コードを追加できたら保存をして、サイトTOPページを開いてみてください。下の画像のようなアラートが表示されたら「script.js」が読み込まれている証拠なので、OKです!

alert表示

最後に:WordPressの子テーマからJavaScriptファイルを読み込む方法

最後までお疲れ様でした!

JavaScriptファイルを読み込めるようになると、さらにブログカスタマイズの幅が広がりますね♪

当ブログでは今後もJavaScriptでできるブログデザインの記事をアップしていく予定なので、お楽しみにしていてください!

それでは、今回はこの辺で!

ウサギさん
最後までご覧いただきまして♪
モチ
ありがとうございますっ!

WordPressに子テーマを追加してCSSでカスタマイズしてみよう!

2020年2月21日

WordPressテーマのスワローをレビュー

【 WordPress 】スワロー( SWALLOW )のレビュー【 メリット・デメリット 】

2020年3月17日

WordPressテーマ「スワロー」に目次を追加しよう!【プラグイン不要】

2020年2月2日