WordPress子テーマ有効時にスタイルシート読み込み順序を指定する

子テーマ有効時に意図した順番にスタイルシートが読み込まれるように、読み込みの順番を指定する方法をまとめる。親テーマのスタイルシートが重複して読み込まれないように注意する。

構成

前提条件として、スタイルシートの読み込み順序は、子テーマから操作するものとする。完成された親テーマに変更を加えない。

親テーマと子テーマのスタイルシートの構成は以下のとおりを想定。

親テーマのスタイルシート読み込み

親テーマのfunctions.phpではすでに3枚のスタイルシートを読み込んでいる。

function enqueue_scripts() {
  // reset.css
  wp_enqueue_style('reset', get_template_directory_uri() . '/css/reset.css');
  // style.css
  wp_enqueue_style('main', get_template_directory_uri());
  // parent.css
  wp_enqueue_style('parent', get_template_directory_uri() . '/css/parent.css');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

親テーマのスタイルシートを読み込む順番は一定とする。

1. reset.css
2. style.css
3. parent.css

次に、子テーマを作成したうえで子テーマを有効化し、子テーマのfunctions.phpで親テーマのスタイルシートを読み込む。

この時注意しなければならないのは、親テーマのスタイルシートはすでに読み込まれているという点だ。つまり、子テーマのスタイルシートは親テーマのスタイルシートを上書きするために最後に読み込まれるようにすればいい。

不適切な例

読み込みの順番が適正でない例として、wp_enqueue_style関数として読み込みを実行させてみよう。

function enqueue_scripts2() {
  // style.css
  wp_enqueue_style('child', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts2');

この場合、子テーマのスタイルシートは、親スタイルシートより先に読み込まれてしまう。読み込みの順序を配列で渡していないことが原因だ。

適切な例

読み込みの順序を配列で渡してみよう。

function theme_enqueue_styles() {
  wp_enqueue_style('child', get_stylesheet_directory_uri() . '/style.css', array(
    'reset',
    'main',
    'parent',
  ));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

実際のスタイルシートの読み込みの順番は意図したものになる。

1. reset.css
2. style.css　// 親テーマ
3. parent.css
4. style.css　// 子テーマ

よく見かけるスタイルシート読み込み方法の間違い

子テーマを作成し子テーマ側で親テーマのスタイルシートを読み込む方法として紹介されているコードでは、親テーマのスタイルシートを重複して読み込んでしまうので注意する。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

子テーマのスタイルシートは親テーマを上書きする

CODEXにも書かれていることだが、子テーマのスタイルシートは、親テーマのスタイルシートを上書きするように作成する。そのため、親テーマよりも後に読み込まれる必要がある。

だからといって、子テーマ側で親テーマのスタイルシートを読み込む必要はない。なぜなら、親テーマのスタイルはすでに読み込まれているからだ。