WordPressでCSS/JavaScriptをfunctions.phpで読み込む推奨方法

HTML, CSSの学習をした後「さぁ、次はWordPressでWebサイトを作ろう！」となった時になぁなぁにしてしまいがちな部分。

そのうちの一つが、CSS, JavaScriptの読み込み方だと感じました。

こんな状態から卒業しようと思い、WordPress Codexを読みながら勉強した結果を脳内を整理する意味も込めてまとめていきます。

functions.phpでCSS読み込み処理を一元化する

今まで僕は必要なCSSはheader.phpへ、JavaScriptはheader.php・footer.phpへ、という風に、HTMLで静的サイトを作る時と全く同じ感覚で書き込んでいました。

しかし、WordPressではfunctions.php内でCSS,JSの読み込み制御をすることが推奨されているんですね。

というわけで、まずはCSSファイルのあるべき読み込み方から。

CSSをwp_enqueue_style関数 + アクションフックで読み込む

テーマフォルダにあるfunctions.phpファイル内に、wp_enqueue_style() という関数で読み込むCSSを指定し、wp_enqueue_scriptsフックに登録します。

関数リファレンス/wp enqueue style

wp_enqueue_style(
   $handle, // 読み込むファイルに別名を付ける(何でも良い)
   $src, // 読み込むCSSファイルのパス
   $deps, // より先に読み込むべきCSSファイルを指定
);

実際に読み込むことを想定して書くとどうなるのでしょう。

読み込むCSSが１つの場合

functions.phpへ以下のように記述します。

functions.phpfunction add_stylesheet() {
  wp_enqueue_style(
      'main', // mainという名前を設定
      get_template_directory_uri().'/css/style.css', // パス
      array(), // style.cssより先に読み込むCSSは無いので配列は空
  );
}
add_action('wp_enqueue_scripts', 'add_stylesheet');
  // wp_enqueue_scriptsフックにadd_stylesheet関数を登録

これで、以下の通りheadタグ内に出力されます。

読み込むCSSが2つ以上ある場合

読みこむべきCSSファイルが複数ある場合、読み込む順序を気にしなければなりません。

その場合、wp_enqueue_style関数に加えて「wp_register_style関数」も使って読み込み順序を制御します。

関数リファレンス/wp register style

具体的に、以下手順で読み込みます。

1. wp_register_style関数で先に読み込むCSSファイルを登録
2. wp_enqueue_style関数の第３引数の配列に①で登録したファイルを指定

コードにするとこうです。

function add_stylesheet() {
  wp_register_style('reset', get_template_directory_uri().'/css/ress.min.css', array(), '1.0', false);
  wp_enqueue_style('main', get_template_directory_uri().'/css/style.css', array('reset'), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

見にくいので、引数ごとに改行しました。

functions.phpfunction add_stylesheet() {
  wp_register_style(
      'reset', // ★resetという別名をつけた(リセット用CSSだったので)
      get_template_directory_uri().'/css/ress.min.css', // CSSのパス
      array(), // これより先に読むCSSはないので空の配列
      '1.0',
      false // headタグ内に出力
  );
  wp_enqueue_style(
      'main',
      get_template_directory_uri().'/css/style.css',
      array('reset'), // ★の名前を配列に指定=style.cssより先に読み込む
      '1.0',
      false
  );
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

これで、以下の通りheadタグ内に出力されます。

ポイントは、array('reset')と指定したことでstyle.cssよりも上にlinkタグで出力されている(先に読み込まれる)点です。

wp_register_style関数で'reset'という名前で登録してwp_enqueue_style関数の第３引数の配列内に何も指定しない(array()とする)と、 style.cssだけしか出力されません。

読み込むCSSが３つ４つと増えても考え方は同じです。

wp_register_style関数で先に読み込むCSSファイルの数だけ別名を付けて登録し、wp_enqueue_style関数の第３引数にarray('file1', 'file2', 'file3')とすれば、

<link rel='stylesheet' href='file1のCSS'>
<link rel='stylesheet' href='file2のCSS'>
<link rel='stylesheet' href='file3のCSS'>
<link rel='stylesheet' href='style.css'>

という順番で出力されます。

array()の中に放り込む順番で読み込み順序も変えられる、というわけですね。

以上、WordPressにおける基本的なCSSファイルの読み込み方でした。

次は、JavaScriptファイルの読み込み方について書いていきます。

JavaScriptをwp_enqueue_script関数 + アクションフックで読み込む

CSSの読み込み方さえ分かればJavaScriptは簡単です。以下のように使う関数名を変更するだけ。

wp_register_style()　→　wp_register_script()
wp_enqueue_style()　→　wp_enqueue_script()

以下、３つのJSファイルを読み込む例です。

functions.phpfunction add_script(){
  wp_register_script(
      'first',
      get_template_directory_uri().'/js/first.js',
      array(),
      '1.0',
      true // trueでbody閉じタグ前に出力
  );
  wp_register_script(
      'second',
      get_template_directory_uri().'/js/second.js',
      array(),
      '1.0',
      true
  );
  wp_enqueue_script(
      'last',
      get_template_directory_uri().'/js/last.js',
      array('first', 'second'), // first, second, lastの順に読み込み指定
      '1.0',
      true
  );
}
add_action('wp_enqueue_scripts','add_script');

参考関数リファレンス/wp enqueue script

参考関数リファレンス/wp register script