世の中フロントエンドと言えばFacebookの提供するフレームワークなどで大規模なものを想起し勝ちとなりましたが まだまだホームページに於ける小規模な実装では jQuery が活躍しますしWordPressの2017年最新版に於いても標準で読み込まれるような実装となっています。 ちょっとしたスムーススクロールやアンカーリンクの無効化などを一部に適用するなどの要請では 特定のページに読み込むだけの実装で済ませられれば大規模なフレームワークでは些か冗長さを免れません。 jQueryを利用すれば此れ等の如きJavaScriptファイルは僅か数行となりますから尚更です。
此れをWordPressの特定ページに読み込ませたりする際には functions.php にWordPressの特有関数 wp_enqueue_script を用いてファイル読み込みを実装するのが定石でしょう。 例えばhomeで関連づけられた wp_register_style を用意して孰れかのタイミングで add_action おけばif文で条件分岐した wp_enqueue_style で読み込めると言った塩梅で実に重宝です。
wp_enqueue_style('home');
処で斯うした手法を用いていたら どうにも想定した動きを果たしてくれない状況が発生しました。 例によってブラウザのコンソール画面でJavaScriptの様子を伺えば jQueryが定義されてないとがエラーを吐いています。
Uncaught ReferenceError: jQuery is not defined at arbitrary-code.js?:ver=4.7.5:1
此処で短絡的にJavaScriptの書式に因ってコンフリクトが起きていると判断すれば 貴重な時間を無駄に使うことになります。
jQuery(document).ready(function($){…});
WordPressが出力するソースを落ち着いて良く見てみれば結局 jQueryを読み込む前にJavaScriptファイルを読み込んでいないだけでした。 然うであれば読み込む順番を変えればいいのですが 出来れば出来るだけお手軽な方法を採用したいものです。
さて此処で今回の肝となる wp_enqueue_script関数について有益な情報を共有してくれているページがありました。 memocarilogの2014年3月16日の記事です。
wp_enqueue_script関数を使ってページ下部でJSファイルを読込む方法
以下、今回解決のヒントを与えてくれた箇所を引用しましょう。
wp_enqueue_script 関数とは
WordPress は WordPress本体に jQuery や prototype 等のライブラリが入っている為、自分でわざわざ jQuery本体を用意しなくてもよいようになっています。
この wp_enqueue_script関数を使って jQueryプラグイン等を読み込むと、jQuery本体等必要なライブラリも合わせて適切な順序で読み込んでくれるので便利です。
…（略）…
functions.phpに記述している場合
wp_enqueue_script を functions.phpに記述している場合は、第5引数にあたる $in_footer に true を渡せばbody終了タグ直前へ出力場所を変更してくれます。
第5引数にあたる $in_footer に true を渡す
具体的には以下のようになります。最後の部分でtrueとします。
wp_enqueue_script('ハンドル名（任意）', 'ファイルの場所/function.js', array('jquery'), '', true )
head内に wp_enqueue_script を記述したままでも同様の方法で出力場所をフッターへ変更できます。
此の引用を見れば同問題に悩まれる向きにはピンと来るのではないでしょうか。 即ちwp_enqueue_script関数の引数に , array('jquery') を追加するだけで良いのではないか、と言う着想です。 実際此の方法で順番はものの見事に望み通り並んでくれJavaScriptの動きは想定通りに働いてくれたのでした。 多少改変してありますが手元の元コードとWordPressが吐き出す出力結果を先ず以下に記します。
wp_register_script('arbitrary', '/js/arbitrary-code.js');
<script type='text/javascript' src='/js/arbitrary-code.js?ver=4.7.5'></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='/assets/js/html5.js?ver=3.7.3'></script>
<![endif]-->
<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
上を以下のように変更すると出力結果も其れに伴い目論見に沿った順序に変更されました。 勿論此の際ページをトップへスクロールさせる動きも問題ないものです。
wp_register_script('arbitrary', '/js/arbitrary-code.js', array('jquery'));
<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='/js/arbitrary-code.js?ver=4.7.5'></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='/assets/js/html5.js?ver=3.7.3'></script>
<![endif]-->
ヒントとなる情報の記載されるサイト memocarilog では更に WordPressの当該関数に関する詳細な情報を記載した関連ページが2011年11月27日に共有されています。
WordPressで外部ファイルに置いたjQueryスクリプトを使う
WordPress日本語公式サイトの関数リファレンスにも wp enqueue script としてページが用意されており正確を期するに依り幾分把握し難い部分もありますので 短時間で参照するには便利かと思います。 以下に其の様にして上手くまとめられた部分を引用しておきます。
wp_enqueue_script()では以下のパラメータを入れる事ができます。
wp_enqueue_script(
$handle,$src,$deps,$ver,$in_footer
);
- $handle 必須 — スクリプトの名前（任意の名前）。
- $src オプション — スクリプトファイルへのパス。htmlから見た絶対パスで指定。
- $deps オプション — 依存するスクリプトの名前を配列で指定、先にjQeryを読み込む必要があるならばarray('jquery')と指定。
- $ver オプション — スクリプトのバージョン
- $in_footer オプション — スクリプトの呼び出し場所、true ならば head 要素に、false ならば wp_footer() に出力します。