CocoonをSWELLに変更するとどうなる?

子テーマをつくる際、同じ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ベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

子テーマを作成する

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

子テーマは親テーマの機能やスタイルを継承して、部分的な変更を加えることに役立ちます。
親テーマの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テーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

子テーマの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ベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

解決方法

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

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

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テーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

プロモーション

戦略的WEBサイト構築方法

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

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

コメントを残す

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

5 × 2 =

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

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