お問い合わせはコチラから

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でカスタマイズするか、子テーマを作ってカスタマイズしておいた方が後でなんでおかしくなった?と悩まないで済むと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました