「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
