【TCD】子テーマ化でレスポンシブ表示が崩れる問題の対処法｜function.phpでCSS読み込み順を修正

2024年3月30日2026年4月1日

TCDテーマで子テーマを作成したところ、レスポンシブ表示が崩れるという問題に遭遇しました。

同じ症状で困っている方向けに、原因と解決方法をまとめます。

参考

トップページ

ワードプレステーマTCD

目次非表示

症状
原因
対処法：function.phpでCSS読み込み順を明示的に制御する
まとめ

症状

子テーマを作成した直後から、レスポンシブ表示が崩れてレイアウトが乱れる状態になりました。

原因を調べるためにソースを確認したところ、親テーマのスタイル（CSS）が読み込まれていないことがわかりました。

原因

TCDテーマは作成時期によって、親テーマと子テーマのCSS読み込み順が正しく制御されていないものがあるようです。本来であれば「親テーマのCSS → 子テーマのCSS」の順で読み込まれるべきところが、順序が逆転したり、親テーマのCSSが子テーマに上書きされてしまうケースがあります。

headerに手動でLINKタグを追加するなど複数の方法を試しましたが、CSS読み込みの並び順がシビアなためうまくいきませんでした。

対処法：function.phpでCSS読み込み順を明示的に制御する

TCD公式が案内している方法で解決できます。

子テーマの functions.php に以下のコードを追加してください。

function theme_enqueue_styles() {
    // 親テーマのstyle.cssを一旦登録解除
    wp_dequeue_style('main-style');
    wp_deregister_style('main-style');

    // 親テーマのstyle.cssを「main-style」として再登録
    wp_enqueue_style(
        'main-style',
        get_template_directory_uri() . '/style.css'
    );

    // 子テーマのstyle.cssを登録。依存関係として親テーマのスタイルを指定
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('main-style')
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 11); // 優先度11で実行

ポイント