TCDの「子テーマ」化で表示が崩れる！？対処法について

2024年3月30日

表題の件ですが、久々のTCDテーマ案件をやっていてドツボにハマりました。

参考

トップページ

ワードプレステーマTCD

子テーマを作成したところ、レスポンシブ表示が崩れるのです。

すぐにCSSがきちんと読み込まれていない症状であることに気づき、ソースを覗くとやはり「親テーマのスタイル（CSS）」が読み込まれていないことがわかりました。

こりゃあかんということで、headerに手動でLINKタグを追加したりなど諸々試すもうまくゆかず。（並び順が重要らしい）

対処法を考えあぐねていたところ、公式で案内がありました。

子テーマのfunction.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 ); // 念のため優先度を設定

テーマ作成時期によって、CSS読み込み順がぐちゃぐちゃだったりするせいで、正しく親・子とCSSが読まれないテーマもあるようです。（親が子に上書きされてしまっていた様子）
私の担当テーマもそうでした。

これにて一件落着。

↓公式サイトの参考ページはこちらでした。