関数 wp_enqueue_scriptjs を使い外部JavaScriptファイル読み込みをfunctions.phpで制御する方法 【WordPress】

投稿日：

完全版を表示する

どうもカッパです。

スタイルシートの読み込みに続き、JavaScriptファイルの読み込みも解説します。

アクションフックの設定は下記のリンクから。

【WordPress】functions.phpで独自のcss・jsファイルを一元管理する方法

どうも、カッパです。 WordPressを使うなら、テーマの機能を熟知して素早く見栄えの良い記事を量産するのが至上命題だとは思います。 思いますが...。 技術的なことも少しは身につけておくと、実績と ...

続きを見る

wp_enqueue_style()の設定項目を解説

まずはwp_enqueue_style()の設定項目を見ていきましょう。


wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

各引数の詳細はこちら

  • $handle 必須 : スクリプトを区別するための名称として使われます
  • $src : 読み込ませたいJavaScriptファイルのURLを指定します（ここでは事実上必須）
  • $deps : JavaScriptファイルの読み込み順をコントロールする際に使用。他のJavaScriptファイルで指定した$handleの文字列を入れておくと、その後に読み込まれる（「array()」と配列で指定）
  • $ver : JavaScriptファイルにバージョンを付ける時に使用（後述）
  • $in_footer : JavaScriptファイルの読み込み位置を指定。初期値はfalseで&lthead>〜&lt/head>内。trueで</body>直前に読み込ませる

wp_enqueue_script()で使用される引数のそれぞれの役割

それぞれの引数について説明します。

$handleでJavaScriptファイルの読み込みタグに名前を付ける

必須項目の$handleですが、ここで読み込ませたいJavaScriptファイルに名前を付けておきます。他で解説する「$deps」で、JavaScriptファイルの読み込み順をコントロールするときの識別子として使うことがいちばんの役割になります。

$srcでJavaScriptファイルのURLを指定する

スタイルシートまでのパスを自動補完してくる関数と併用することが多いです。

  • テーマをそのまま使っている場合 : get_template_directory_uri()
  • 子テーマを使っている場合 : get_stylesheet_directory_uri()

wp_enqueue_script( $handle, get_stylesheet_directory_uri().'/js/base.js' , $deps, $ver, $in_footer );

書き方は、echoでhtmlを書くのと同じです。

JavaScriptでは$depsでの読み込み順コントロールの重要度が高い

JavaScriptの場合、jQuery本体や、jQueryプラグインの後に読み込ませたいケースなど、CSSに比べて使用頻度が高いです。

使い方はCSSの場合と同じです。

$depsに、目的のスクリプトに設定されている$handleの値を指定すると、依存関係が関連付けられ、$handleの値のスクリプトの後に読み込まれるようになります。

ただし、CSSと違い、$handleの値はHTMLのソースに"id"という形で表示されません。

単にjQuery本体の後に読み込ませたいだけなら"jQuery"と記述すれば良いのですが、そうでない場合は自分で設定した$handleか、親テーマのfunctions.phpに記述されている$handleの値を調べましょう。

$verでJavaScriptファイルのバージョンを指定する

JavaScriptの読み込みも、バージョン指定が可能です。


<script type='text/javascript' src='/path/to/js/file.js?ver=20190418'></script>

file.jsの後に続く変数の形で指定されます。

バージョンを指定すると、それまでのキャッシュが無効化されます。

重要 : $in_footerでJavaScriptの読み込み位置を指定

最後の$in_footerはSEOにも重要な項目です。

最近のGoogleは、検索順位決定の要素としてページの表示スピードを重視しているためです。

ページの表示スピードを遅くする要因は多々ありますが、JavaScript読み込み位置による影響も大きなものがあります。ここでは詳細な解説はしませんが、今の段階では基本的にJavaScriptファイル読み込みはページの末尾で行った方が良いと覚えておいてください。

初期設定では悲しいことに「false」つまり、ページ先頭での読み込み（<head>〜</head>内）が指定されています。

先頭で読み込まないとJSが作動しない！

など、止むを得ない事情がない限りはtrueを指定し、ページ末尾で読み込ませましょう。

functions.phpでjsやcssファイルを読み込みを行うメリット

cssの読み込み解説ではWordPressテーマをアップデートする際の安全性のメリットを説明しましたが、functions.phpで外部ファイル読み込みの制御を行うことのメリットがもう一つあります。

それは、

特定のページだけでJSファイルを読み込ませたい / 読み込ませたくない

など、柔軟な設定ができるという点です。

スクリプト読み込みのアクションフックに関しては、また別のページで説明したいと思います。

  • B!