ビジネス向けWEBサイトをつくる

子テーマでできること広告・PR

子テーマをつくる際、同じstyle.cssを2度読み込んでいないかチェックしよう！

本ページはプロモーションが含まれています
lin

この記事は開発者、またはテーマ開発にチャレンジしようとされる方向けの記事です。

WordPressテーマをカスタマイズする場合、子テーマを作成することが一般的です。

子テーマとは
子テーマは親テーマのphpやcssを上書きし、子テーマの変更を反映するものです。
構成ファイルは、通常、functions.phpとstyle.cssが最低限必要です。

WordPressに親しんできた方は子テーマを作成する際は、親テーマのstyle.cssを削除（wp_dequeue_style()）し、親テーマと子テーマのstyle.cssを関連づけて読み込む（wp_enqueue_style()）のが、当たり前でした。

しかし、この方法だと子テーマのstyle.cssが2度読み込まれるテーマも増えています。
このページでは子テーマのstyle.cssが、なぜ2度読みこまれるのか、どうすればよいのかを解説します。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

子テーマを作成する

まず、一般的なことから、おさえていきます。

子テーマは親テーマの機能やスタイルを継承して、部分的な変更を加えることに役立ちます。
親テーマのphpやcssを変更すると、テーマにアップデートがかかった場合は、全て元に戻ってしまいます。

子テーマを作成していれば、そういった心配はありません。

実際に仕事で採用したテーマ、ワードプレスTCDのWordPressテーマ「EGO.」を使って子テーマを作成してみます。

子テーマのstyle.cssの記述

以下がWordPressテーマ「EGO.」の子テーマのスタイルシートヘッダーです。

4行目の「Template：ego_woocommerce_tcd079」は親テーマのフォルダー名称です。

/*
Theme Name:ego-child
Author:theme3
Template:ego_woocommerce_tcd079
Version:1.0
*/

子テーマのfunctions.php

では、同じようにWordPressテーマ「EGO.」の子テーマ用のfunction.cssを見ていきましょう。

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
  wp_dequeue_style('ego-style');
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

親テーマのstyle.cssを削除し、親テーマのstyle.cssの次に子テーマのstyle.cssを読み込むコードです。

実はこのコードでは上手くいきません。

どうしてなのでしょうか？
次にこのfunctions.phpをテストしてみます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

子テーマのstyle.cssが2度読み込まれる原因

先ほどのfunctions.phpで実際に出力されたhtmlを見てみましょう。

<link rel='stylesheet' id='parent-style-css' href='https://www.theme3.net/ego/wp-content/themes/ego_woocommerce_tcd079/style.css?ver=6.1.1' type='text/css' media='all'/>
<link rel='stylesheet' id='style-child-css' href='https://www.theme3.net/ego/wp-content/themes/ego-child/style.css?ver=6.1.1' type='text/css' media='all'/>
<link rel='stylesheet' id='ego-style-css' href='https://www.theme3.net/ego/wp-content/themes/ego-child/style.css?ver=1.6.2' type='text/css' media='all'/>

このように「style-child-css」と「ego-style-css」の行で同じ子テーマのcssが読み込まれていることが分かります。

原因

  • 原因の一つ目は親テーマでのstyle.cssの読み込み方法です。
wp_enqueue_style( 'ego-style', get_stylesheet_uri(), false, version_num() );

親テーマのfunctions.phpを見てみると上記のようなコードでstyle.cssが読み込まれています。

get_stylesheet_uri()は現状のテーマスタイルシートのURIを取得します。
子テーマを利用している場合、子テーマのstyle.cssが読み込まれます。

  • もう一つの原因は子テーマのfunctions.phpに書かれたcss読み込みが想定した順序で実行されていないことです。
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
  wp_dequeue_style('ego-style');
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

前述したように、functions.phpは以下の順序で実行されることを想定しています。

  1. 親テーマのスタイルを削除
  2. 親テーマのスタイルIDを「parent-style」に変更して再読み込み
  3. 「parent-style」の後に子テーマのstyle.cssを「style-child」のIDで読み込み

「①親テーマのスタイル削除」が前提なのですが、この行が実行されていないということが分かります。

つまり、子テーマのアクションフックが親テーマのスタイルシート読み込みより先に実行されてしまっているのです。

アクションフック
WordPressでなんらかの処理が実行される前にフック地点（ex. wp_enqueue_scripts）になんらかの処理を追加する際に使います。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

解決方法

では、どのようにすれば解決するのでしょうか？

簡単です。親テーマより後でアクションフックを実行すればよいのです。

add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
  wp_dequeue_style('ego-style');
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

1行目に注意してください。

優先順位に11を設定しています。（初期値は10）

これによって、親テーマよりも後でアクションフックが実行されるようになります。

結果

以下のように子テーマのstyle.cssの2度読み込みはなくなりました。

<link rel='stylesheet' id='fancybox-css' href='https://www.theme3.net/ego/wp-content/plugins/easy-fancybox/fancybox/1.5.4/jquery.fancybox.min.css?ver=6.1.1' type='text/css' media='screen'/>
<link rel='stylesheet' id='parent-style-css' href='https://www.theme3.net/ego/wp-content/themes/ego_woocommerce_tcd079/style.css?ver=6.1.1' type='text/css' media='all'/>
<link rel='stylesheet' id='style-child-css' href='https://www.theme3.net/ego/wp-content/themes/ego-child/style.css?ver=6.1.1' type='text/css' media='all'/>
<link rel='stylesheet' id='wcmmq-front-style-css' href='https://www.theme3.net/ego/wp-content/plugins/woo-min-max-quantity-step-control-single/assets/css/wcmmq-front.css?ver=1.0.0' type='text/css' media='all'/>

まとめ

理屈さえ分かってしまえば、以下のような解決方法も考えられます。

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

アクションフックの順序を指定せず、親テーマのstyle.cssのみを読み込みます。

これでも、問題ありません。

親テーマでインラインCSSをIDを指定して設定している場合は、これでも良いかもしれません。

インラインCSS
<head></head>内に記載されたCSS

いずれにしても、WordPressの開発はソースコードを確認しながら、慎重に行いましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

13 − 8 =

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下は私が活動している企業情報にリンクしています。