【WordPress】子テーマでCSSの読み込み順を指定する

世の中にはたくさんのWordPressのテーマがあり、制作してくれる皆さんの恩恵をいつも受けています。

テーマを利用し、さらに用途に合ったテーマを作る為に「子テーマ」を作成される方も多いと思います。

そんな中、今回は子テーマと親テーマのCSS読み込み順でつまずいたので、メモしておきます。

function.phpに親テーマの子テーマのCSSやJSを読み込む

子テーマを使用する場合は、子テーマのfunction.phpでそれぞれ指定します。
上から読み込まれるという基本は変わらないので、

親テーマのCSS
子テーマのCSS

という順番で記載していきます。

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_template_directory_uri() . '/style.css');

単純にここで読み込んで欲しい順番通り記載していけばよいのですが、
今回は親テンプレートの都合で、
どうしても子テーマの下に親テーマのCSSが追記されてしまいました。

wp_enqueue_style()のオプションを使う

関数リファレンスを確認すると、オプションを利用して依存関係をコントロールできるようです。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$deps
（array） （オプション） このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。初期値： array()

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

という事で、このCSSファイルの後で読み込まれたい！というファイルがある場合、ハンドル名を配列で渡してあげる事で解決できました。

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' , array('＜ハンドル名＞'));