LION BLOG(ライオンブログ)を「Ver.1.2.3」にアップデートした途端、突然CSSが崩れてしまいました。
驚いてプラグインやテーマの非同期読込などを見直してみましたが、状況は何も変わりませんでした。
公式サイトの広報を確認
「子テーマのfunction.php修正のお知らせ」
これまで親テーマのcss/contents.cssが、子テーマのstyle.cssよりも後に読み込まれていたため、singleページのCSSを修正(上書き)できない状況にありました。
そのため、これを改善するために、親テーマのバージョンアップに合わせて、子テーマのfunction.phpを下記のように修正いたしました。(http://lionblog.fit-jp.com/child-info1/)
どうやらこの内容が関係していそうです。
しかし、私はLION BLOG(ライオンブログ)公式サイトから配布されている子テーマを使用していません。
自分で作成した子テーマを使用していたので、関係があるようには思えなかったのですが、対処法はわかりました。
functions.phpを編集する
公式サイトでも子テーマのfunctions.phpの変更をするように案内されています。
CSSの読込みタイミングに問題があったようです。
テーマ本体でのCSSの読込み順序に修正が加わったことで、子テーマで条件分岐が必要になったようです。
(修正前)当テーマのfunctions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
これを公式サイトで案内されているように修正します。
子テーマ内でCSSを呼び出している箇所を公式サイトのとおり変更します。
(修正後)当テーマのfunctions.php
//////////////////////////////////////////////////
//親テーマのCSSを読み込む
//////////////////////////////////////////////////
function fit_head_child() {
if ( get_option('fit_seo_cssLoad-main')) {
echo '<link class="css-async" rel href="'.get_template_directory_uri().'/style.css">'."n";
}else{
echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/style.css">'."n";
}
if (is_singular()){
if ( get_option('fit_seo_cssLoad-content')) {
echo '<link class="css-async" rel href="'.get_template_directory_uri().'/css/content.css">'."n";
}else{
echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/content.css">'."n";
}
}
}
add_action('wp_head', 'fit_head_child');
これで、レイアウトが元にもどりました。
いやぁ、焦りました。
プラグインと同様にWordpress(ワードプレス)から容易にアップデートできるのも善し悪しだなと感じた瞬間でした。
テーマのアップデートは公式サイトの情報を見てから行うようにしましょう(^o^)
不具合修正でも更新履歴をまとめてもらえるとありがたいですね。