WordPressを子テーマ化すると微妙にデザインが崩れる問題の解決法
「BusinessPress」というWordPressテーマを「子テーマ化」した際に発生したトラブルです。
このテーマは公式サイトで「子テーマ」を配布していなかったので、いつも通りに子テーマ化を完了したのですが、なぜか微妙にレイアウトが崩れています。
Google検索してみても、この問題に気付いていない人も多かったので、気付かないレベルの微妙なCSSの変化のようです。
ソースを確認してみると、以下の違いがありました。
オリジナルテーマ
<link rel='stylesheet' id='fontawesome-css' href='/wp-content/themes/businesspress/inc/font-awesome/css/font-awesome.css'/>
<link rel='stylesheet' id='normalize-css' href='/wp-content/themes/businesspress/css/normalize.css'/>
<link rel='stylesheet' id='businesspress-style-css' href='/wp-content/themes/businesspress/style.css'/>「normalize.css」の「後」に「/businesspress/style.css」を読み込み
子テーマ化すると
<link rel='stylesheet' id='parent-style-css' href='/wp-content/themes/businesspress/style.css'/>
<link rel='stylesheet' id='child-style-css' href='/wp-content/themes/child/style.css'/>
<link rel='stylesheet' id='fontawesome-css' href='/wp-content/themes/businesspress/inc/font-awesome/css/font-awesome.css'/>
<link rel='stylesheet' id='normalize-css' href='/wp-content/themes/businesspress/css/normalize.css'/>
<link rel='stylesheet' id='businesspress-style-css' href='/wp-content/themes/child/style.css'/>「normalize.css」の「前」に「/businesspress/style.css」を読み込み
このスタイルシートの読み込み順序の違いで微妙なデザインのズレが発生していたようです…はまった…。
functions.phpで読み込み順序を修正する
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
//---「normalize.css」を除去する
wp_dequeue_style('normalize');
//---「normalize.css」を追加する
wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css');
//---「normalize.css」の後に「親テーマ：style.css」を追加する
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css', array('normalize'));
//---「parent-style」の後に「子テーマ：style.css」を追加する
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
すでに表示されている「normalize.css」をHTMLから除去した後に、順序を指定して再度「normalize.css」を追加するように修正してみました。
修正後
<link rel='stylesheet' id='normalize-css' href='/wp-content/themes/businesspress/css/normalize.css'/>
<link rel='stylesheet' id='parent-style-css' href='/wp-content/themes/businesspress/style.css'/>
<link rel='stylesheet' id='child-style-css' href='/wp-content/themes/child/style.css'/>
<link rel='stylesheet' id='fontawesome-css' href='/wp-content/themes/businesspress/inc/font-awesome/css/font-awesome.css'/>
<link rel='stylesheet' id='businesspress-style-css' href='/wp-content/themes/child/style.css'/>正しいCSSの読み込み順に修正され、デザインも正常に戻りました。
まとめ
公式サイトで子テーマを配布していないテーマでは、子テーマ化した際のテストを行っていない可能性があり不具合が発生する事があります。
他のテーマにおいても、子テーマ化してなぜかデザインが崩れて困っている方は参考にしてください！
(追記）2020-12-04
「BusinessPress」テーマにおいては「businesspress-style-css」というIDで選択したテーマの追加が行われていましたので「child-style-css」の追加は不要でした、よって今回は以下のコードとなります。
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
//---「normalize.css」を除去する
wp_dequeue_style('normalize');
//---「normalize.css」を追加する
wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css');
//---「normalize.css」の後に「親テーマ：style.css」を追加する
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css', array('normalize'));
}