ライオンブログでレイアウトが崩れたらfunctions.phpを要確認

本サイトにはPRが含まれています。

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^)


LION BLOG(ライオンブログ)公式サイトでは、テーマに機能追加があった場合は、アナウンスがあるようですが、それ以外は無いようですね。
不具合修正でも更新履歴をまとめてもらえるとありがたいですね。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次