WordPressで運営しているサイトへ自身で何かのカスタマイズをするとき、いろいろなページでよく出てくるのが、JS(JavaScriptやjQuery)を記述したり、ファイルとして読み込ませるという説明。

スタイルを指定するCSSは一般的な子テーマでは既にファイルがあって、スタイルコードを書けば読み込まれるようになっていますが、JSについては対応していないものが多いですね。

そこで今回は、カスタムJSコードを挿入して実行させたり、JSの書かれたファイルを子テーマから読み込ませるための基本的な作法を紹介していきます。

子テーマから任意のJSコードを実行させるより確実な方法

テーマエディターからいつでもJS(JavaScriptおよびjQuery)コードを挿入して動かしてみることができる便利なファイルを子テーマへ実装する方法です。

1つ作っておけばカスタマイズのテストや本番で使えますね。もちろん複数作ることもできます。

1.任意のコードを記述できるファイルを作成する

パソコン上で適当なテキストエディタ（メモ帳でもOK）を開き、何も書かずに、ファイル名を「custom-js」、拡張子を「js」として「custom-js.js」というファイルを作ります。

2.ファイルを子テーマフォルダ内へ転送する

FTPクライアントツールや、サーバーのファイルマネージャーなどを使って、「custom-js.js」ファイルを子テーマの「style.css」や「functions.php」のある場所へアップロードします。

3.子テーマからファイルを読み込ませる

以下のコードを子テーマのfunctions.phpへ追加します。

function custom_js_init(){
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() .'/custom-script.js', array ('jquery'),null, true);
}
add_action('wp_enqueue_scripts','custom_js_init');

4.きちんと読み込まれているかを確認する

サイトのトップページなどを開いて、ページの本文のどこかで右クリックし、「ページのソースを表示」をクリックします。

出てきたHTMLソースをスクロールして、一番下付近に以下のように「id=’custom-js-js’」という文字列を含む記述があれば、正常に読み込まれています。

子テーマから任意のjQueryやJavaScriptコードを読み込ませる方法＆任意のファイルを読み込ませる方法|Personal WP Customization Notes (PWCN)

これで、テーマファイルエディターから「custom-js」というファイルを選択して、コードを挿入すると、コードに誤りがなければJavaScriptでもjQueryでもきちんと動作すると思います。

子テーマから任意のJSファイルを読み込ませるより確実な方法

続いて、どこかから入手したJSファイルを子テーマ内へアップロードして読み込ませる方法です。

基本的には、前項のファイル作成以外のことを行えば、ファイル化したJSをWordPressへ読み込ませることが可能です。

1.ファイルを子テーマフォルダ内へ転送する

FTPクライアントツールや、サーバーのファイルマネージャーなどを使って、JSファイルを子テーマの「style.css」や「functions.php」のある場所へアップロードします。

2.子テーマからファイルを読み込ませる

以下のコードを子テーマのfunctions.phpへ追加します（保存前にコード下の設定部分を任意に変更してください）

function child_theme_任意の名前_js_init(){
wp_enqueue_script( 'スクリプトのハンドル名', get_stylesheet_directory_uri() .'/ファイル名と拡張子', array ('jquery'),null, true);
}
add_action('wp_enqueue_scripts','child_theme_任意の名前_js_init');

コード内の項目設定方法

コード内には以下3つの日本語名称部分がありますので、保存前に変更します。

日本語名称変更方法（注意事項）
任意の名前半角英数字＋「_」のみを使用して、サイトの中で唯一となるような文字列を入力します
※読み込ませるファイル名（ハイフンは「_」に変更）にしておくとわかりやすく、重複しにくくなると思います
※上記コードの場合、先頭行と末尾行に同じものを入力します
スクリプトのハンドル名出力されるHTMLソース上で他と重複しないような文字列を半角英数字＋「_」「-」指定します
※例えば「original-js」とした場合、HTMLソース上では「original-js-js」というIDがコード上に付与されます
ファイル名と拡張子子テーマへアップロードしたファイルの名前と拡張子を入力します
※例えば「abc-def.js」というファイルの場合、そのまま「abc-def.js」と入力します

3.読み込まれているかを確認する

最後に、ファイルがきちんと読み込まれているかを確認しましょう。

確認方法は、前項と同じで、ページ表示後に本文のあたりで右クリックし、「ページのソースを表示」をクリックします。

出てきたHTMLソースをスクロールして、一番下付近に「id=’スクリプトのハンドル名’」という文字列を含む記述があれば、正常に読み込まれていて、コードに誤りがなければきちんと動作します。

おまけ　wp_register_scriptとwp_enqueue_scriptの違いは？

WordPressのカスタマイズを始めていろいろな参考ページを見ていると、「wp_register_script」「wp_enqueue_script」の違いに疑問を感じることがあるかも知れません。

結論から言うと、前項以前で紹介しているコードの通り、基本的には「wp_enqueue_script」を使えば問題ありません。

「wp_register_script」はWordPressの読み込み時（誰かのアクセス時）にいつでも呼び出せるようスクリプトを登録しておく役割、「wp_enqueue_script」は登録されている（または読み込まれた）スクリプトをHTMLソース上にリンクとして出力し、実際に使えるようにする役割を持ちます。

WordPressでは基本的にスクリプトを読み込ませるには

  1. 「wp_enqueue_script」でどのファイルを読み込むのかを特定する
  2. 「wp_enqueue_scripts」へフック（割込み）させて、ファイルを読み込ませる

の2つの処理が最低限必要ですから、以下の場合など以外には「wp_register_script」を使う必要はないと考えていいでしょう。

  • 後から部分的に読み込みを停止したり開始したりしたい場合
  • 別の場所にまとめておいたスクリプトファイルをひとまず登録しておいて、必要なところで読み込ませたい場合

ただどちらも、特に問題なければ「wp_enqueue_script」だけで十分なんですけどね。

ちなみに、これまで紹介したコードの1つを後から制御可能にしたい場合には、以下のように変更します。

function child_theme_任意の名前_js_init(){
wp_register_script( 'スクリプトのハンドル名', get_stylesheet_directory_uri() .'/ファイル名と拡張子', array ('jquery'),null, true);

wp_enqueue_script('スクリプトのハンドル名');

}
add_action('wp_enqueue_scripts','child_theme_任意の名前_js_init');

唯一「wp_register_script」で登録して、「wp_enqueue_script」で読み込ませるメリットは、上記コードのように「wp_enqueue_script」側ではハンドルのみを書けば済むのですっきりする．．というところでしょうか。

おまけ　jQueryが読み込まれないのはなぜ？

何かの参考コードでjQueryを使って．．というのがあり、その通りにしたはずなのに、なぜか動作しないときってありますよね？

ここまで紹介したコードを使えばJavaScriptもjQueryもより確実に読み込まれる（適用される）ようにしているのですが、それはなぜ？というのをおまけとして紹介しておきます。

自身で試行錯誤してみたけどうまくいかなかった時の参考にしてみてください。

WordPressでは他のjQueryライブラリを読み込ませる必要はない

jQueryはJavaScriptをより簡単に使用できるようにするライブラリ（機能）の1つで、動作させるコードの前でライブラリを読み込ませることで、記述したコードが読み込まれ、動作します。

WordPressでは、それ自身がjQueryを使っていたり、テーマやプラグインでjQeuryが使われることもおおいことから、特に読み込まないような措置をしなければ、jQueryライブラリが読み込まれるようになっています。

しかし、前述したように、jQueryを動作させるためには、それよりも先にjQueryライブラリが読み込まれている必要があり、コードの書き方や読み込ませ方によって、順番が逆になってしまい、コードは合っているのに動作しないという事態が発生することがしばしばあります。

つまり、絶対にWordPressのjQueryライブラリが読み込まれた後で、自身のスクリプトが読み込まれる必要があるのです。

これを解消する方法は、これまで紹介したコードに隠されています。サンプルとして以下に該当部分を表示します。

wp_enqueue_script( 'スクリプトのハンドル名', get_stylesheet_directory_uri() .'/ファイル名と拡張子', array ('jquery'),null, true);

上のコードの赤字で示した部分が「WordPressのjQueryライブラリの後で必ず読み込む」という依存性を指定するおまじないです。これを忘れると、確認時には問題なく動作しているように見えても、その後コードを追加したり、処理順が何等かの原因で変わったり、高速化プラグインなどを使用した際に動作しなくなることがあります。

WordPress標準のjQueryライブラリを使う際には注意が必要

前項で、WordPressでは標準でjQueryが使えるようになっているので、わざわざ外部ライブラリを読み込ませる必要がないことを紹介しました。

しかしながら、WordPress標準のjQueryライブラリは、他のライブラリと競合などを起こさない配慮から、コードに通常とは異なる接頭辞を使う必要があります。

通常、jQueryの接頭辞（コード先頭の文字）は「$」を使います。各所で公開されているカスタマイズ用jQueryコードではこれが使われているものが多いです。

WordPress標準のjQueryライブラリでは、PHP変数で使用する変数を表す「$」や、その他のライブラリでよく使われる接頭辞の「$」を使わず、「jQuery」というのを接頭辞として使うことで、jQueryであることを明確にするようになっています。

従って、どこかのコードの接頭辞が「$」になっていて、どこも間違っていないのに動作しない場合には、コード中の先頭にある「$」を「jQuery」に変えていくと、正常に動作することがほとんどです。

ただ、これにも例外があって、本来「jQuery」を使うべきところを「$」にしてますよ！という記述を追加することで、変換しなくても動作させることができる場合があります。

接頭辞として「jQuery」を使わなければならない場合は以下のような先頭コードを使います。

jQuery(function(){

一方「$」を「jQuery」の代わりとして使う場合は以下のような先頭コードを使います。

jQuery(document).ready(function($) {

どこかのページ（このサイトのページ含む）に参考として掲載されているjQueryコードを使用する場合は、このいずれかで始まっていることが多く、確認して適切に変更することで動作するようになることが多いので、「動かない！＝使えない」と単純に考えずに、作者の書き方や紹介の仕方によるものかもと考えてみてください。

jQueryが読み込まれているか、エラーになっていないかの確認方法

jQueryを書いて適用させたはずなのに、なぜか動作しない、そんなときは、きちんと読み込まれているか、エラーや警告などが出ていないかを確認する必要があります。

その時に便利なのが、ブラウザの開発者ツール（デベロッパーツール）。どのブラウザでも通常は搭載されていますが、ここではGoogle Chromeの場合の確認方法を紹介します。

ページを表示し、どこかでキーボードの「F12」を押します。

出てきた画面の右上に、赤く×となっているマークがあるのでクリックします。

すると以下のように、エラーとなっている項目が表示され、項目をクリックすると、コードのどの部分に不具合があるかを示してくれます。

子テーマから任意のjQueryやJavaScriptコードを読み込ませる方法＆任意のファイルを読み込ませる方法|Personal WP Customization Notes (PWCN)

エラーや警告は多数ありますので、エラーの文の一部をコピペするなどして検索すれば、結構な確率で原因と対処方法を知ることができます。