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 」をオススメしています。
・ブロックエディター完全対応
・高速化機能を標準搭載
・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は以下の順序で実行されることを想定しています。
- 親テーマのスタイルを削除
- 親テーマのスタイルIDを「parent-style」に変更して再読み込み
- 「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の開発はソースコードを確認しながら、慎重に行いましょう。
この記事は開発者、またはテーマ開発にチャレンジしようとされる方向けの記事です。