TCDテーマで子テーマのstyle.cssを一番最後に読み込む方法

日本製のWordpressテーマで断トツのシェアはおそらくTCDテーマだと思います。

確かにデモはとてもきれいなので人気な理由もわかります。

この記事は、日本で断トツ人気のWordpressテーマ TCDのカスタマイズで子テーマを使ったときにダントツにハマるポイントの解決策について書かれています。

この記事で分かること

TCDテーマのここがイヤ
子テーマのstyle.cssをheadタグの一番最後に読むfunction.phpの記述
まとめ

TCDテーマのここがイヤ

TCDのテーマを使っていて一番腹が立つことは、子テーマを作ってstyle.cssを編集しても反映されたりされなかったりします。

子テーマのstyle.cssが反映されない理由

理由は簡単です。

TCDのテーマの親テーマはCSSファイル読み込む際に、wp_enque_style()を使用せず、wp_headフックを使って一部のCSSファイルをheadに直接読み込む仕様です。

子テーマのstyle.cssを用意し、wp_enque_style()で読み込んだとしても、headに読み込まれる親テーマのCSSよりも手前で読み込まれるため、head部分のCSSを子テーマのstyle.cssで上書きできません。

これは言語道断なわけですが、ダッシュボードのカスタマイズ⇒追加CSSを使うと解決します。

追加CSSはテーマによらず最後に読み込まれるので必ず上書きできますから、それほど大騒ぎするなよ、ということなのかもしれません。

追加CSSのここがイヤ

追加CSSで追加したCSSはheadタグ内のstyleタグで囲まれて挿入されます。

ソースがとても汚くなる
CSSの圧縮がかからない。
親テーマから子テーマに切り替えると追加CSSが消える（子テーマのディレクトリ名を変えても消える）

【悲報】テーマディレクトリ名を変更すると追加CSSは消えます

この記事は、最近いたる所で推奨されている『追加CSSによるCSSカスタマイズ』の危険性について説明しています。この記事を読むことで、『追加CSSによるCSSカスタマイズ』の危険性と、そこで起きる問題点、その対処方法について理解できます。 ...

子テーマのstyle.cssが反映されない親テーマの記述

どうにかならんのかい？とずっと悩んでいました。親テーマのfunction.phpに直接書かれた記述なので子テーマで修正するのは簡単ではありません。

親テーマのfunction.php

// hook wp_head --------------------------------------------------------------------------------
require get_template_directory() . '/functions/head.php';

親テーマのfunctions/head.php

<?php
function tcd_head() {
global $dp_options, $header_slider;
if ( ! $dp_options ) $dp_options = get_desing_plus_option();
?>

<span class="marker"><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/design-plus.css?ver=<?php echo version_num(); ?>"></span>
<span class="marker"><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sns-botton.css?ver=<?php echo version_num(); ?>"></span>
<span class="marker"><?php if( !is_no_responsive() ) { ?></span>
<span class="marker"><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css?ver=<?php echo version_num(); ?>"></span>
<span class="marker"><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/footer-bar.css?ver=<?php echo version_num(); ?>"></span>
<span class="marker"><?php } ?></span>

省略

<?php
}
<strong><span class="marker">add_action("wp_head", "tcd_head");</span></strong>
?>

どうにか子テーマのfunction.phpで処置できないか？ともがいてみたら解決策がありました。

子テーマのstyle.cssをheadタグの一番最後に読むfunction.phpの記述

親テーマでwp_headフックを使っているので、子テーマでもwp_headフックで同じように読み込めば読み込み順番を一番最後にすれば良さそうだと思いました。

function.phpに以下の内容を書けば、子テーマのstyle.cssがheadタグの一番最後に読み込まれます。すでに親テーマや子テーマのstyle.cssを読み込む記述がある場合は、それを削除してから追加します。

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

}
//子テーマのstyle.cssを一番最後に読み込む＋クエリつける
add_action( 'wp_head', 'add_original_style_css', 9999 );
function add_original_style_css() {
$s_dire_uri = get_stylesheet_directory_uri();
$date_query = date("ymdGis", filemtime( get_stylesheet_directory() . '/style.css'));

echo '<link rel="stylesheet" id="child-style" href="'. get_stylesheet_uri() .'?'.$date_query. '" type="text/css" media="all" />';
}