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

2017.03.22 2020.10.25 WordPress

WordPressで子テーマを使用する場合、子テーマのfunctions.phpで親テーマの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に以下のように記述して親テーマのファイルを読み込む必要があります。

子テーマのfunctions.php

//親テーマのCSSとJSを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {

	wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_script( 'functions', get_template_directory_uri() . '/js/functions.js' );

}

上記のように親テーマのファイルを読み込んだら、次に子テーマのファイルを読み込みます。

せっかく子テーマを使うのに親テーマのファイルを上書きできなければ意味がありませんので、子テーマのファイルを読み込むのは親テーマのファイル読み込みのあとに記述します。

子テーマのfunctions.php

//親テーマと子テーマのCSSとJSを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {

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

}

テーマで使用しているCSSとJSがそれぞれ1つずつであれば、上記のように記述すれば問題ありません。

しかし先ほども言ったように、CSSやJSが複数ある場合には、子テーマでのそれらの読み込み順を親テーマでの読み込み順を同じようにしてやる必要があります。

子テーマで上書きする必要があるファイルのみを記述すればいいわけではありませんので、注意してください。

ここでは、style.cssの前にreset.cssを読み込む必要がありますので、以下のように記述します。

子テーマのfunctions.php

//親テーマと子テーマのCSSとJSを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {

	wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.css' );
	wp_enqueue_style( 'slick', get_template_directory_uri() . '/js/slick/slick.css' );
	wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'style' ) );
	wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
	wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/modernizr.custom.js' );
	wp_enqueue_script( 'slick', get_template_directory_uri() . '/js/slick/slick.min.js' );
	wp_enqueue_script( 'functions', get_template_directory_uri() . '/js/functions.js' );
	wp_enqueue_script( 'functions-child', get_stylesheet_directory_uri() . '/js/functions.js', array( 'functions' ) );

}

このように記述すれば、以下のようにHTMLソースが生成されます。

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>