wordpressでcssを編集したのに効かない問題の対処と原因と特定する術
最近、友人にWeb制作を教えたりしてるんですが、
こんな質問がきました。
話を聞いてみると、こんな状況らしい。
・Wordpressの子テーマを使っている。
・それにcssを加えたが、それがなぜか反映されない。（子テーマのstyle.css）
・他のテーマで同じことしたらちゃんと反映されたのに、なぜこのテーマで反映されないのか？
という感じです。答えは結構簡単だったんですが、それを言っても成長という観点ではあまり意味がありません。
本人は、自分でめちゃくちゃ調べたらしく、それでもわからないから僕に聞いたみたいです。
今後活かせるように、どうやって原因がわかって、この問題を解決したのか、解決をした手順について書いていきます。
主に質問した方に向けて。笑
結論：最初に答え！
まず答えを先に言っておきます。
本人は子テーマのstyle.cssを編集していたみたいですが、それがこのテーマでは読み込まれていませんでした。
読み込んでいたcss
親テーマのstyle.css
子テーマのadds.css
質問者の彼は、読み込んでいない子テーマのstyle.cssを読み込んでいたので反映されなかったのです。
通常の子テーマだとこういうことはないのですが、質問者の子テーマはワンオフのエンジニアが作ったカスタム品だったようで、普通の子テーマとちょっと仕様が違うかったため、このようになったのかなと。
まあ、子テーマだったらstyle.css読み込んでると思いますよね・・・。
解決編：cssが読み込まれているか確認する
というかこれが全てです。まあ、これがわかるなら苦労しませんよね。笑
が、やり方を覚えれば簡単です。開発者ツールを使います。
なお、ブラウザはクロームを使いましょう。
IEやSafariの方は、まずクロームをDLするところから初めてください。
Chormeでググれば出ますのでその先でDLしましょう！
WordPressでcssが読み込まれる方法は2つ
wordpressでcssが読み込まれる方法は2つあります。
- html中にstyleタグで囲まれて挿入される
- style.cssなどの形でcssファイルが読み込まれる
文字だとわかりずらいですね、要はこういうことです。
//1.html中にstyleタグで囲まれて挿入される
<style>
.class{
color:#009633;
}
</style>
//2.style.cssなどの形でcssファイルが読み込まれる
<link rel="stylesheet" href="http://〇〇.jp/wp-content/themes/〇〇/style.css" media="all">styleタグで本文中に直接書き込まれているか、cssファイルを読み込んでいるかの違いです。
「cssが効かない！」となったら、まずこの2つのどっちかで読み込まれているか確認してください。
右クリック→検証でソースが見れます。
Macの場合「comand + F」で検索窓を出現させて、>styleと打てば、探してくれます。（Windowsなら、最初から右上にあるっぽい。）
開発者ツールの上にあるタブで「Sources」をクリックすれば、読み込んでいるファイルを表示してくれるので、そこから探していきましょう。
ドメインの中にある、wp-content/theme/の中に大体のファイルがあるかなと。
今回は、ここで子テーマのstyle.cssが読み込まれてないのがわかり、解決しました。
cssが読み込まれていない系なら、ここで解決できるでしょう。
cssが読み込まれているけど、更新が反映されてない場合は？
cssが正しく読み込まれている！でも、変更が反映されない。この時も2つのパターンに判れます。
- キャッシュが効いてて読み込まれない
- 追加したcssよりも優先度が高いcssがある。
1. キャッシュを削除しよう
キャッシュの場合は、キャッシュをクリアしましょう。開発者ツールが開いている状態で、
- Chormeの更新マークを右クリック。
- 表示されるメニューで「キャッシュの削除とハードの再読み込み」をクリック。
これでキャッシュがクリアされた状態で再読み込みされます。キャッシュクリアしてない場合は、一度やって見ましょう。
2. cssの優先度
cssには優先度なるものがあります。
どういうものかというと。
p{
color:blue;
font-size:20px;
}
p{
color:orange;
}
という感じに記述されていたら、最終的に
p{
color:orange;
font-size:20px;
}
という風に、下に書いたcssが優先されるのです。ファイルの場合は下のcssファイルが優先されます。
もし、優先度の問題なら、cssに「!important」をつければ最優先されます。（かなり強引な手法なので推奨はしない）
p{
color:blue !important;
font-size:20px;
}
p{
color:orange;
}
!importantはcssの一番最後につけます。↑のようにすれば、
p{
color:blue;
font-size:20px;
}
こんな感じになります。優先度負けている場合は、優先度あげればOK。
まとめ
という感じに問題点を探して、対処していきます。
今回は、最初にcssファイルを確認する時点でわかったので比較的あっさり解決できました。
所要時間3分です。
何かあった時は、調べるのは大事ですが、エンジニアに聞くのが一番早かったりしますね〜。
彼も無事に出来たようで何よりです！