「PHP、CSSを編集してアップしたのに、WordPressに反映されない…」
ということありませんか?
私はあります。そして、何時間もネットで調べて、でも見つからなくてぐったりしていましたorz
私が以前やらかしたミスを4つ紹介します。同じようにお困りの方のお役に立てると幸いです。
目次
親テーマの打ち消しがされていない(CSS)
このサイトはstingerを親テーマとして、子テーマを作ってカスタマイズしています。
親テーマに無いCSSコードをプラスしたい時には、子テーマに書き足せば反映されます。でも、親テーマにあるCSSコードを消したい時には、子テーマで打ち消す必要があります。
例えば、下記の親テーマがある状態で、
1 2 3 4 |
p { font-size: 100%; margin-bottom: 2px; } |
フォントの色(color)をカスタマイズしたいなら、
子テーマで、下記のように「color: #333;」を付け足してあげれば反映されます。
1 2 3 4 5 |
p { font-size: 100%; color: #333; margin-bottom: 2px; } |
でも、親テーマから余白部分(margin-bottom)を無くしたいなら、
1 2 3 4 |
p { font-size: 100%; margin-bottom: 0px; } |
というように、「margin-bottom: 0px;」と書く必要があるのです。
単に「margin-bottom: 2px;」を消して
1 2 3 |
p { font-size: 100%; } |
とすると子テーマが反映がされず、「margin-bottom: 2px;」適用されたままなのです。
「margin-bottom: 0px;」と記載したところ、親テーマのこの部分を打ち消すことができました。
後ろの行に同じCSSがある(CSS)
「上記みたいに親テーマの打ち消しもしているのに、何度やっても反映されない…」という場合、後ろの行に同じCSSがある場合があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
p { font-size: 100%; color: #333; line-height: 1.7; margin-bottom: 2.2em; } ~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~ p { font-size: 100%; color: #333; line-height: 1.7; margin-bottom: 2.2em; } |
あれっ…下の方に、「p{ 」がもうひとつある…!!
後ろのp{~}」をごっそり消したら、正常に反映されました。以前、2回コピペしてしまったようです。
CSSは後に読み込まれたものが反映されます。何度やっても反映されない場合は、こちらの可能性も確認してみるのがおすすめです。
単なるスペルミス(PHP)
単にスペルミスをしていたこともありました。
CSSは問題なかったのですが…
1 2 3 |
.sns-button { margin: 10px; } |
PHPが…
1 |
<div class=”sn-button”> |
「sns」のスペルが「sn」になってる…!
直したら、正常に反映されましたorz
おまけ。サイドバーが変なところに移動してる!→</div>が閉じられていない(PHP)
他にも、「サイドバーが変なところに移動してる」というのがありました。
本当は、こうなっているものが…
サイドバーが消えた…!どこ行ったんだろう?
下までスクロールすると…
原因は、single.phpの</div>がひとつ足らず、<div class=”~”>が閉じられていないせいでした。

編集中にうっかり消してしまったようです。
まとめ。
- 後ろの行に同じCSSがある(CSS)
- 単なるスペルミス(PHP)
- サイドバーが変なところに移動してる!→</div>が閉じられていない(PHP)
- 親テーマの打ち消しがされていない(CSS)
皆さんも、お困りの際は、チェックしてみて下さいね。
「そんなことしねーよ!!」という上級者の方は、呆れた目で見ていて下さいorz