WordPressでCSS, JavaScriptをそれっぽく読み込ませる推奨方法

- WordPress -
2019.11.25
WordPress

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

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

header.phpに<link rel="stylesheet" href="xxx/css/style.css">と直接書きこんでいる
foooter.phpに<script src=xxx/js/main.js?'></script>と直接書き込んでいる

こんな状態から卒業しようと思い、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_script() という関数で読み込むCSSを指定し、wp_enqueue_scriptsフックに登録します。

以下、WordPress Codexの構文そのまま持ってきました。

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

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

wp_enqueue_script(
   $handle, // 読み込むファイルに別名を付ける(何でも良い)
   $src, // 読み込むCSSファイルのパス
   $deps, // より先に読み込むべきCSSファイルを指定
   $ver, // ファイル末尾にくっついてくるバージョン
   $in_footer // true/falseで挿入する箇所が変わる
);

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

読み込むCSSが1つの場合

function.phpへ以下のように記述します。アクションフックへの登録込みのコードです。

function add_stylesheet() {
  wp_enqueue_style(
      'main', // mainという名前を設定
      get_template_directory_uri().'/css/style.css', // パス
      array(), // ↑より先に読み込むCSSは無いので配列は空
      '1.0', // ファイル末尾に v=1.0 と付加
      false // headタグ内に出力
  );
}
add_action('wp_enqueue_scripts', 'add_stylesheet');
  // wp_enqueue_scriptsフックにadd_stylesheet関数を登録

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

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

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

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

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

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

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

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

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');

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

function 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関数の第3引数の配列内に何も指定しない(array()とする)と、 style.cssだけしか出力されません。

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

wp_register_style関数で先に読み込むCSSファイルの数だけ別名を付けて登録し、wp_enqueue_style関数の第3引数に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

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

function 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');

 

↑TOP