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

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

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

参考

トップページ

ワードプレステーマTCD

症状

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

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

原因

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

まとめ

TCDテーマで子テーマを作成した際にレスポンシブ表示が崩れる場合は、CSSの読み込み順が原因である可能性が高いです。子テーマの functions.php にCSS読み込みを明示的に制御するコードを追加することで解決できます。

同じ症状でお困りの方はぜひお試しください。

参考

WordPressの子テーマを作る理由と子テーマを自作する方法

ワードプレステーマTCD

この記事を書いた人

パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。

お仕事のご依頼はこちらまで

パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。

パリスタデザイン事務所HPへ