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

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

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

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

TCDテーマのここがイヤ

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

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

理由は簡単です。

TCDのテーマの親テーマでは、function.phpでwp_enque_style()を使用せず、wp_headフックを使って直接親テーマのcssが読み込むので、通常のwp_enque_style()を使ったやり方ではそれらのcssよりも子テーマstyle.cssを後で読み込めないからです。

これは言語道断なわけですが、ダッシュボードのカスタマイズ⇒追加CSSから追加したCSSはテーマによらず最後に読み込まれるので必ず上書きできますから、それほど大騒ぎするなよ、ということなのかもしれません。

追加CSSのここがイヤ

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

子テーマの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" />';
}

まとめ

そもそもTCDテーマは頻繁にアップデートされませんから、TCDテーマを子テーマ作って使用している人は実は少ないのではないかと思います。

しかし、Wordpressのバージョンアップにあわせて一斉に修正がかかることもありますので、追加CSSでカスタマイズするか、子テーマを作ってカスタマイズしておいた方が後でなんでおかしくなった?と悩まないで済むと思います。

 

タイトルとURLをコピーしました