ローカルと本番で同じテーマなのに表示が違っていた問題の原因と解決方法

Image

いつからか気がついたら本番のテーマがちょっと、おかしいんだよね~、という感じになっていました。ちょっとおかしいんだけどまぁ、使えないことでもないし大したことじゃないだろうからあとでちょちょっと調べて直そう、と思っていました。

今日ちょっと時間ができたので調べてみたら意外とわかるまでに時間がかかっちゃったのでそのことについて書きます。

どんな風におかしかったのか?

一目瞭然なのですが以前とローカルのサイトでは、

Image

このように RYUS Blog という文字と 株式会社RYUSのblog という文字は同じラインに表示されていました。ところが、本番サイトでは、

Image

こんな感じに 株式会社RYUSのblog という文字が改行して表示されます。

最近テーマやCSSをいじった覚えはないのだけど、と思いながらも使っている子テーマのファイルをアップしたりしますが全く変わりません。プラグインも疑ってみましたがすべて同じものが入っています。

本番を見ると 株式会社RYUSのblog という部分のspanに display:block という指定が入っています。ローカルにはそれが入っていません。

display:block は ブロックボックスを生成する
ref:スタイルシートリファレンス > display

ため、強制的に改行します。なので改行されちゃうのはわかるのですが、しかし子テーマの元の親テーマtwentyfourteenもローカルと本番で最新版に更新されています。

ローカル
Image

本番
Image

ということは全てが同じはずだけど…?

でも本当に同じなのか、親テーマの該当箇所を見比べてみた

最新版だから同じはずと思いましたが、twentyfourteenに入っているstyle.cssをローカルと本番のものを見比べてみました。すると、

ローカル
Image

本番
Image

…、両方とも最新にしているはずなのになんと!バージョンが違っていました

なるほど、なぜ最新なのには…はいったん置いておいて、問題の箇所が旧バージョンでは

Image

だったところが、新しいバージョンでは

Image

このように記述が増えていて、問題の display:block もこのバージョンから追加されています。

古いのに最新、というテーマを本当の最新にする

ローカルと本番のtwentyfourteenは同じでないと色々検証がしにくいのでまずは最新にしたいと思います。

どうやっても最新(1.2)に更新ができなかったので、外観>テーマ から twentyfourteen 詳細をクリックして、

Image

削除 をクリック。したら…

Image

こんなまずい感じになってしまいました(^_^;。削除して新しくインストールしようとしたのですが…結局、

https://wordpress.org/themes/twentyfourteen

このサイトで、

Image

ダウンロードし、zipを解凍したものを wp-contents/themes/ の下に入れて復活しました(^_^;。テーマが切り替わってしまっていたので、

Image

自分の子テーマを有効化します。

Image

無事におかしな表示に(?)なりました。

タイトルのところが改行されないように子テーマのstyle.cssに追加する

原因が分かって検証出来る環境もできたのでなおしたいと思います。子テーマのstyle.css

この記述を追加します。そしてトップページを読み直し(キャッシュが残ってるときはshift+f5します)ます

Image

改行がなくなり、もとのような表示になりました。本番サーバにstyle.cssをアップして、本番も

Image

無事になおりました(^^)/

まとめ:子テーマを使っている時は親テーマの更新に敏感になろう!

今回のように、子テーマを使っている時はそのテーマを直さなくても親テーマが更新されたときに表現が変わることがあります。なので、

修正した覚えがないのに何か変わっている!?

というときは親テーマの更新で何が変わったのかをチェックすると、直すのが早いかと思います。

教訓1:同じテーマなのに表示が違うのは親テーマのバージョンが違うのかも!

また、今回のようにローカルと本番が違っている!?みたいなこともまれに起こるのかもしれません。理由は分からないのですが最新にアップデート中に接続が切れたとか、なにか…あるのかもしれないですね。

同じテーマを使ってるはずなのになぜか表示が違う!?

ときは子テーマだけでなく親テーマも「ホントにその最新版は同じ?バージョンも?」と疑うのがいいのかもと思います。

教訓2:お使いのテーマはすべて最新版です。<を疑え!バージョン番号もホントに同じ?

特にtwentyfourteenは1.1から1.2でだいぶ違うところがあるようなのでなにかおかしかったらその違いを見てみるといいかと思います♪

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る