ショップ移転中です。こちらをクリックしてください。
ショップ移転中

こちらのオンラインショップでの販売は
現在、中止しています。

こちらにお進みください

【管理者向け】WordPressで子テーマを作る時のCSS読込順序の真実

管理者向け
2019.06.03

【概要】Wordpressで子テーマを作る時のCSSの真実

WordPressで既存のテーマをカスタマイズして子テーマを作っていたのですが、どうも飾りつけなどがうまく反映されない問題がありました。
調べてみたところ、ネットで広く普及している方法に大きな誤りがあることが判明したので、今日はそのことについて書かせていただきます。


Banner Add

ネットで広く普及している子テーマの作り方とは？

以下の記事などに書かれている方法なのですが、

子テーマを作ってWordPressの既存テーマをカスタマイズする方法
いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存
www.webcreatorbox.com

 

3. functions.php

続いて子テーマフォルダー内に functions.php というPHPファイルを作成します。functions.php に以下のコードを記述して、子テーマを認識させます。


<?php
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'));
}
?>

このような記述が見られました。

しかし、このようにやってみると、子テーマのレイアウトが崩れることが多々ありました。

Banner Add

調査結果は「二重に読み込まれている」

不審に思い、生成されたHTMLファイルを調査してみました。

図はファイル比較ソフトを使って調査した様子です。

左がもともとのテーマ、右が子テーマです。

左の98行目がテーマファイルのCSSについて記述されている箇所です。

それに対応するのが右の100行目になります。

それに加え、右の７９～８０行目に、なにやら追加されているのがわかります。

これは一体なんでしょうか？これが、

3. functions.php

続いて子テーマフォルダー内に functions.php というPHPファイルを作成します。functions.php に以下のコードを記述して、子テーマを認識させます。


<?php
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'));
}
?>

によって、新たに作られた部分なのです。

どういうことかお分かりいただけるでしょうか？

この記述方法だと、「CSSを二重に読み込む」という無駄な処理が行われているのです。

無駄な読み込みだけでなく、順番が入れ替わっていることがレイアウト崩れの原因

二重に読み込まれているだけであればレイアウト崩れは起こりません。

 

本当の問題は「二重に読み込まれている」ことに加え、

「順番が入れ替わっている」ことがレイアウト崩れを生じさせた原因です。

 

本来は、他のCSSのあとに読み込まれるはずの親テーマのCSSが、

他のCSSよりも先に読み込まれてしまい、

他のCSSで上書きされてしまっているんですね。


Banner Add

【解決手段】Wordpressで子テーマを作る時のCSSの真実

このような問題を起こさないためには、

3. functions.php

続いて子テーマフォルダー内に functions.php というPHPファイルを作成します。functions.php に以下のコードを記述して、子テーマを認識させます。


<?php
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'));
}
?>
こういった記述でなく、
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	//プラグイン以外の全てのCSSを順番どおりに書かないと正しい順番で読み込まれない
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css', array(
	'bootstrap',
	'font-awesome',
	'owl-carousel',
	'owl-theme-default',
	'sidr',
	'shopical-google-fonts'));
}

このように、「直前に読み込まれているCSSを順番に記述していく必要」があります。

ただし、プラグインを使っている場合は、プラグイン特有のCSSも記述してしまうと、

そのプラグインを使わなくなったときに問題が起こる可能性がありますので、

「親テーマ固有のCSSだけを順番どおりに書く」という作業が必要になります。

どれが親テーマ固有のCSSかは、テーマごとに異なりますので一概には言えません。

トライアンドエラーで見極めてゆかれるのがよいでしょう。

この記事を書いた人

日本正月協会　販売部

日本の伝統文化の写真データの販売を行っています。どうぞお気軽にご利用ください。

その他の関連サイト

スポンサーリンク

コメント