WordPressにJavaScriptを読み込むwp_enqueue_scriptの使い方

WordPressにはJavaScriptをテーマに読み込むときの関数が用意されています。

今までJavaScriptを読み込むときはWordPressテーマのheadやbody直上に直接コードを記述していることが多かったのですが、推奨されている関数を使うことでWordPressに対応させた読み込みをすることができます。

勉強も兼ねてアウトプットしてるのでポンコツな内容があったらすいません。

WordPressにJavaScriptを読み込む

WordPressにJavaScriptを読み込む場合の記述方法としては冒頭で触れたようにテーマのheader.phpのheadに配置したり、footer.phpのbody閉じタグの直上に直接書いて読み込むことも多いかと思います。

JavaScriptを直接書く場合の読み込み方法でも間違えではありません。

ただWordPressでJavaScriptを読み込むならWordPressの関数を使用することで、WordPressにベストなJavaScriptの読み込みをすることができるのです。

ここからはそんなWordPressにベストなJavaScriptを読み込む関数や書き方が分かるように使い方を説明していきます。

JavaScriptの読み込みに使用する関数

WordPressでJavaScriptの読み込みに使用する関数は「wp enqueue script」です。

スクリプトをwp_enqueue_script()を使用することでファイルを登録し、読み込みをしてキューに追加します。

「enqueue(エンキュー)」は「キュー(待ち行列)」に並ばせるという意味です。

そしてアクションフックで読み込むことができます。

アクションフックはWordPressの特定のタイミングで「独自の関数」を使って何らかの処理をするための仕組みです。

またwp_enqueue_scriptは依存関係などを考慮してスクリプトをインクルードしてくれます。

このようなJavaScriptの読み込みをWordPress関数で処理する使い方ができるのですが、wp_enqueue_scriptは良い面で管理やレンダリングにおいても直接記述する場合との違いがあります。

JavaScriptを直接書くときとの違い

JavaScriptを直接テーマのheadに記述した場合には、ブラウザのレンダリングをスクリプトの処理待ちによってレンダリングブロックしてしまう可能性があります。

その反面WordPressのwp_enqueue_scriptの場合は、無駄な読み込みを制御することができたり重複しないようにすることで読み込みができるようになります。

一言で言えば「パフォーマンスの良い読み込み」を実現します。

この違いに対してもWordPressがwp_enqueue_scriptを使ってスクリプトの読み込みを推奨してることなのだとも思っています。

wp_enqueue_scriptで読み込む書き方

WordPressでwp_enqueue_scriptを使うときの書き方はJavaScriptの読み込みに必要なパラメータ（引数）を追加して書いていきます。

function x_enqueue_scripts() {
  wp_enqueue_script( 
    'xx-script', 
    get_template_directory_uri() . '/js/xx.js' 
  );
}

add_action( 'wp_enqueue_scripts', 'x_enqueue_scripts' );

出力結果の画像は以下です。

上記のコードの書き方はwp_enqueue_scriptの引数に$handleと$srcを書いてます。

$handle：第一引数にスクリプトの名前を書きます。

$src：第二引数にテンプレートのディレクトリを取得します。

get_template_directory_url()を使用してテーマディレクトリまでのURLを指定してます。

add_actionでアクションフックさせます。

WordPressで読み込むJavaScriptの設置場所

WordPressの関数で書いたJavaScriptをテーマのどこの場所に設置するかについてです。

wp_enqueue_script()読み込む設置場所はテーマのfunctions.phpに記述して配置します。

wp_enqueue_script()の設置場所はfunctions.phpですが、読み込んでから出力されるスクリプトの出力設置場所がWordPressテーマのhead内かbody内のどちらかの場所に設置するかによってwp_enqueue_script()で読み込む書き方が少し変わります。

wp_enqueue_scriptでheadに読み込み

functions,phpに書いたwp_enqueue_script()で出力するスクリプトをテーマのheadで読み込みたい場合です。

数日前に試しにエックスサーバーのWebフォントを遊んでるブログに読み込んだときのコードですが、読み込めたのでheadで読み込む書き方として。

function x_scripts() {
  wp_enqueue_script( 
    'xserv-webfont-script','//webfonts.xserver.jp/js/xserver.js' );
  );
}

add_action( 'wp_enqueue_scripts', 'x_scripts' );

上記のコードでJavaScriptの読み込みはheadタグ内にスクリプトのコードが出力されます。

ハンドルの名前とファイルまでのURLが変わったくらいです。

wp_enqueue_scriptでfooterに読み込み

次にfooterで読み込みの場合です。

function x_scripts() {
  wp_enqueue_script( 
    'xserv-webfont-script','//webfonts.xserver.jp/js/xserver.js' );
    array(),
    false,
    true
    );
}

add_action( 'wp_enqueue_scripts', 'x_scripts' );

wp_enqueue_script()の第五引数をtrueにします。そうするとfooterで読み込んでくれました。

JavaScriptの読み込み順序をコントロール

読み込むファイルについて「はじめにスクリプトを動作させたいので、他のスクリプトを先に読み込みたい」という場合はどうするんだろうと思った場合がわからなかったので調べたらすぐに情報があったので理解するのに助かりました。

function x_enqueue_scripts() {
  wp_enqueue_script( 
    'one-script',
    get_template_directory_uri() . '/js/one.js'
  );

  wp_enqueue_script(
    'two-script',
    get_template_directory_uri() . '/js/two.js' ,
    array( 'one-script' )
    );
}

add_action( 'wp_enqueue_scripts', 'x_enqueue_scripts' );

上記コードはone-scriptをキューに追加してからtwo-scriptを追加してます。そして後から読み込むファイルの第五引数でarray( ‘on-script’ )にして順番で読み込めるようになります。

このときにハンドル名の間違いがあるとone.jsに続くtwo.jsも読み込まれなくなるので注意が必要です。

WordPressにJavaScriptの読み込みをwp_enqueue_scriptでする使い方について説明しながら実際にコードを書いていたのですが、理解はできても細かい書き方でミスることがあったのでもっと勉強しておこうと思えた今回の投稿でした。