LION BLOG、ちょくちょくアップデート入ってますね。
アップデートされることで使いやすくなることは素晴らしいこと。
そしてLION BLOGだけでなくアップデートされるWordPressテーマを使っていくためには、子テーマ化は絶対にやっておいた方がいい。
アップデートのたびにソースコードを変更して、「あーここ変更し忘れたー」とか「どうやって変更してたっけー」とか、そういった面倒がなくなります。
アップデートで表示がおかしくなっちゃった…
テーマバージョン1.3.1 (2018.01.18 更新)としてWordPressテーマ「LION BLOG」が新しくなりました。
「おー、アップデートされとるねー」と思った私は軽いノリでテーマの更新をポチっと。（お客様のサイトでは絶対やっちゃダメ(笑)）
そしてアップデートが無事に終わった後、サイトの表示が正常かどうかを確認してみると、そこには変わり果てたページの姿が…
とまではいかんけど、全体的に表示がおかしくなっていることに気が付きました。
表示がおかしくなった箇所
ページの一部の画像をBefore、After形式で見るとこんな感じ。
●Before
●After
なんか色々としょぼくなってるんですけど！
TwitterやFacebookのボタンが箇条書きリストになってるし、広告が消えてるし、関連する記事の画像や文章の配置がおかしい。
うん…ページが表示できないレベルのエラーじゃないんだけど、この状態はやっぱ変。
考えられる原因
上の画像の箇所以外にもちょこちょこと違和感を覚える箇所があった。
おかしい箇所がそこそこあるけど画面の構成（ヘッダー、フッター、サイドバーなど）は保たれている。
となると、怪しいのはcontent.css。
Chromeのデベロッパーツール（右クリックして検証を選択する）でHTMLのコードを見てみると、親テーマのcontent.cssが読み込まれてません。
これで裏が取れてよかったよかった。推測はダメ、確証が大事。
ページの表示を元に戻す方法
親テーマのcontent.cssが読み込まれてないことが原因ということが分かりました。
じゃあどうすればいいのか。
まず、自分でソースコードをいじる前にLION BLOG公式サイトで情報を確認する。
こういう時に周りを見ずに突っ走っちゃう子は後になってハマりがちですぞ。
LION BLOG公式サイトの説明
これまで親テーマのcss/contents.cssが、子テーマのstyle.cssよりも後に読み込まれていたため、singleページのCSSを修正(上書き)できない状況にありました。
そのため、これを改善するために、親テーマのバージョンアップに合わせて、子テーマのfunction.phpを下記のように修正いたしました。
※2018/01/16 CSS非同期読込設定を有効にしている時という条件を加えました。【get_option(‘fit_seo_cssLoad’) == “value2″】
途中のfunction.phpのソースコードは省略します。
子テーマを利用している方で、singleページのCSSを修正(上書き)をお考えの方は、子テーマを利用しているユーザーは必ず、環境に合わせて上記のようにファイルの修正をしてください。
また、子テーマファイル一式はこちらのページからダウンロードすることができます。
実際に表示を元に戻す方法
上にあるLION BLOG公式サイトの説明通りに、子テーマのfunction.phpを変更すればOKです。
子テーマをダウンロードして新しくしてもいいけど、ユーザーカスタマイズエリアを変更している人もいると思います。
そういう場合は、今あなたが使っている子テーマのfunction.phpを編集して使いましょう。
上の方を少し変えるだけでいいので簡単ですよ。
●Before
//////////////////////////////////////////////////
//親テーマstyle.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";
}
}
add_action('wp_head', 'fit_head_child');
●After
//////////////////////////////////////////////////
//親テーマstyle.cssを読み込む
//////////////////////////////////////////////////
function fit_head_child() {
if ( get_option('fit_seo_cssLoad') == "value2" && 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') == "value2" && 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について自信がない人は、この本で勉強すれば自信と実践力がつくと思うのでオススメですよ。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
