WordPressの子テーマでCSSやJSの読み込み順序を指定する方法

WordPressで子テーマを使用する場合、子テーマのfunctions.phpで親テーマのCSSやJSを読み込み、その後に子テーマのCSSとJSを読み込むことで上書きします。

子テーマのfunctions.php

//親テーマと子テーマのCSSとJSを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
function theme_enqueue_scripts() {
	//親テーマのstyle.css
	wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
	//子テーマのstyle.css
	wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'style' ) );
	//親テーマのfunctions.js
	wp_enqueue_script( 'functions', get_template_directory_uri() . '/js/functions.js' );
	//子テーマのfunctions.js
	wp_enqueue_script( 'functions-child', get_stylesheet_directory_uri() . '/js/functions.js', array( 'functions' ) );

}

通常であれば上記のようにfunctions.phpに記述すれば問題ないですが、テーマで複数のCSSやJSを使っている場合、子テーマの方でそれらのファイルの読み込み順を指定しないと、表示や動作に不具合が出る場合があります。

たとえば、ブラウザのデフォルトスタイルシートをリセットするためのCSS(reset.css)などをテーマのスタイルシート(style.css)とは別に用意している場合、それらの読み込み順を指定しないと表示が崩れてしまいます。

ここでは、WordPressの子テーマで意図通りの順序でCSSやJSを読み込む方法をご紹介します。

子テーマでCSSやJSを読み込む方法

たとえば下記のソースのように親テーマのCSSを3つ、そのうちの1つを上書きする子テーマのCSSを1つ、親テーマのJSを4つ、そのうち1つを上書きする子テーマのJSを1つ読み込む場合で話を進めていきます。

HTML

<link rel='stylesheet' id='reset-css'  href='http://xxxxxx.com/wp-content/themes/yourtheme/css/reset.css?ver=x.x.x' type='text/css' media='all' />
<link rel='stylesheet' id='slick-css'  href='http://xxxxxx.com/wp-content/themes/yourtheme/js/slick/slick.css?ver=x.x.x' type='text/css' media='all' />
<link rel='stylesheet' id='style-css'  href='http://xxxxxx.com/wp-content/themes/yourtheme/style.css?ver=x.x.x' type='text/css' media='all' />
<link rel='stylesheet' id='style-child-css'  href='http://xxxxxx.com/wp-content/themes/yourthemechild/style.css?ver=x.x.x' type='text/css' media='all' />
<script type='text/javascript' src='http://xxxxxx.com/wp-includes/js/jquery/jquery.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/respond.min.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/modernizr.custom.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/slick/slick.min.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourtheme/js/functions.js?ver=x.x.x'></script>
<script type='text/javascript' src='http://xxxxxx.com/wp-content/themes/yourthemechild/js/functions.js?ver=x.x.x'></script>

※上記ソースにあるjquery.jsとjquery-migrate.min.jsはwp_head関数にて自動で読み込まれるので、特に記述する必要はありません。

まず根本的な話になりますが、WordPressにて子テーマを有効化した場合、親テーマのCSSやJSが勝手に適用されるようにはなりません。

そのため、子テーマのfunctions.phpに以下のように記述して親テーマのファイルを読み込む必要があります。