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

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

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

//親テーマと子テーマの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つ読み込む場合で話を進めていきます。※

<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.jsjquery-migrate.min.jsはwp_head関数にて自動で読み込まれるので、特に記述する必要はありません。

まず根本的な話になりますが、WordPressにて子テーマを有効化した場合、親テーマのCSSやJSが勝手に適用されるようにはなりません。そのため、子テーマの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' );
}

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

//親テーマと子テーマの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を読み込む必要がありますので、以下のように記述します。

//親テーマと子テーマの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ソースが生成されます。

<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>

ここで使用しているwp_enqueue_style関数wp_enqueue_script関数get_template_directory_uri関数get_stylesheet_directory_uri関数についてはWordPressの子テーマでCSSとJSを読み込ませる方法で説明しているので、確認してみてください。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら